mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-12 21:58:58 +09:00
Code

wip

Browse Source
This commit is contained in:
syuilo 2020-07-04 21:47:54 +09:00
parent 157f1c66dc
commit 1b75984046
1 changed files with 59 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/client/app.vue
View File

@ -86,33 +86,31 @@
</div> </div>
</main> </main>
<div class="widgets"> <div class="widgets" :class="{ edit: widgetsEditMode }">
<div ref="widgets" :class="{ edit: widgetsEditMode }"> <template v-if="isDesktop && $store.getters.isSignedIn">
<template v-if="isDesktop && $store.getters.isSignedIn"> <template v-if="widgetsEditMode">
<template v-if="widgetsEditMode"> <mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button>
<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button> <x-draggable
<x-draggable :list="widgets"
:list="widgets" handle=".handle"
handle=".handle" animation="150"
animation="150" class="sortable"
class="sortable" @sort="onWidgetSort"
@sort="onWidgetSort" >
> <div v-for="widget in widgets" class="customize-container _panel" :key="widget.id">
<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id"> <header>
<header> <span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
<span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button> </header>
</header> <div @click="widgetFunc(widget.id)">
<div @click="widgetFunc(widget.id)"> <component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
</div>
</div> </div>
</x-draggable> </div>
</template> </x-draggable>
<template v-else>
<component class="_widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
</template>
</template> </template>
</div> <template v-else>
<component class="_widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
</template>
</template>
</div> </div>
</div> </div>
@ -575,7 +573,7 @@ export default Vue.extend({
$ui-font-size: 1em; $ui-font-size: 1em;
$nav-icon-only-threshold: 1279px; $nav-icon-only-threshold: 1279px;
$nav-hide-threshold: 650px; $nav-hide-threshold: 650px;
$side-hide-threshold: 1070px; $side-hide-threshold: 1090px;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
@ -965,57 +963,53 @@ export default Vue.extend({
} }
> .widgets { > .widgets {
box-sizing: border-box; position: sticky;
top: $header-height;
height: calc(100vh - #{$header-height});
padding: 0 var(--margin);
overflow: auto;
box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
@media (max-width: $side-hide-threshold) { @media (max-width: $side-hide-threshold) {
display: none; display: none;
} }
> div { > * {
position: sticky; margin: var(--margin) 0;
top: $header-height; width: 300px;
height: calc(100vh - #{$header-height}); }
padding: 0 var(--margin);
overflow: auto;
box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
> * { > .add {
margin: var(--margin) 0; margin: 0 auto;
width: 300px; }
}
> .add { .customize-container {
margin: 0 auto; margin: 8px 0;
} background: #fff;
.customize-container { > header {
margin: 8px 0; position: relative;
background: #fff; line-height: 32px;
> header { > .handle {
position: relative; padding: 0 8px;
line-height: 32px; cursor: move;
> .handle {
padding: 0 8px;
cursor: move;
}
> .remove {
position: absolute;
top: 0;
right: 0;
padding: 0 8px;
line-height: 32px;
}
} }
> div { > .remove {
padding: 8px; position: absolute;
top: 0;
right: 0;
padding: 0 8px;
line-height: 32px;
}
}
> * { > div {
pointer-events: none; padding: 8px;
}
> * {
pointer-events: none;
} }
} }
} }