From 1d5434d5f80df71d852310b9e85204e3b198b124 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 13 Sep 2022 17:03:07 +0900
Subject: [PATCH] feat: Improved the way widgets are repositioned

---
 CHANGELOG_CHERRYPICK.md                      |  1 +
 packages/client/src/components/MkWidgets.vue | 65 +++++++++++++-------
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 987e585e4e..f99d1d7584 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -28,6 +28,7 @@
 - 클라이언트: 새 노트 알림에 '노트 수 표시' 및 '알림 표시하지 않음' 옵션 추가
 - 클라이언트: 모바일 환경에서 로그인 페이지 디자인 개선
 - 클라이언트: 타임라인 전환시 맨 위로 이동하도록 변경
+- 클라이언트: 위젯 위치 변경 방식 개선
 
 ### Bugfixes
 - 클라이언트: 채팅방에서 메시지를 입력하고 있을 때 움직이지 않는 온점(.)이 표시되는 문제
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index fcb0d11af4..ed9f20e81c 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -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 {