mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-26 07:55:14 +00:00
Improve usability
This commit is contained in:
parent
1af50fd7b8
commit
cea44834bb
1 changed files with 27 additions and 11 deletions
|
@ -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,20 +30,15 @@
|
||||||
<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>
|
<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" platform="deck"/>
|
||||||
</header>
|
|
||||||
<div @click="widgetFunc(widget.id)">
|
|
||||||
<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>
|
||||||
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue