From cea44834bbe3b492a2bb7ba4a1adba6c372c340c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 12 Jun 2018 08:58:50 +0900
Subject: [PATCH] Improve usability
---
.../views/pages/deck/deck.widgets-column.vue | 38 +++++++++++++------
1 file changed, 27 insertions(+), 11 deletions(-)
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index a41bf8c3ca..05e7f88a25 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -5,7 +5,7 @@
<div class="gqpwvtwtprsbmnssnbicggtwqhmylhnq">
<template v-if="edit">
<header>
- <select v-model="widgetAdderSelected">
+ <select v-model="widgetAdderSelected" @change="addWidget">
<option value="profile">%i18n:common.widgets.profile%</option>
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
<option value="calendar">%i18n:common.widgets.calendar%</option>
@@ -30,20 +30,15 @@
<option value="nav">%i18n:common.widgets.nav%</option>
<option value="tips">%i18n:common.widgets.tips%</option>
</select>
- <button @click="addWidget">%i18n:@add%</button>
</header>
<x-draggable
:list="column.widgets"
- :options="{ handle: '.handle', animation: 150 }"
+ :options="{ animation: 150 }"
@sort="onWidgetSort"
>
- <div v-for="widget in column.widgets" class="customize-container" :key="widget.id">
- <header>
- <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"/>
- </div>
+ <div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @contextmenu.stop.prevent="widgetFunc(widget.id)">
+ <button class="remove" @click="removeWidget(widget)">%fa:times%</button>
+ <component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
</div>
</x-draggable>
</template>
@@ -142,6 +137,13 @@ export default Vue.extend({
root(isDark)
.gqpwvtwtprsbmnssnbicggtwqhmylhnq
+ > header
+ padding 16px
+
+ > *
+ width 100%
+ padding 4px
+
.widget, .customize-container
margin 8px
@@ -149,7 +151,21 @@ root(isDark)
margin-top 0
.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
color isDark ? #fff : #000