1
0

Merge branch 'main' into feat/totally-hide-strict-filters

This commit is contained in:
Ayo 2023-01-21 23:19:44 +01:00
commit d3a567ddb8
16 changed files with 157 additions and 79 deletions

View File

@ -5,6 +5,9 @@ defineProps<{
/** Show the back button on both small and big screens */
back?: boolean
}>()
const route = useRoute()
const wideLayout = computed(() => route.meta.wideLayout ?? false)
</script>
<template>
@ -13,9 +16,10 @@ defineProps<{
sticky top-0 z10 backdrop-blur
pt="[env(safe-area-inset-top,0)]"
border="b base" bg="[rgba(var(--rbg-bg-base),0.7)]"
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
>
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region>
<div flex gap-3 items-center overflow-hidden py2>
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" data-tauri-drag-region class="native:xl:flex">
<div flex gap-3 items-center overflow-hidden py2 class="native-mac:pl-14 native-mac:sm:pl-0">
<NuxtLink
v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
:aria-label="$t('nav.back')"
@ -38,6 +42,8 @@ defineProps<{
<slot name="header" />
</div>
<div :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 />
<div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
<slot />
</div>
</div>
</template>

View File

@ -29,9 +29,9 @@
<style scoped>
svg path.wood {
fill: var(--c-text-secondary);
fill: var(--c-primary);
}
svg path.body {
fill: var(--c-text-base);
fill: var(--c-text-secondary);
}
</style>

View File

@ -23,8 +23,8 @@ router.afterEach(() => {
external
>
<NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
<div hidden xl:block>
{{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
<div hidden xl:block text-secondary>
{{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
</div>
</NuxtLink>
<div

View File

@ -30,9 +30,8 @@ const toggleApply = () => {
<div
v-if="removable"
:aria-label="$t('attachment.remove_label')"
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
:class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
mix-blend-difference
class="bg-black/75 hover:bg-red/75"
text-white px2 py2 rounded-full cursor-pointer
@click="$emit('remove')"
>
<div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />

View File

@ -95,12 +95,12 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
<template v-if="status.inReplyToAccountId">
<StatusReplyingTo
v-if="showReplyTo"
ml-6 pt-1 pl-5
ml-20px pt-1 pl-5
:status="status"
:is-self-reply="isSelfReply"
:class="faded ? 'text-secondary-light' : ''"
/>
<div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
<div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="77px" z--1>
<template v-if="showReplyTo">
<div w="1px" h="0.5" border="x base" mt-3 />
<div w="1px" h="0.5" border="x base" />

View File

@ -10,6 +10,9 @@ const {
translation,
enabled: isTranslationEnabled,
} = useTranslation(status, getLanguageCode())
const preferenceHideTranslation = usePreferences('hideTranslation')
const showButton = computed(() => !preferenceHideTranslation.value && isTranslationEnabled && status.language !== getLanguageCode())
let translating = $ref(false)
const toggleTranslation = async () => {
@ -26,7 +29,7 @@ const toggleTranslation = async () => {
<template>
<div>
<button
v-if="isTranslationEnabled && status.language !== getLanguageCode()" p-0 flex="~ center" gap-2 text-sm
v-if="showButton" p-0 flex="~ center" gap-2 text-sm
:disabled="translating" disabled-bg-transparent btn-text class="disabled-text-$c-text-btn-disabled-deeper" @click="toggleTranslation"
>
<span v-if="translating" block animate-spin preserve-3d>

View File

@ -7,6 +7,7 @@ export interface PreferencesSettings {
hideBoostCount: boolean
hideFavoriteCount: boolean
hideFollowerCount: boolean
hideTranslation: boolean
grayscaleMode: boolean
enableAutoplay: boolean
experimentalVirtualScroller: boolean
@ -58,6 +59,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
hideBoostCount: false,
hideFavoriteCount: false,
hideFollowerCount: false,
hideTranslation: false,
grayscaleMode: false,
enableAutoplay: true,
experimentalVirtualScroller: true,

View File

@ -16,11 +16,11 @@ const isGrayscale = usePreferences('grayscaleMode')
<template>
<div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
<main flex w-full mxa lg:max-w-80rem>
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<main flex w-full mxa lg:max-w-80rem class="native:grid native:sm:grid-cols-[auto_1fr] native:lg:grid-cols-[auto_minmax(600px,2fr)_1fr]">
<aside class="hidden native:w-auto sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
<slot name="left">
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full mt-5>
<div flex="~ col" overflow-y-auto justify-between h-full max-w-full pt-5 native:pt-7 overflow-x-hidden>
<NavTitle />
<NavSide command />
<div flex-auto />
@ -50,7 +50,7 @@ const isGrayscale = usePreferences('grayscaleMode')
</slot>
</div>
</aside>
<div w-full min-h-screen :class="isHydrated && wideLayout ? 'xl:w-full sm:w-600px' : 'sm:w-600px md:shrink-0'" border-base>
<div w-full min-h-screen border-base>
<div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
<slot />
</div>
@ -59,7 +59,7 @@ const isGrayscale = usePreferences('grayscaleMode')
<NavBottom v-if="isHydrated" sm:hidden />
</div>
</div>
<aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
<aside v-if="isHydrated && !wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide native:lg:w-full">
<div sticky top-0 h-screen flex="~ col" gap-2 py3 ms-2>
<slot name="right">
<div flex-auto />

View File

@ -335,6 +335,7 @@
"hide_boost_count": "Boost-Zähler ausblenden",
"hide_favorite_count": "Favoritenzahl ausblenden",
"hide_follower_count": "Anzahl der Follower ausblenden",
"hide_translation": "Übersetzungen ausblenden",
"label": "Einstellungen",
"title": "Experimentelle Funktionen",
"user_picker": "Benutzerauswahl",

View File

@ -372,6 +372,7 @@
"hide_boost_count": "Hide boost count",
"hide_favorite_count": "Hide favorite count",
"hide_follower_count": "Hide follower count",
"hide_translation": "Hide translation",
"label": "Preferences",
"title": "Experimental Features",
"user_picker": "User Picker",

View File

@ -28,6 +28,8 @@
"muted_users": "ミュートしたユーザー",
"muting": "ミュート済み",
"mutuals": "相互フォロー",
"notifications_on_post_disable": "{username}さんが投稿したときの通知を停止する",
"notifications_on_post_enable": "{username}さんが投稿したときに通知する",
"pinned": "固定した投稿",
"posts": "投稿",
"posts_count": "{0} 投稿",
@ -46,6 +48,7 @@
"boost": "ブースト",
"boost_count": "{0}",
"boosted": "ブースト済み",
"clear_publish_failed": "投稿エラーをクリア",
"clear_upload_failed": "ファイルアップロードエラーをクリア",
"close": "閉じる",
"compose": "投稿",
@ -88,11 +91,6 @@
"toggle_zen_mode": "禅モードを切り替える"
},
"common": {
"confirm_dialog": {
"cancel": "いいえ",
"confirm": "はい",
"title": "本当にいいですか?"
},
"end_of_list": "リストの最後です",
"error": "ERROR",
"in": "in",
@ -103,9 +101,52 @@
"draft_title": "下書き {0}",
"drafts": "下書き ({v})"
},
"confirm": {
"block_account": {
"cancel": "キャンセル",
"confirm": "ブロック",
"title": "{0}さんを本当にミュートしたいですか?"
},
"block_domain": {
"cancel": "キャンセル",
"confirm": "ブロック",
"title": "{0}さんを本当にブロックしたいですか?"
},
"common": {
"cancel": "いいえ",
"confirm": "はい"
},
"delete_posts": {
"cancel": "キャンセル",
"confirm": "削除",
"title": "この投稿を本当に削除したいですか?"
},
"mute_account": {
"cancel": "キャンセル",
"confirm": "ミュート",
"title": "{0}さんを本当にミュートしたいですか?"
},
"show_reblogs": {
"cancel": "キャンセル",
"confirm": "表示",
"title": "{0}さんのブーストを本当に表示したいですか?"
},
"unfollow": {
"cancel": "キャンセル",
"confirm": "フォロー解除",
"title": "本当にフォロー解除したいですか?"
}
},
"conversation": {
"with": "with"
},
"custom_cards": {
"stackblitz": {
"lines": "Lines {0}",
"open": "Open",
"snippet_from": "Snippet from {0}"
}
},
"error": {
"account_not_found": "アカウント {0} が見つかりません",
"explore-list-empty": "現在トレンドには何もありません。あとで確認してください!",
@ -115,6 +156,12 @@
"unsupported_file_format": "対応していないファイル形式です"
},
"help": {
"build_preview": {
"desc1": "あなたは現在、コミュニティから提供されたプレビュー版のElkを表示しています - {0}。",
"desc2": "まだレビューされていない変更や、害がある変更が含まれている可能性もあります。",
"desc3": "実際のアカウントでは決してログインしないでください。",
"title": "プレビューデプロイ"
},
"desc_highlight": "いくつかのバグや足りない機能がいろいろなところにあることが期待されています。",
"desc_para1": "開発中のMastodonウェブクライアントのElkに興味を持って試してくれてありがとうございます",
"desc_para2": "私たちは時間をかけて開発と改善に努めています。",
@ -131,13 +178,9 @@
"block_account": "{0}さんをブロック",
"block_domain": "{0}をドメインブロック",
"copy_link_to_post": "この投稿へのリンクをコピー",
"copy_original_link_to_post": "この投稿へのオリジナルのリンクをコピー",
"delete": "削除",
"delete_and_redraft": "削除して下書きに戻す",
"delete_confirm": {
"cancel": "キャンセル",
"confirm": "削除",
"title": "この投稿を本当に削除したいですか?"
},
"direct_message_account": "{0}さんにダイレクトメッセージ",
"edit": "編集",
"hide_reblogs": "{0} からのブーストを隠す",
@ -166,7 +209,7 @@
"blocked_domains": "ブロックしたドメイン",
"blocked_users": "ブロックしたユーザー",
"bookmarks": "ブックマーク",
"built_at": "{0}にビルド",
"built_at": "ビルド {0}",
"compose": "投稿",
"conversations": "会話",
"explore": "話題の投稿",
@ -210,9 +253,9 @@
"update_available_short": "Elkをアップデート",
"webmanifest": {
"canary": {
"description": "軽快なMastodonウェブクライアント (カナリー版)",
"name": "Elk (カナリー版)",
"short_name": "Elk (カナリー版)"
"description": "軽快なMastodonウェブクライアント (canary)",
"name": "Elk (canary)",
"short_name": "Elk (canary)"
},
"dev": {
"description": "軽快なMastodonウェブクライアント (dev)",
@ -220,9 +263,9 @@
"short_name": "Elk (dev)"
},
"preview": {
"description": "軽快なMastodonウェブクライアント (プレビュー版)",
"name": "Elk (プレビュー版)",
"short_name": "Elk (プレビュー版)"
"description": "軽快なMastodonウェブクライアント (preview)",
"name": "Elk (preview)",
"short_name": "Elk (preview)"
},
"release": {
"description": "軽快なMastodonウェブクライアント",
@ -251,12 +294,6 @@
"description": "Mastodon UIでアカウントの設定を編集します",
"label": "アカウント設定"
},
"feature_flags": {
"github_cards": "GitHubカード",
"title": "実験的機能",
"user_picker": "ユーザーピッカー",
"virtual_scroll": "仮想スクロール"
},
"interface": {
"color_mode": "カラーモード",
"dark_mode": "ダークモード",
@ -271,7 +308,8 @@
"xl": "極大",
"xs": "極小"
},
"system_mode": "システム"
"system_mode": "システム",
"theme_color": "テーマカラー"
},
"language": {
"display_language": "表示言語",
@ -328,7 +366,16 @@
},
"notifications_settings": "通知",
"preferences": {
"label": "環境設定"
"enable_autoplay": "自動再生を有効化",
"github_cards": "GitHubカード",
"grayscale_mode": "グレースケールモード",
"hide_boost_count": "ブーストの数を隠す",
"hide_favorite_count": "お気に入りの数を隠す",
"hide_follower_count": "フォロワーの数を隠す",
"label": "環境設定",
"title": "実験的機能",
"user_picker": "ユーザーピッカー",
"virtual_scroll": "仮想スクロール"
},
"profile": {
"appearance": {
@ -351,14 +398,6 @@
"export": "ユーザートークンのエクスポート",
"import": "ユーザートークンのインポート",
"label": "ログインユーザー"
},
"wellness": {
"feature": {
"hide_boost_count": "ブーストの数を隠す",
"hide_favorite_count": "お気に入りの数を隠す",
"hide_follower_count": "フォロワーの数を隠す"
},
"label": "ウェルネス"
}
},
"share-target": {
@ -372,6 +411,7 @@
"edited": "(編集済み)",
"editing": "編集中",
"loading": "読込中...",
"publish_failed": "投稿に失敗しました",
"publishing": "投稿中",
"upload_failed": "アップロードに失敗しました",
"uploading": "更新中..."

View File

@ -48,6 +48,9 @@ export default defineNuxtConfig({
'~/styles/default-theme.css',
'~/styles/vars.css',
'~/styles/global.css',
...process.env.TAURI_PLATFORM === 'macos'
? []
: ['~/styles/scrollbars.css'],
'~/styles/tiptap.css',
'~/styles/dropdown.css',
],

View File

@ -33,6 +33,12 @@ const userSettings = useUserSettings()
>
{{ $t('settings.preferences.hide_follower_count') }}
</SettingsToggleItem>
<SettingsToggleItem
:checked="getPreferences(userSettings, 'hideTranslation')"
@click="togglePreferences('hideTranslation')"
>
{{ $t('settings.preferences.hide_translation') }}
</SettingsToggleItem>
<SettingsToggleItem
:checked="getPreferences(userSettings, 'grayscaleMode')"
@click="togglePreferences('grayscaleMode')"

View File

@ -12,32 +12,6 @@ html {
src: url(/fonts/homemade-apple-v18.ttf) format('truetype');
}
* {
scrollbar-color: #8885 var(--c-border);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--c-border);
border-radius: 1px;
}
::-webkit-scrollbar-thumb {
background: #8885;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: #8886;
}
::-moz-selection {
background: var(--c-bg-selection);
}

25
styles/scrollbars.css Normal file
View File

@ -0,0 +1,25 @@
* {
scrollbar-color: #8885 var(--c-border);
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--c-border);
border-radius: 1px;
}
::-webkit-scrollbar-thumb {
background: #8885;
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background: #8886;
}

View File

@ -100,6 +100,24 @@ export default defineConfig({
},
},
},
variants: [
(matcher) => {
if (!process.env.TAURI_PLATFORM || !matcher.startsWith('native:'))
return matcher
return {
matcher: matcher.slice(7),
layer: 'native',
}
},
(matcher) => {
if (process.env.TAURI_PLATFORM !== 'macos' || !matcher.startsWith('native-mac:'))
return matcher
return {
matcher: matcher.slice(11),
layer: 'native-mac',
}
},
],
rules: [
// scrollbar-hide
[/^scrollbar-hide$/, (_, { constructCSS }) => {