deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Работа над BookmarkSettings

Browse Source
This commit is contained in:
Book Pauk
2020-11-03 17:03:57 +07:00
parent 7e4c938dfd
commit ba6bf8c091
3 changed files with 92 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue
View File

@@ -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>

3
client/components/ExternalLibs/ExternalLibs.vue
View File

@@ -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>

2
client/quasar.js
View File

@@ -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