worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: Improved the way widgets are repositioned

Browse source
This commit is contained in:
NoriDev 2022-09-13 17:03:07 +09:00
parent aa024a585f
commit 1d5434d5f8
2 changed files with 43 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG_CHERRYPICK.md
View file

@ -28,6 +28,7 @@
- 클라이언트: 새 노트 알림에 '노트 수 표시' 및 '알림 표시하지 않음' 옵션 추가
- 클라이언트: 모바일 환경에서 로그인 페이지 디자인 개선
- 클라이언트: 타임라인 전환시 맨 위로 이동하도록 변경
- 클라이언트: 위젯 위치 변경 방식 개선
### Bugfixes
- 클라이언트: 채팅방에서 메시지를 입력하고 있을 때 움직이지 않는 온점(.)이 표시되는 문제

65
packages/client/src/components/MkWidgets.vue
View file

@ -6,20 +6,27 @@
<template #label>{{ i18n.ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
</MkSelect>
<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
<MkButton primary class="mk-widget-add btn" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkButton class="btn" @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header>
<XDraggable
v-model="widgets_"
item-key="id"
handle=".handle"
animation="150"
class="sortable"
>
<template #item="{element}">
<div class="customize-container">
<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
<div class="handle">
<div class="customize-container _panel">
<header>
<span class="handle"><i class="fas fa-bars"/></span>
<div style="position: absolute; top: 0; left: 35px; font-size: 14px; font-weight: bold; line-height: 32.5px;">
{{ $t('_widgets.' + element.name) }}
</div>
<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
</header>
<div @click="configWidget(element.id)">
<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
</div>
</div>
@ -122,6 +129,11 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
width: 100%;
padding: 4px;
}
> .btn {
margin: 5px 0;
padding: 6px;
}
}
> .widget, .customize-container {
@ -135,26 +147,33 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
.customize-container {
position: relative;
cursor: move;
// cursor: move;
> .config,
> .remove {
position: absolute;
z-index: 10000;
top: 8px;
width: 32px;
height: 32px;
color: #fff;
background: rgba(#000, 0.7);
border-radius: 4px;
}
> header {
position: relative;
line-height: 25px;
> .config {
right: 8px + 8px + 32px;
}
> .handle {
padding: 0 10px;
cursor: move;
line-height: 32px;
}
> .remove {
right: 8px;
> .config,
> .remove {
position: absolute;
top: 0;
padding: 0 8px;
line-height: 32px;
}
> .config {
right: 30px;
}
> .remove {
right: 5px;
}
}
> .handle {