Toolbar simple layout

Author: C451

data/data.json

@@ -85143,17 +85143,13 @@
             "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAxQTFRFAAAATU1NTU1NTU1NwlMHHwAAAAR0Uk5TAOvhxbpPrUkAAAAkSURBVHicY2BgYHBggAByabxg1WoGBq2pRCk9AKUbcND43AEAufYHlSuusE4AAAAASUVORK5CYII="
         },
         {
-            "group": "Lines",
-            "tools": [
-                {
-                    "type": "LineToolSegment",
-                    "icon": ""
-                },
-                {
-                    "type": "LineToolExtended",
-                    "icon": ""
-                }
-            ]
+            "type": "LineToolSegment",
+            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAlQTFRFAAAATU1NJCQkCxcHIQAAAAN0Uk5TAP8SmutI5AAAACxJREFUeJxjYMACGAMgNAsLdpoVKi8AVe8A1QblQlWRKt0AoULw2w1zGxoAABdiAviQhF/mAAAAAElFTkSuQmCC"
+        },
+        {
+            "type": "LineToolExtended",
+            "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAQMAAAD+JxcgAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAATU1NkJ+rOQAAAAJ0Uk5TAP9bkSK1AAAANElEQVR4nGNggABGEMEEIlhABAeI+AASF0AlHmAqA4kzKAAx8wGQuAMKwd6AoYzBAWonAwAcLwTgNfJ3RQAAAABJRU5ErkJggg=="
         }
-    ]
+    ],
+    "tool": "Cursor"
 }

src/TradingVue.vue

@@ -114,6 +114,7 @@ export default {
         },
         colorTbBorder: {
             type: String,
+            default: '#8282827d'
         },
         font: {
             type: String,

src/components/Toolbar.vue

@@ -3,7 +3,9 @@
     <div class="trading-vue-toolbar" :style="styles">
         <toolbar-item v-for="(tool, i) in data.tools"
             :key="i"
-            :data="tool">
+            :data="tool"
+            :config="config"
+            :selected="tool.type === data.tool">
         </toolbar-item>
     </div>
 </template>
@@ -28,18 +30,19 @@ export default {
             let w = this.$props.config.TOOLBAR - b
             let c = colors.colorGrid
             let cb = colors.colorTbBack || colors.colorBack
-            let brd = colors.colorTbBorder || colors.colorGrid
+            let brd = colors.colorTbBorder || colors.colorScale
+            let st = this.$props.config.TB_B_STYLE
             return {
                 'width': `${w}px`,
                 'height': `${this.$props.height}px`,
                 'background-color': cb,
-                'border-right': `${b}px solid ${brd}`
+                'border-right': `${b}px ${st} ${brd}`
             }
         }
     },
     watch: {
         data() {
-            console.log(this.$props.data.tools)
+            console.log(this.$props.data)
         }
     }
 }
@@ -51,5 +54,6 @@ export default {
     position: absolute;
     border-right: 1px solid black;
     z-index: 100;
+    padding-top: 4px;
 }
 </style>

src/components/ToolbarItem.vue

@@ -1,6 +1,10 @@
 
 <template>
-    <div class="trading-vue-tbitem" :style="styles">
+    <div :class="['trading-vue-tbitem', selected ? 'selected-item' : '']"
+        :style="item_style">
+        <div class="trading-vue-tbicon"
+            :style="icon_style">
+        </div>
     </div>
 </template>
 
@@ -9,31 +13,30 @@
 export default {
     name: 'ToolbarItem',
     props: [
-        'data', 'colors', 'tv_id', 'config'
+        'data', 'selected', 'colors', 'tv_id', 'config'
     ],
     mounted() {
-        console.log(this.$props.data)
+        console.log(this.$props.selected)
     },
     computed: {
-        styles() {
-            /*let colors = this.$props.colors
-            let b = this.$props.config.TB_BORDER
-            let w = this.$props.config.TOOLBAR - b
-            let c = colors.colorGrid
-            let cb = colors.colorTbBack || colors.colorBack
-            let brd = colors.colorTbBorder || colors.colorGrid
+        item_style() {
+            let conf = this.$props.config
+            let im = conf.TB_ITEM_M
+            let m = (conf.TOOLBAR - conf.TB_ICON) * 0.5 - im
+            let s = conf.TB_ICON + im * 2
             return {
-                'width': `${w}px`,
-                'height': `${this.$props.height}px`,
-                'background-color': cb,
-                'border-right': `${b}px solid ${brd}`
-            }*/
+                'width': `${s}px`,
+                'height': `${s}px`,
+                'margin': `8px ${m}px 0px ${m}px`,
+                'border-radius': '3px'
+            }
+        },
+        icon_style() {
             return {
                 'background-image': `url(${this.$props.data.icon})`,
                 'width': '25px',
                 'height': '25px',
-                'margin': '15px',
-                'filter': 'brightness(1.6) sepia(1) hue-rotate(120deg) saturate(6)'
+                'margin': '5px'
             }
         }
     }
@@ -43,6 +46,15 @@ export default {
 
 <style>
 .trading-vue-tbitem {
+}
+.trading-vue-tbitem:hover {
+    background-color: #76878319;
+}
 
+.trading-vue-tbicon {
+    position: absolute;
+}
+.trading-vue-tbitem.selected-item .trading-vue-tbicon {
+    filter: brightness(1.6) sepia(1) hue-rotate(110deg) saturate(6);
 }
 </style>

src/icons/Extended.png

@@ -31,8 +31,11 @@ const $SCALES = [0.05, 0.1, 0.2, 0.25, 0.5, 0.8, 1, 2, 5]
 
 const ChartConfig = {
     SBMIN: 60,      // Minimal sidebar px
-    TOOLBAR: 60,    // Toolbar width px
-    TB_BORDER: 2,   // Toolbar border px
+    TOOLBAR: 57,    // Toolbar width px
+    TB_ICON: 25,    // Toolbar icon size px
+    TB_ITEM_M: 5,   // Toolbar item margin px
+    TB_BORDER: 1,   // Toolbar border px
+    TB_B_STYLE: 'dotted', // Toolbar border style
     EXPAND: 0.15,   // %/100 of range
     CANDLEW: 0.6,   // %/100 of step
     GRIDX: 100,     // px