Commit 8f522352 authored by Anton Koch's avatar Anton Koch

Merge branch '23-mosys---mobile-add-cells-(frontend-systems)' into 'master'

systems-frontend: mosys mobile

Closes #23

See merge request !103
parents 5ebbb9e2 e0389c83
Pipeline #29019 passed with stage
in 2 minutes and 18 seconds
Subproject commit e110a92669f2dc9569e4bead385aa9970591847b
Subproject commit 7ce80d811314d22996bc6f3e70c03e439c31bbef
......@@ -20,7 +20,8 @@ module.exports = function (ctx) {
'socket',
'touch',
'vocabularies',
'window'
'window',
'intersection-observer'
],
css: [
'app.styl'
......@@ -194,7 +195,10 @@ module.exports = function (ctx) {
'QIcon',
'QChip',
'QUploader',
'QEditor'
'QEditor',
'QCarousel',
'QCarouselSlide',
'QCarouselControl'
],
directives: [
'Ripple',
......@@ -209,7 +213,8 @@ module.exports = function (ctx) {
'Dialog',
'Loading',
'ActionSheet',
'Screen'
'Screen',
'AppFullscreen'
]
},
animations: 'all',
......
Subproject commit 6d4533859d7ce2c8d2dfaa60b67e7efd350561de
Subproject commit 9c0071d0a766c3d8d3fa1c18d911a0de5348e713
Subproject commit e20e5a5ccd814ab1bcc3216ef9047a732adcbd91
Subproject commit e32ba79f7ce1dcef824c51db33471b29c85840c5
......@@ -235,6 +235,24 @@ body
.q-item
padding 0
.transition
transition all ease 300ms
.full-modal
height 80vh
.source-editor-carousel
.q-carousel-left-arrow
.q-carousel-right-arrow
top 6px!important
transform none!important
// background #eee
background none
border-radius .35rem
.q-carousel-left-arrow
left 8px
.q-carousel-right-arrow
right 8px
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* color modifier classes
......
<template lang="pug">
q-layout(view='hHh LpR fFf')
q-layout-header
q-layout-header.no-shadow(style="border-bottom: 0;")
user-nav
q-page-container
router-view
......
<template lang="pug">
.grid-editor-container(:class="{'tabs-open': tabsAreOpen}")
//
div.grid-editor-shadow-right(v-if="tabsAreOpen")
.grid-editor-container
// ------------------------------------------------------------------------------------------------------------ grid
grid-editor.grid-editor(ref="gridEditor", :gridUuid="$route.params.uuid", :tabsAreOpen="tabsAreOpen")
// -------------------------------------------------------------------------------------------------------- new cell
grid-editor-sources.grid-editor-sources(v-if="$store.state.mosys.showSources")
.desktop-only(v-if="$store.state.mosys.showSources")
// .grid-editor-border-left.z-top.bg-grey-4
.full-height
source-editor.source-editor.bg-white.overflow-hidden
q-modal.mobile-only.z-max(v-model="$store.state.mosys.showSources", minimized, content-css="border-radius: .5rem;",
content-classes="full-modal")
source-editor
// ----------------------------------------------------------------------------------------------------- cell editor
// template(v-if="!isMobile")
.desktop-only
grid-editor-editing-cells.grid-editor-editing-cells(v-if="showEditingCells")
//template(v-else)
// q-modal.mobile-only(v-model="showEditingCells", @hide="closedModal()", position="bottom")
grid-editor-editing-cells
// grid-editor-add-cells.grid-editor-sources(v-if="$store.state.mosys.showAddCells")
.desktop-only(v-if="showEditingCells")
// .grid-editor-border-left.z-top.bg-grey-4
.full-height
cell-editor.grid-editor-editing-cells.bg-white
</template>
<script>
import { mapGetters } from 'vuex'
import GridEditor from '../../../components/mosys/partials/GridEditor'
import GridEditorSources from '../../../components/mosys/partials/GridEditorSources'
import GridEditorAddCells from '../../../components/mosys/partials/GridEditorAddCells'
import GridEditorEditingCells from '../../../components/mosys/partials/GridEditorEditingCells'
import SourceEditor from '../../../components/mosys/partials/SourceEditor'
import CellEditor from '../../../components/mosys/partials/CellEditor'
export default {
components: {
GridEditorEditingCells,
GridEditorAddCells,
GridEditor,
GridEditorSources
SourceEditor,
CellEditor
},
data () {
return {
......@@ -43,17 +48,11 @@
beforeDestroy () {
this.$root.$off('mosys_saveScrollPosition', this.handleSaveGridScrollPosition)
},
watch: {
// tabsAreOpen () {
// this.$refs.gridEditor.resetScrollPosition()
// }
},
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile',
showEditingCells: 'mosys/getShowEditingCells',
showSources: 'mosys/getShowSources',
scrollPositionCache: 'mosys/getScrollPositionCache'
showSources: 'mosys/getShowSources'
// scrollPositionCache: 'mosys/getScrollPositionCache'
}),
tabsAreOpen () {
return this.showSources || this.showEditingCells
......@@ -75,41 +74,29 @@
.grid-editor-container
display flex
width 100%
height calc(100% - 50px) // FIXME: quick fix for issue #13, can we do without calc()?
height calc(100% - 59px) // FIXME: quick fix for issue #13, can we do without calc()?
position absolute
flex-direction row
.grid-editor-editing-cells
.grid-editor
.grid-editor-sources
flex-grow 1
width 100%
height 100%
.grid-editor
overflow auto
.grid-editor
overflow auto
.tabs-open
.grid-editor
width calc(2*100%/3)
.source-editor
.grid-editor-editing-cells
flex-grow 1
width 100%
height 100%
/*
.grid-editor-editing-cells
.grid-editor-sources
width calc(100%/3) */
.source-editor
.grid-editor-editing-cells
width calc(100vw / 4)
.grid-editor-shadow-right
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2));
position absolute
right calc(100%/3)
top 0
bottom 0
width 8px
.grid-editor-border-left
position absolute
right calc(100vw / 4)
top 0
width 1px
height 100%
.backbutton
position absolute
top 1em
left 1em
z-index 99999
opacity .4
</style>
......@@ -2,7 +2,7 @@
.grid-display-container
//div.backbutton(v-if="!isMobile")
q-btn(slot="backButton", @click="$router.push('/mosys/grids')", icon="keyboard_backspace", round, small, color="black")
grid-display.grid-display(ref="gridDisplay", :gridUuid="$route.params.uuid")
grid-display.grid-display.bg-dark(ref="gridDisplay", :gridUuid="$route.params.uuid")
</template>
<script>
......
export default ({ Vue }) => {
Vue.directive('intersection-observer', {
// bind: function (el) {
bind: function (el, binding, vnode) {
console.log('binding', binding.expression)
const options = {
// root: null,
threshold: '0'
}
const observer = new IntersectionObserver(observerCallback, options)
observer.observe(el)
function observerCallback (entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.dataset.left = 'xxx'
// vnode.context.$emit('onIntersectionChanged')
vnode.context.$emit('onIntersectionChanged')
console.log(vnode)
console.log(binding.expression)
console.log('=======')
// console.log(entry)
// console.log(el.dataset)
// console.log('########')
}
else {
el.dataset.left = entry.boundingClientRect.left
// console.log(entry)
// console.log(el.dataset)
// console.log('--------')
}
})
}
}
})
}
......@@ -8,20 +8,35 @@ const mosys = {
selectedCells: [],
editingCells: [],
scrollPositionCache: 0,
editMode: undefined
newCell: undefined,
editCellModal: false,
currentTimeline: undefined,
sourceCellInput: undefined
},
getters: {
getSourceCellInput: state => state.sourceCellInput,
getNewCell: state => state.newCell,
getShowSources: state => state.showSources,
getShowAddCells: state => state.showAddCells,
getSelectedCells: state => state.selectedCells,
getEditingCells: state => state.editingCells,
getShowEditingCells: state => state.showEditingCells,
getScrollPositionCache: state => state.scrollPositionCache,
getEditMode: state => state.editMode
getEditCellModal: state => state.editCellModal,
getCurrentTimeline: state => state.currentTimeline
},
mutations: {
setEditMode (state, mode) {
state.editMode === mode ? state.editMode = undefined : state.editMode = mode
setSourceCellInput (state, value) {
state.sourceCellInput = value
},
setCurrentTimeline (state, obj) {
state.currentTimeline = obj
},
setEditCellModal (state, visibility) {
state.editCellModal = visibility
},
cacheNewCell (state, cell) {
state.newCell = cell
},
setEditingCells (state, cells) {
state.editingCells = cells
......
Markdown is supported
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