yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-04-21 17:53:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

enhance(frontend): 壁紙をデッキ設定の一部に

Browse source
This commit is contained in:
syuilo 2025-04-01 13:18:49 +09:00
parent 5aca91251a
commit 500a5615f0
14 changed files with 50 additions and 57 deletions
packages
backend/src/server/web
boot.js
frontend-shared/themes
_dark.json5_light.json5d-astro.json5d-u0.json5l-u0.json5l-vivid.json5
frontend/src
local-storage.ts
pages/settings
deck.vuetheme.vue
preferences
def.ts
ui
deck.vue
deck
column.vue
utility/autogen
settings-search-index.ts

5
packages/backend/src/server/web/boot.js
View file

@ -127,11 +127,6 @@
document.documentElement.classList.add('useSystemFont');
}
const wallpaper = localStorage.getItem('wallpaper');
if (wallpaper) {
document.documentElement.style.backgroundImage = `url(${wallpaper})`;
}
const customCss = localStorage.getItem('customCss');
if (customCss && customCss.length > 0) {
const style = document.createElement('style');

1
packages/frontend-shared/themes/_dark.json5
View file

@ -64,7 +64,6 @@
inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
badge: '#31b1ce',
messageBg: '@bg',
success: '#86b300',

1
packages/frontend-shared/themes/_light.json5
View file

@ -64,7 +64,6 @@
inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
badge: '#31b1ce',
messageBg: '@bg',
success: '#86b300',

1
packages/frontend-shared/themes/d-astro.json5
View file

@ -47,7 +47,6 @@
fgOnWhite: '@accent',
panelHighlight: ':lighten<3<@panel',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},

1
packages/frontend-shared/themes/d-u0.json5
View file

@ -59,7 +59,6 @@
panelHighlight: ':lighten<3<@panel',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',

1
packages/frontend-shared/themes/l-u0.json5
View file

@ -61,7 +61,6 @@
panelHighlight: ':lighten<3<@panel',
scrollbarHandle: '#74747433',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',

1
packages/frontend-shared/themes/l-vivid.json5
View file

@ -49,7 +49,6 @@
htmlThemeColor: '@bg',
panelHighlight: ':darken<3<@panel',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: '@divider',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',

1
packages/frontend/src/local-storage.ts
View file

@ -17,7 +17,6 @@ export type Keys = (
'lang' |
'drafts' |
'hashtags' |
'wallpaper' |
'colorScheme' |
'useSystemFont' |
'fontSize' |

25
packages/frontend/src/pages/settings/deck.vue
View file

@ -12,6 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSwitch>
</SearchMarker>
<hr>
<SearchMarker :keywords="['ui', 'root', 'page']">
<MkPreferenceContainer k="deck.useSimpleUiForNonRootPages">
<MkSwitch v-model="useSimpleUiForNonRootPages">
@ -74,19 +76,29 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkRange>
</MkPreferenceContainer>
</SearchMarker>
<SearchMarker :keywords="['wallpaper']">
<MkPreferenceContainer k="deck.wallpaper">
<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
</MkPreferenceContainer>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkRadios from '@/components/MkRadios.vue';
import MkRange from '@/components/MkRange.vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js';
import { prefer } from '@/preferences.js';
import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
import { reloadAsk } from '@/utility/reload-ask.js';
import { selectFile } from '@/utility/select-file.js';
const navWindow = prefer.model('deck.navWindow');
const useSimpleUiForNonRootPages = prefer.model('deck.useSimpleUiForNonRootPages');
@ -95,6 +107,17 @@ const columnAlign = prefer.model('deck.columnAlign');
const columnGap = prefer.model('deck.columnGap');
const menuPosition = prefer.model('deck.menuPosition');
const navbarPosition = prefer.model('deck.navbarPosition');
const wallpaper = prefer.model('deck.wallpaper');
watch(wallpaper, async () => {
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
function setWallpaper(ev: MouseEvent) {
selectFile(ev.currentTarget ?? ev.target, null).then(file => {
wallpaper.value = file.url;
});
}
const profilesSyncEnabled = ref(prefer.isSyncEnabled('deck.profiles'));

24
packages/frontend/src/pages/settings/theme.vue
View file

@ -189,17 +189,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
</div>
</FormSection>
<SearchMarker :keywords="['wallpaper']">
<MkButton v-if="wallpaper == null" @click="setWallpaper"><SearchLabel>{{ i18n.ts.setWallpaper }}</SearchLabel></MkButton>
<MkButton v-else @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</MkButton>
</SearchMarker>
</div>
</SearchMarker>
</template>
<script lang="ts" setup>
import { computed, onActivated, ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import JSON5 from 'json5';
import defaultLightTheme from '@@/themes/l-light.json5';
import defaultDarkTheme from '@@/themes/d-green-lime.json5';
@ -207,7 +202,6 @@ import type { Theme } from '@/theme.js';
import MkSwitch from '@/components/MkSwitch.vue';
import FormSection from '@/components/form/section.vue';
import FormLink from '@/components/form/link.vue';
import MkButton from '@/components/MkButton.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkThemePreview from '@/components/MkThemePreview.vue';
import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
@ -262,7 +256,6 @@ const lightThemeId = computed({
const darkMode = computed(store.makeGetterSetter('darkMode'));
const syncDeviceDarkMode = prefer.model('syncDeviceDarkMode');
const wallpaper = ref(miLocalStorage.getItem('wallpaper'));
const themesCount = installedThemes.value.length;
watch(syncDeviceDarkMode, () => {
@ -271,21 +264,6 @@ watch(syncDeviceDarkMode, () => {
}
});
watch(wallpaper, async () => {
if (wallpaper.value == null) {
miLocalStorage.removeItem('wallpaper');
} else {
miLocalStorage.setItem('wallpaper', wallpaper.value);
}
await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
});
function setWallpaper(event) {
selectFile(event.currentTarget ?? event.target, null).then(file => {
wallpaper.value = file.url;
});
}
const headerActions = computed(() => []);
const headerTabs = computed(() => []);

3
packages/frontend/src/preferences/def.ts
View file

@ -382,6 +382,9 @@ export const PREF_DEF = {
'deck.navbarPosition': {
default: 'left' as 'left' | 'top' | 'bottom',
},
'deck.wallpaper': {
default: null as string | null,
},
'chat.showSenderName': {
default: false,

15
packages/frontend/src/ui/deck.vue
View file

@ -112,13 +112,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, useTemplateRef, watch } from 'vue';
import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
import { v4 as uuid } from 'uuid';
import XCommon from './_common_/common.vue';
import XSidebar from '@/ui/_common_/navbar.vue';
import XNavbarH from '@/ui/_common_/navbar-h.vue';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import MkButton from '@/components/MkButton.vue';
import * as os from '@/os.js';
import { navbarItemDef } from '@/navbar.js';
import { $i } from '@/i.js';
@ -137,7 +136,6 @@ import XDirectColumn from '@/ui/deck/direct-column.vue';
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
import { mainRouter } from '@/router.js';
import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
import { miLocalStorage } from '@/local-storage.js';
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
@ -171,7 +169,7 @@ window.addEventListener('resize', () => {
});
const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
const withWallpaper = prefer.s['deck.wallpaper'] != null;
const drawerMenuShowing = ref(false);
const gap = prefer.r['deck.columnGap'];
@ -227,9 +225,6 @@ function onWheel(ev: WheelEvent) {
}
}
window.document.documentElement.style.overflowY = 'hidden';
window.document.documentElement.style.scrollBehavior = 'auto';
async function deleteProfile() {
if (prefer.s['deck.profile'] == null) return;
@ -244,6 +239,12 @@ async function deleteProfile() {
os.success();
}
window.document.documentElement.style.overflowY = 'hidden';
window.document.documentElement.style.scrollBehavior = 'auto';
if (prefer.s['deck.wallpaper'] != null) {
window.document.documentElement.style.backgroundImage = `url(${prefer.s['deck.wallpaper']})`;
}
</script>
<style lang="scss" module>

4
packages/frontend/src/ui/deck/column.vue
View file

@ -48,13 +48,13 @@ import type { MenuItem } from '@/types/menu.js';
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { miLocalStorage } from '@/local-storage.js';
import { prefer } from '@/preferences.js';
provide('shouldHeaderThin', true);
provide('shouldOmitHeaderTitle', true);
provide('forceSpacerMin', true);
const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
const withWallpaper = prefer.s['deck.wallpaper'] != null;
const props = withDefaults(defineProps<{
column: Column;

24
packages/frontend/src/utility/autogen/settings-search-index.ts
View file

@ -37,11 +37,6 @@ export const searchIndexes: SearchIndexItem[] = [
label: i18n.ts.themeForDarkMode,
keywords: ['dark', 'theme'],
},
{
id: '8wcoRp76b',
label: i18n.ts.setWallpaper,
keywords: ['wallpaper'],
},
],
label: i18n.ts.theme,
keywords: ['theme'],
@ -861,40 +856,45 @@ export const searchIndexes: SearchIndexItem[] = [
keywords: ['sync', 'profiles', 'devices'],
},
{
id: 'iEF0gqNAo',
id: 'wWH4pxMQN',
label: i18n.ts._deck.useSimpleUiForNonRootPages,
keywords: ['ui', 'root', 'page'],
},
{
id: 'BNdSeWxZn',
id: '3LR509BvD',
label: i18n.ts.defaultNavigationBehaviour,
keywords: ['default', 'navigation', 'behaviour', 'window'],
},
{
id: 'zT9pGm8DF',
id: 'ybU8RLXgm',
label: i18n.ts._deck.alwaysShowMainColumn,
keywords: ['always', 'show', 'main', 'column'],
},
{
id: '5dk2xv1vc',
id: 'xRasZyAVl',
label: i18n.ts._deck.columnAlign,
keywords: ['column', 'align'],
},
{
id: 'gtdEA4FTa',
id: '6qcyPd0oJ',
label: i18n.ts._deck.deckMenuPosition,
keywords: ['menu', 'position'],
},
{
id: 'DHVFdPBT6',
id: '4zk2Now4S',
label: i18n.ts._deck.navbarPosition,
keywords: ['navbar', 'position'],
},
{
id: '3UQ8rUssZ',
id: 'CGNtJ2I3n',
label: i18n.ts._deck.columnGap,
keywords: ['column', 'gap', 'margin'],
},
{
id: 'rxPDMo7bE',
label: i18n.ts.setWallpaper,
keywords: ['wallpaper'],
},
],
label: i18n.ts.deck,
keywords: ['deck', 'ui'],