Skip to content

Commit 1b47e42

Browse files
krammytFreyaXHOneOneFourdtorrenpPuredbest
authored
1.0.0 release candidate (#54)
* resolve merge conflict * minor tweaks, fixes issue where top right hotspot not showing * set min/max on Pane size * styling for the guidance system * fixed incorrect event handlers being removed * added mobile vh support for safari + chrome * added position relative to main stage * add transparent prop to fixedhotspot * styling of the guidance system * added alignment class. Fixed bad webpack imports in guidance * fix various build errors * pre-merging with freyas stuff * Slider block * slider block styling * issue with zindex solved by reseting it to auto * okay one last ting witht he units i promise * highlight multiple elements in vis * shadow boxes on toggle hotspot * premerge * fixed default array assingment * added colours bus, components should now use preselected bus colours * sliderBlock Emits event (#51) * Dev (#50) * resolve merge conflict * minor tweaks, fixes issue where top right hotspot not showing * set min/max on Pane size * styling for the guidance system * fixed incorrect event handlers being removed * added mobile vh support for safari + chrome * added position relative to main stage * add transparent prop to fixedhotspot * styling of the guidance system * added alignment class. Fixed bad webpack imports in guidance * fix various build errors * pre-merging with freyas stuff * Slider block * slider block styling * issue with zindex solved by reseting it to auto * okay one last ting witht he units i promise * highlight multiple elements in vis * shadow boxes on toggle hotspot * premerge * fixed default array assingment * added colours bus, components should now use preselected bus colours Co-authored-by: Robert King <[email protected]> Co-authored-by: Daniel Torren Peraire <[email protected]> * bump version to 0.3.0 * removed duplicate export of the same thing * added missing bracket * removed critical dependency thing (i think) * sliderBlock Emits event * 🤞 Co-authored-by: FreyaXH <[email protected]> Co-authored-by: Robert King <[email protected]> Co-authored-by: Daniel Torren Peraire <[email protected]> Co-authored-by: Robert Jones <[email protected]> * Updated @impvis/components * iv-pane now correctly overflows text * bump to beta version * fixed Pane adding uneeded scrollbar * Added version checker * Fixed z-index issure with titleBar * prevent content in main-stage from overflowing its container * bump version to beta2 * pane work continues * fixed z-index weirdness, removed need for title component, integrated into iv-visualisation * no longer exporting iv-title-bar * bump to beta3 * renamed to SliderBlock * working sidebar sections * added custom meter component, working sidebars, now just need theming * added proper themeing support * sections have working styling * added placeholder navigation * bump to 1.0.0-beta1 * final 1.0.0 candidate * fixed duplicate key in GuidanceModal Co-authored-by: Unknown <[email protected]> Co-authored-by: Robert King <[email protected]> Co-authored-by: Daniel Torren Peraire <[email protected]> Co-authored-by: FreyaXH <[email protected]> Co-authored-by: Puredbest <[email protected]> Co-authored-by: Robert Jones <[email protected]>
1 parent 5b4d0b3 commit 1b47e42

38 files changed

+1126
-368
lines changed

‎package-lock.json

+348-125
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@impvis/components",
3-
"version": "0.3.2",
3+
"version": "1.0.0",
44
"license": "BSD-3-Clause",
55
"main": "./dist/impvis-components.js",
66
"unpkg": "./dist/impvis-components.umd.js",
@@ -15,19 +15,22 @@
1515
"examples:dragdrop": "vue-cli-service serve ./Examples/SVGDragAndDrop.js"
1616
},
1717
"dependencies": {
18+
"compare-versions": "^3.6.0",
1819
"component-fixture": "^1.14.0",
1920
"core-js": "^3.6.5",
2021
"save": "^2.4.0",
2122
"vue-resize": "^0.5.0"
2223
},
2324
"peerDependencies": {
24-
"vue": "^2.6.11"
25+
"vue": "^2.6.11",
26+
"vue-awesome": "^4.1.0"
2527
},
2628
"devDependencies": {
27-
"@rollup/plugin-alias": "^3.1.1",
2829
"@rbnlffl/rollup-plugin-eslint": "^1.0.0",
30+
"@rollup/plugin-alias": "^3.1.1",
2931
"@rollup/plugin-commonjs": "^13.0.0",
3032
"@rollup/plugin-image": "^2.0.5",
33+
"@rollup/plugin-json": "^4.1.0",
3134
"@rollup/plugin-node-resolve": "^8.1.0",
3235
"@vue/cli-plugin-babel": "~4.4.0",
3336
"@vue/cli-plugin-eslint": "~4.4.0",

‎rollup.config.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ import resolve from "@rollup/plugin-node-resolve";
77
import eslint from "@rbnlffl/rollup-plugin-eslint";
88
import alias from "@rollup/plugin-alias";
99
import {terser} from "rollup-plugin-terser";
10-
10+
import json from "@rollup/plugin-json";
1111
const external = [
1212
'vue',
1313
'katex',
14-
'katex/dist/katex.min.css'
14+
'katex/dist/katex.min.css',
15+
'vue-awesome/components/Icon',
16+
'vue-awesome/icons'
1517
]
1618
const pluginConfig = [
1719
alias({
@@ -26,6 +28,7 @@ const pluginConfig = [
2628
commonjs(),
2729
scss({output:'./dist/impvis-components.css'}),
2830
image(),
31+
json(),
2932
vue({css:false}),
3033
eslint(),
3134
terser()

‎src/Theme.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
class Theme{
2+
constructor(baseHex){
3+
this.main = baseHex;
4+
this.light = this.generateTint(0.2)
5+
this.dark = this.generateShade(0.8)
6+
this.highlight = this.generateTint(0.8)
7+
}
8+
generateShade(fraction){
9+
if(fraction > 1 || fraction < 0) throw Error("fraction must be between 0 and 1");
10+
const colorRGB = Theme.hexToRGB(this.main)
11+
return Theme.rgbToHex(...colorRGB.map( (v) => Math.round(fraction * (v))))
12+
}
13+
generateTint(fraction){
14+
if(fraction > 1 || fraction < 0) throw Error("fraction must be between 0 and 1");
15+
const colorRGB = Theme.hexToRGB(this.main)
16+
return Theme.rgbToHex(...colorRGB.map( (v) => Math.round(v + fraction * (255 - v))))
17+
}
18+
static hexToRGB(hex){
19+
const subhex = hex.substring(1)
20+
if(subhex.length < 6) throw Error("Must include hex code starting with #")
21+
return [parseInt(subhex.substring(0,2),16),parseInt(subhex.substring(2,4),16),parseInt(subhex.substring(4,6),16)]
22+
}
23+
static rgbToHex(r,g,b){
24+
return `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}`
25+
}
26+
}
27+
Theme.DeepBlue = new Theme('#0b3053')
28+
Theme.Blue = new Theme('#008bd2')
29+
Theme.Turqouise = new Theme('#11b1a2')
30+
Theme.Lime = new Theme('#a8cc6a')
31+
Theme.Purple = new Theme('#62296b')
32+
Theme.Red = new Theme('#cf103f')
33+
Theme.Orange = new Theme('#ef7814')
34+
Theme.Yellow = new Theme('#fcd916')
35+
Theme.Gold = new Theme('#f6b00f')
36+
export default Theme;

‎src/buses/colorStore.js

-57
This file was deleted.

‎src/buses/guidanceBus.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
import Vue from 'vue';
2-
const guidanceBus = new Vue();
2+
const guidanceBus = new Vue({
3+
data:{ active:false}
4+
});
35
export default guidanceBus;

‎src/components/Button/Button.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ $disabledColor:#D3D3D3;
3939
text-align: center;
4040
text-decoration: none;
4141
display: inline-block;
42-
font-size: 1rem;
42+
font-size: 1.2rem;
43+
height:1.45rem;
4344
padding: 0.25em 0.5em;
4445
background-color: $green;
4546
color:$white;

‎src/components/DropdownList/DropdownList.vue

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export default {
5959
<style scoped>
6060
/* The container <div> - needed to position the dropdown content */
6161
.dropdown {
62-
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
6362
position: relative;
6463
display: inline-block;
6564
}

‎src/components/DropdownList/DropdownListElement.vue

-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ export default {
2929
<style>
3030
/* Dropdown Content (Hidden by Default) */
3131
.dropdown-content-element {
32-
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
33-
font-size: 12px;
3432
font-weight: normal;
3533
letter-spacing: .05rem;
3634
text-align: center;

‎src/components/DropdownTextBox/DropdownTextBox.vue

-2
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,6 @@ export default {
9090
display: block;
9191
border: 1px solid rgba(0, 0, 0, 0.2);
9292
color: black;
93-
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
94-
font-size: 12px;
9593
font-weight: normal;
9694
letter-spacing: .05rem;
9795
text-align: center;

‎src/components/Meter/Meter.vue

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="iv-meter">
3+
<span class="iv-meter-bar" :style="{'width':widthPercentage}"></span>
4+
</div>
5+
</template>
6+
<script>
7+
export default {
8+
name:'iv-meter',
9+
props:{
10+
min:{
11+
type:Number,
12+
required:true
13+
},
14+
max:{
15+
type:Number,
16+
required:true
17+
},
18+
value:{
19+
type:Number,
20+
required:true
21+
}
22+
},
23+
mounted(){
24+
if(this.max < this.min) throw RangeError('The minimum value may not exceed the maximum value')
25+
},
26+
computed:{
27+
boundedValue(){
28+
return (this.value > this.min)? ((this.value < this.max)? this.value : this.max) : this.min
29+
},
30+
widthPercentage(){
31+
return `${100*(this.boundedValue - this.min)/(this.max - this.min)}%`
32+
}
33+
}
34+
}
35+
</script>
36+
<style lang="scss">
37+
.iv-meter{
38+
width:100%;
39+
min-height:5px;
40+
background:#aaa;
41+
.iv-meter-bar{
42+
min-height:5px;
43+
height:100%;
44+
background:#ff1447;
45+
display: block;
46+
text-indent: -9999px;
47+
}
48+
}
49+
</style>

‎src/components/Meter/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import Meter from './Meter.vue'
2+
export default Meter;

‎src/components/Navigation/PageIndicator.vue

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div id="iv-page-indicator">
3+
<a v-for="i in number_of_pages" :key="i" href="#" :id="`iv-page-indicator-no-${i}`"
4+
class="iv-page-indicator-button" :class="{'iv-current-page': (i) === current_page}">{{i}}</a>
5+
</div>
6+
</template>
7+
<script>
8+
export default {
9+
name:'iv-page-indicator',
10+
props:{
11+
number_of_pages:{
12+
type:Number,
13+
required:true,
14+
default: 5
15+
},
16+
current_page:{
17+
type:Number,
18+
required:true,
19+
default:3
20+
}
21+
}
22+
}
23+
</script>
24+
<style lang="scss">
25+
@import "src/globals.scss";
26+
#iv-page-indicator{
27+
display:flex;
28+
flex-direction: row;
29+
justify-content: flex-start;
30+
z-index:$titlebarZLevel;
31+
margin-left:0.5rem;
32+
}
33+
.iv-page-indicator-button{
34+
text-decoration: none;
35+
padding: 0.1rem 0.3rem;
36+
margin: 0 0.3rem;
37+
font-size:1.1rem;
38+
line-height: 1.1rem;
39+
font-weight:600;
40+
border-radius: 7px;
41+
box-sizing: border-box;
42+
border: 0.15rem solid $white;
43+
color:$white;
44+
&:visited{
45+
color:$white;
46+
}
47+
&.iv-current-page{
48+
color:$primaryImperialBlue;
49+
background: $white;
50+
}
51+
}
52+
</style>

‎src/components/Navigation/PaneNavigator.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<div class="iv-pane-navigator">
3+
<a href="#" id="iv-pagination-prev" class="iv-button">Previous</a>
4+
<a href="#" id="iv-pagination-next" class="iv-button">Next</a>
5+
</div>
6+
</template>
7+
<script>
8+
export default{
9+
name:'iv-pane-navigator'
10+
}
11+
</script>
12+
<style lang="scss">
13+
@import 'src/globals.scss';
14+
.iv-pane-navigator{
15+
height:3rem;
16+
flex: 0 0 auto;
17+
display:flex;
18+
align-items: center;
19+
justify-content: space-around;
20+
flex-direction: row;
21+
background:$lightgray;
22+
position:relative;
23+
a{
24+
width:5rem;
25+
background:$primaryDarkBlue;
26+
&:hover{
27+
background:#3e668b
28+
}
29+
}
30+
&::before{
31+
content:"";
32+
position: absolute;
33+
left:0;
34+
top:0;
35+
width:100%;
36+
height:100%;
37+
z-index:-1;
38+
box-shadow: -10px 10px 10px 10px #e4e4e4;
39+
}
40+
}
41+
</style>

‎src/components/Navigation/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import PaneNavigator from './PaneNavigator.vue'
2+
import PageIndicator from './PageIndicator.vue'
3+
export {PaneNavigator,PageIndicator};

0 commit comments

Comments
 (0)