Работа над BookmarkSettings

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -4,6 +4,51 @@
             Настроить закладки
         </template>
 
+        <div class="column fit">
+            <div class="row items-center top-panel bg-grey-3">
+                <q-btn class="q-mr-md" round dense color="blue" icon="la la-check" @click.stop="openSelected" size="16px">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть выбранную закладку</q-tooltip>
+                </q-btn>
+                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" placeholder="Найти" v-model="search">
+                </q-input>
+                <q-btn round dense color="blue" icon="la la-cog" @click.stop="openOptions" size="14px">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
+                </q-btn>
+            </div>
+
+            <div class="col row">
+                <div class="left-panel column items-center bg-grey-3">
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveUp" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить вверх</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveDown" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить вниз</q-tooltip>
+                    </q-btn>
+                </div>
+
+                <div class="col tree">
+                    <q-tree
+                      :nodes="nodes"
+                      node-key="key"
+                      tick-strategy="leaf-filtered"
+                      :selected.sync="selected"
+                      :ticked.sync="ticked"
+                      :expanded.sync="expanded"
+                      text-color="grey-7"
+                      selected-color="black"
+                    />    
+                </div>
+            </div>
+        </div>
     </Window>
 </template>
 
@@ -29,6 +74,11 @@ export default @Component({
     }    
 })
 class BookmarkSettings extends BookmarkSettingsProps {
+    search = '';
+    selected = '';
+    ticked = [];
+    expanded = [];
+
     created() {
     }
 
@@ -39,6 +89,30 @@ class BookmarkSettings extends BookmarkSettingsProps {
         this.$refs.window.init();
     }
 
+    get nodes() {
+        const result = [];
+
+        let i = 0;
+        this.libs.groups.forEach(group => {
+            const g = {label: group.r, key: `${i}`, children: []};
+            let j = 0;
+            group.list.forEach(link => {
+                g.children.push({label: (link.c ? link.c + ' ': '') + link.l, key: `${i}-${j}`});
+            });
+
+            result.push(g);
+            i++;
+        });
+
+        return result;
+    }
+
+    openSelected() {
+    }
+
+    openOptions() {
+    }
+
     close() {
         this.$emit('close');
     }
@@ -56,4 +130,19 @@ class BookmarkSettings extends BookmarkSettingsProps {
 </script>
 
 <style scoped>
+.top-panel {
+    height: 50px;
+    border-bottom: 1px solid gray;
+    padding: 0 10px 0 12px;
+}
+
+.left-panel {
+    width: 60px;
+    border-right: 1px solid gray;
+    padding: 10px 0 10px 0;
+}
+
+.tree {
+    padding: 10px;
+}
 </style>

client/components/ExternalLibs/ExternalLibs.vue

@@ -23,7 +23,7 @@
                         <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
                             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
                         </q-btn>
-                        <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px" disabled>
+                        <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px">
                             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки</q-tooltip>
                         </q-btn>
                     </template>
@@ -621,7 +621,6 @@ class ExternalLibs extends Vue {
         }
         return false;
     }
-
 }
 //-----------------------------------------------------------------------------
 </script>

client/quasar.js

@@ -31,6 +31,7 @@ import {QColor} from 'quasar/src/components/color';
 import {QPopupProxy} from 'quasar/src/components/popup-proxy';
 import {QDialog} from 'quasar/src/components/dialog';
 import {QChip} from 'quasar/src/components/chip';
+import {QTree} from 'quasar/src/components/tree';
 
 const components = {
     //QLayout,
@@ -57,6 +58,7 @@ const components = {
     QPopupProxy,
     QDialog,
     QChip,
+    QTree
 };
 
 //directives