Commit 0aa64419 authored by nwindis's avatar nwindis
Browse files

Merge branch 'develop' into feature/#15-color-schema

* develop:
  Bugfix/#73 minors/majors
parents 4b8687fa 1baef334
Pipeline #153304 passed with stages
in 3 minutes and 34 seconds
......@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.4.3] - 2020-10-05
### Added
- New local store for tree component.
### Fixed
- re-rendering of components when drag and drop on dialog modal.
## [1.4.2] - 2020-10-01
### Added
......
......@@ -26,7 +26,7 @@ module.exports = function (ctx) {
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
// 'roboto-font', // optional, you are not bound to it
'material-icons'
// 'material-icons' // optional, you are not bound to it
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
......
......@@ -2,19 +2,9 @@
<div>
<h1 class="text-h5 text-bold text-uppercase">
<span>{{ cut(collectiontitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
class="q-pb-xs q-ml-xs"
size="sm"
:name="fasChevronRight"
/>
<q-icon class="q-pb-xs" size="sm" :name="fasChevronRight" />
<span>{{ cut(manifesttitle) }}</span>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
class="q-pb-xs q-ml-xs"
size="sm"
:name="fasChevronRight"
/>
<q-icon class="q-pb-xs" size="sm" :name="fasChevronRight" />
<span>{{ itemlabel }}</span>
</h1>
</div>
......
......@@ -7,10 +7,11 @@
:disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)"
>
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
size="sm"
/>
{{ captionprev }}
</q-btn>
......@@ -24,9 +25,10 @@
@click="toggleSheet(++itemindex)"
>
{{ captionnext }}
<!-- FIXME: Size is best set with Quasar'xs-xl -->
<q-icon
:name="fasArrowRight"
size="sm"
class="q-pl-sm"
/>
</q-btn>
......
......@@ -9,12 +9,7 @@
outline
/>
<q-dialog
v-model="status"
persistent
transition-show="scale"
transition-hide="scale"
>
<q-dialog v-model="status" transition-show="scale" transition-hide="scale">
<!-- FIXME: remove inline style -->
<q-card style="width: 600px;">
<q-card-section>
......
......@@ -5,11 +5,12 @@
label-key="label-key"
node-key="label"
:expanded.sync="expanded"
:icon="fasCaretRight"
:nodes="tree"
:selected-color="$q.dark.isActive ? 'grey' : ''"
:selected.sync="selected"
>
<template v-slot:default-body={node}>
<template v-slot:default-body="{node}">
<div v-if="!node.children" :id="`selectedItem-${node['label']}`"></div>
</template>
</q-tree>
......@@ -17,7 +18,8 @@
</template>
<script>
import matIcons from 'quasar/icon-set/material-icons';
import { fasCaretRight } from '@quasar/extras/fontawesome-v5';
import treestore from '@/stores/treestore.js';
export default {
name: 'Treeview',
......@@ -28,19 +30,28 @@ export default {
data() {
return {
expanded: [],
selected: this.manifests[0].sequence[0].id,
selected: null,
sequenceindex: 0,
};
},
created() {
this.$q.iconSet.set(matIcons);
this.fasCaretRight = fasCaretRight;
},
mounted() {
// expand the root node as well as the first knot which contains the actual item selected
this.expanded.push(this.tree[0].label, this.manifests[0].label);
// select tree node
this.selected = treestore.state.selectedItemTree || this.manifests[0].sequence[0].id;
this.$root.$on('update-item', (item) => {
// expand the first level
this.expanded.push(this.tree[0].label);
// expand second label - dynamic
const finalSeqIdx = treestore.state.seqTree || 0;
this.expanded.push(this.manifests[finalSeqIdx].label);
this.$root.$on('update-item', (item, seqIdx) => {
this.selected = item;
treestore.updateselectedtreeitem(item);
treestore.updatetreesequence(seqIdx);
});
this.$root.$on('update-sequence-index', (index) => {
......@@ -87,14 +98,10 @@ export default {
z-index: 999;
}
}
}
.q-tree__node-header-content.col.row.no-wrap.items-center {
z-index: 99;
}
.q-tree__children {
cursor: pointer;
.q-tree__children {
cursor: pointer;
}
}
.view-tree::-webkit-scrollbar {
......
<template>
<section class="panel-boxs">
<section>
<div class="panels">
<Panelsdraggable
handle=".only-bedrag"
......@@ -19,7 +19,7 @@
<!-- FIXME: use a div or alike, but not HTML header tag -->
<header>
<input
class="hidden-textinput"
class="panel-textinput"
type="text"
:class="$q.dark.isActive ? 'bg-grey-8 text-white' : 'bg-grey-1 text-black'"
:value="panel.panel_label"
......@@ -54,7 +54,7 @@
</div>
</div>
<q-btn v-if="panels.length < 4"
color="secondary"
color="$grey-4"
flat
size="large"
slot="footer"
......@@ -79,7 +79,9 @@ export default {
draggedPanelIdx: null,
panels: [],
}),
props: { data: Array },
props: {
data: Array,
},
mounted() {
this.setpanels();
},
......@@ -110,7 +112,10 @@ export default {
event.target.style.outline = outline;
},
handlePanelLabel(e, index) {
this.$root.$emit('update-panellabel', { v: e.target.value, index });
this.$root.$emit('update-panellabel', {
v: e.target.value,
index,
});
},
receivingComponent(e) {
const element = e.target;
......
......@@ -13,7 +13,6 @@ const panels = [
connector: [1, 2],
panel_label: 'Tabs',
show: true,
tab_model: null,
},
{
id: uuidv4(),
......
body {
// FIXME: don't use !important
// background-color: $color-body__background !important;
height: 100vh;
overflow-y: hidden;
@media (max-width: 1023px) {
overflow-y: auto !important;
}
// @media (prefers-color-scheme: dark) {
// // FIXME: don't use !important
// background-color: $color-body__background--dark !important;
// }
}
.scroll-panel {
......@@ -56,27 +50,18 @@ body {
display: none;
}
.unselect-text {
-webkit-touch-callout: none;
user-select: none;
}
.panels-target > * {
border-right: 1px solid #ddd !important;
flex: auto;
}
.toggle-list > * {
.toggle-list .q-item {
align-items: center;
}
.hidden-textinput {
.panel-textinput {
background: transparent;
border: 0;
outline: none;
width: 100%;
}
// .q-focus-helper {
// display: none;
// }
export default {
state: {
selectedItemTree: null,
seqTree: null,
},
updateselectedtreeitem(updatedvalue) {
this.state.selectedItemTree = updatedvalue;
},
updatetreesequence(updatedvalue) {
this.state.seqTree = updatedvalue;
},
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment