Skip to content

Commit

Permalink
Settings: Mail: View mode switcher with labels for buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
benbucksch committed Jun 30, 2024
1 parent 597bf47 commit eb0f47f
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 11 deletions.
25 changes: 19 additions & 6 deletions app/frontend/Mail/LeftPane/ViewSwitcher.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<hbox class="buttons">
<hbox class="buttons" class:large>
<Button
label={$t`Chat-like mail view`}
icon={ChatIcon}
iconOnly
iconOnly={!large}
iconSize="16px"
plain
onClick={() => switchTo('chat')}
Expand All @@ -12,7 +12,7 @@
label={$t`Vertical view`}
icon={VerticalIcon}
classes="vertical"
iconOnly
iconOnly={!large}
iconSize="16px"
plain
onClick={() => switchTo('vertical')}
Expand All @@ -21,7 +21,7 @@
<Button
label={$t`Classic 3-pane view`}
icon={ThreePaneIcon}
iconOnly
iconOnly={!large}
iconSize="16px"
plain
onClick={() => switchTo('3pane')}
Expand All @@ -38,6 +38,8 @@
import ThreePaneIcon from "lucide-svelte/icons/layout-panel-left";
import { t } from "../../../l10n/l10n";
export let large = false;
let viewSetting = getLocalStorage("mail.view", "vertical");
$: view = $viewSetting.value;
Expand All @@ -50,10 +52,21 @@
.buttons :global(button) {
padding: 4px;
}
.buttons :global(.vertical) {
.buttons.large :global(button) {
padding: 8px;
margin-right: 12px;
}
.buttons :global(.vertical .icon) {
color: transparent;
}
.buttons :global(svg) {
fill: transparent;
}
</style>
@media (max-width: 800px) {
.buttons.large {
flex-direction: column;
align-items: start;
justify-content: stretch;
}
}
</style>
6 changes: 2 additions & 4 deletions app/frontend/Settings/Global/DarkMode.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<Button
label={$t`System`}
icon={SystemIcon}
iconOnly
iconSize="16px"
plain
onClick={() => switchTo('system')}
Expand All @@ -11,7 +10,6 @@
<Button
label={$t`Light`}
icon={LightIcon}
iconOnly
iconSize="16px"
plain
onClick={() => switchTo('light')}
Expand All @@ -21,7 +19,6 @@
label={$t`Dark`}
icon={DarkIcon}
classes="vertical"
iconOnly
iconSize="16px"
plain
onClick={() => switchTo('dark')}
Expand All @@ -47,6 +44,7 @@

<style>
.buttons :global(button) {
padding: 4px;
padding: 8px;
margin-right: 12px;
}
</style>
7 changes: 6 additions & 1 deletion app/frontend/Settings/Mail/Appearance.svelte
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
<vbox class="view-switcher">
<ViewSwitcher />
<HeaderGroupBox>
<hbox slot="header">{$t`Mail app view`}</hbox>
<ViewSwitcher large={true} />
</HeaderGroupBox>
</vbox>

<script lang="ts">
import { t } from "../../../l10n/l10n";
import ViewSwitcher from "../../Mail/LeftPane/ViewSwitcher.svelte";
import HeaderGroupBox from "../../Shared/HeaderGroupBox.svelte";
</script>

<style>
Expand Down

0 comments on commit eb0f47f

Please sign in to comment.