Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve usability

Browse source
This commit is contained in:
syuilo 2018-06-12 08:58:50 +09:00
parent 1af50fd7b8
commit cea44834bb
1 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
View file

@ -5,7 +5,7 @@
<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq"> <div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
<template v-if="edit"> <template v-if="edit">
<header> <header>
<select v-model="widgetAdderSelected"> <select v-model="widgetAdderSelected" @change="addWidget">
<option value="profile">%i18n:common.widgets.profile%</option> <option value="profile">%i18n:common.widgets.profile%</option>
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option> <option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
<option value="calendar">%i18n:common.widgets.calendar%</option> <option value="calendar">%i18n:common.widgets.calendar%</option>
@ -30,21 +30,16 @@
<option value="nav">%i18n:common.widgets.nav%</option> <option value="nav">%i18n:common.widgets.nav%</option>
<option value="tips">%i18n:common.widgets.tips%</option> <option value="tips">%i18n:common.widgets.tips%</option>
</select> </select>
<button @click="addWidget">%i18n:@add%</button>
</header> </header>
<x-draggable <x-draggable
:list="column.widgets" :list="column.widgets"
:options="{ handle: '.handle', animation: 150 }" :options="{ animation: 150 }"
@sort="onWidgetSort" @sort="onWidgetSort"
> >
<div v-for="widget in column.widgets" class="customize-container" :key="widget.id"> <div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
<header> <button class="remove" @click="removeWidget(widget)">%fa:times%</button>
<span class="handle">%fa:bars%</span>{{ widget.name }}<button class="remove" @click="removeWidget(widget)">%fa:times%</button>
</header>
<div @click="widgetFunc(widget.id)">
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/> <component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
</div> </div>
</div>
</x-draggable> </x-draggable>
</template> </template>
<template v-else> <template v-else>
@ -142,6 +137,13 @@ export default Vue.extend({
root(isDark) root(isDark)
.gqpwvtwtprsbmnssnbicggtwqhmylhnq .gqpwvtwtprsbmnssnbicggtwqhmylhnq
> header
padding 16px
> *
width 100%
padding 4px
.widget, .customize-container .widget, .customize-container
margin 8px margin 8px
@ -149,7 +151,21 @@ root(isDark)
margin-top 0 margin-top 0
.customize-container .customize-container
background #fff cursor move
> *:not(.remove)
pointer-events none
> .remove
position absolute
z-index 1
top 8px
right 8px
width 32px
height 32px
color #fff
background rgba(#000, 0.7)
border-radius 4px
> header > header
color isDark ? #fff : #000 color isDark ? #fff : #000