Skip to content

Commit

Permalink
Client: ダイアログのUIを調整
Browse files Browse the repository at this point in the history
  • Loading branch information
nexryai committed Dec 28, 2023
1 parent 1beecf3 commit 69cf4f7
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 68 deletions.
120 changes: 73 additions & 47 deletions packages/client/src/components/MkDialog.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
<div class="mk-dialog">
<div v-if="icon" class="icon">
<i :class="icon"></i>
</div>
<div v-else-if="!select" class="icon" :class="type">
<i v-if="title==i18n.ts.currentPassword" class="ti ti-shield-lock security"></i>
<i v-else-if="input" class="ti ti-question-circle"></i>
<i v-else-if="type === 'success'" class="ti ti-check"></i>
<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="type === 'question'" class="ti ti-help"></i>
<MkLoading v-else-if="type === 'waiting'" :em="true"/>
</div>
<header v-if="title"><Mfm :text="title"/></header>
<div v-if="text" class="body"><Mfm :text="text"/></div>
<header>
<div v-if="icon" class="icon header-icon">
<i :class="icon"></i>
</div>
<div v-else-if="!select" class="icon header-icon" :class="type">
<i v-if="text==i18n.ts.currentPassword" class="ti ti-shield-lock security"></i>
<i v-else-if="input" class="ti ti-question-circle"></i>
<i v-else-if="type === 'success'" class="ti ti-check"></i>
<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="type === 'question'" class="ti ti-message-question"></i>
<MkLoading v-else-if="type === 'waiting'" :em="true"/>
</div>
<div class="header-text">
<Mfm v-if="title" class="header-title" :text="title"/>
<div v-if="text" class="body"><Mfm :text="text"/></div>
</div>
</header>

<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
</MkInput>
Expand Down Expand Up @@ -156,55 +161,76 @@ onBeforeUnmount(() => {
background: var(--panel);
border-radius: var(--radius);
> .icon {
font-size: 24px;
> header {
margin: 0 0 39px 0;
font-size: 16px;
> .security {
color: #eabb02;
& + .body {
margin-top: 8px;
}
&.info {
color: #55c4dd;
}
> .header-icon {
float: left;
&.success {
color: var(--success);
}
display: flex;
align-items: normal;
padding-right: 10px;
}
&.error {
color: var(--error);
}
> .header-text {
text-align: left;
&.warning {
color: var(--warn);
}
> .header-title {
font-weight: bold;
}
> * {
display: block;
margin: 0 auto;
}
> .body {
font-size: 14px;
text-align: center;
margin-top: 34px;
}
}
& + header {
margin-top: 16px;
}
}
> .icon {
font-size: 20px;
> header {
margin: 0 0 39px 0;
font-weight: bold;
font-size: 16px;
> .security {
color: #eabb02;
}
& + .body {
margin-top: 8px;
}
&.info {
color: #55c4dd;
}
&.success {
color: var(--success);
}
&.error {
color: var(--error);
}
&.warning {
color: var(--warn);
}
> * {
display: block;
margin: 0 auto;
}
& + header {
margin-top: 16px;
}
}
}
> .body {
margin: 16px 0 0 0;
}
> .buttons {
margin-top: 32px;
margin-top: 34px;
> * {
margin: 0 8px;
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/pages/admin/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ const menuDef = $computed(() => [{
to: "/admin/object-storage",
active: currentPage?.route.name === "object-storage",
}, {
icon: "ti ti-lock",
icon: "ti ti-shield",
text: i18n.ts.security,
to: "/admin/security",
active: currentPage?.route.name === "security",
Expand Down Expand Up @@ -192,7 +192,7 @@ const menuDef = $computed(() => [{
}, {
title: i18n.ts.info,
items: [{
icon: "ti ti-shield-lock",
icon: "ti ti-list-check",
text: i18n.ts.moderationlogs,
to: "/admin/moderation-logs",
active: currentPage?.route.name === "moderation-logs",
Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/pages/admin/moderation-logs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const pagination = {
definePageMetadata({
title: i18n.ts.moderationlogs,
icon: "ti ti-shield-lock",
icon: "ti ti-list-check",
});
</script>

Expand Down
2 changes: 1 addition & 1 deletion packages/client/src/pages/admin/security.vue
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.security,
icon: "ti ti-lock",
icon: "ti ti-shield",
});
</script>

Expand Down
3 changes: 2 additions & 1 deletion packages/client/src/pages/settings/2fa.vue
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ function registerKey() {
function unregisterKey(key) {
os.inputText({
title: i18n.ts.currentPassword,
title: "Authentication required",
text: i18n.ts.currentPassword,
type: "password",
}).then(({ canceled, result: password }) => {
if (canceled) return;
Expand Down
4 changes: 2 additions & 2 deletions packages/client/src/pages/settings/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const menuDef = computed(() => [{
to: "/settings/profile",
active: currentPage?.route.name === "profile",
}, {
icon: "ti ti-lock-open",
icon: "ti ti-fingerprint-off",
text: i18n.ts.privacy,
to: "/settings/privacy",
active: currentPage?.route.name === "privacy",
Expand Down Expand Up @@ -93,7 +93,7 @@ const menuDef = computed(() => [{
to: "/settings/email",
active: currentPage?.route.name === "email",
}, {
icon: "ti ti-lock",
icon: "ti ti-shield",
text: i18n.ts.security,
to: "/settings/security",
active: currentPage?.route.name === "security",
Expand Down
20 changes: 10 additions & 10 deletions packages/client/src/pages/settings/privacy.vue
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<template>
<div class="_formRoot">
<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
<FormSwitch v-model="isLocked" class="_formBlock" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>

<FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()">
<FormSwitch v-model="publicReactions" class="_formBlock" @update:model-value="save()">
{{ i18n.ts.makeReactionsPublic }}
<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
</FormSwitch>

<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
<template #label>{{ i18n.ts.ffVisibility }}</template>
<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
</FormSelect>

<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
{{ i18n.ts.hideOnlineStatus }}
<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
</FormSwitch>
<FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()">
<FormSwitch v-model="noCrawle" class="_formBlock" @update:model-value="save()">
{{ i18n.ts.noCrawle }}
<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
</FormSwitch>
<FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()">
<FormSwitch v-model="isExplorable" class="_formBlock" @update:model-value="save()">
{{ i18n.ts.makeExplorable }}
<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
</FormSwitch>

<FormSection>
<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
Expand All @@ -48,7 +48,7 @@
</FormFolder>
</FormSection>

<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.keepCw }}</FormSwitch>
<FormSwitch v-model="keepCw" class="_formBlock" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
</div>
</template>

Expand Down Expand Up @@ -95,6 +95,6 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.privacy,
icon: "ti ti-lock-open",
icon: "ti ti-fingerprint-off",
});
</script>
11 changes: 7 additions & 4 deletions packages/client/src/pages/settings/security.vue
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,22 @@ const pagination = {
async function change() {
const { canceled: canceled1, result: currentPassword } = await os.inputText({
title: i18n.ts.currentPassword,
title: "Authentication required",
text: i18n.ts.currentPassword,
type: "password",
});
if (canceled1) return;
const { canceled: canceled2, result: newPassword } = await os.inputText({
title: i18n.ts.newPassword,
title: "Password updater",
text: i18n.ts.newPassword,
type: "password",
});
if (canceled2) return;
const { canceled: canceled3, result: newPassword2 } = await os.inputText({
title: i18n.ts.newPasswordRetype,
title: "Password updater",
text: i18n.ts.newPasswordRetype,
type: "password",
});
if (canceled3) return;
Expand Down Expand Up @@ -111,7 +114,7 @@ const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.security,
icon: "ti ti-lock",
icon: "ti ti-shield",
});
</script>

Expand Down

0 comments on commit 69cf4f7

Please sign in to comment.