langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1202 from hgiesel/nowrapdeckoptionstoolbar

Browse Source 
Uniformly use properties to Button{Toolbar,Group} for setting button properties
This commit is contained in:
Damien Elmes 2021-05-29 10:39:11 +10:00 committed by GitHub
commit bb2026f3f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 112 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ts/components/ButtonDropdown.svelte
View File

@ -6,7 +6,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { setContext } from "svelte"; import { setContext } from "svelte";
import { dropdownKey } from "./contextKeys"; import { dropdownKey } from "./contextKeys";
import WithTheming from "./WithTheming.svelte";
import ButtonToolbar from "./ButtonToolbar.svelte"; import ButtonToolbar from "./ButtonToolbar.svelte";
export let id: string; export let id: string;
@ -18,22 +17,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setContext(dropdownKey, null); setContext(dropdownKey, null);
</script> </script>
<WithTheming style="--toolbar-wrap: nowrap; "> <ButtonToolbar
<ButtonToolbar {id}
{id} class={`dropdown-menu btn-dropdown-menu ${className}`}
class={`dropdown-menu btn-dropdown-menu ${className}`} wrap={false}
nowrap={true} {api}
{api} >
> <slot />
<slot /> </ButtonToolbar>
</ButtonToolbar>
</WithTheming>
<style lang="scss"> <style lang="scss">
:global(.dropdown-menu.btn-dropdown-menu) { :global(.dropdown-menu.btn-dropdown-menu) {
display: none; display: none;
min-width: 0; min-width: 0;
padding: calc(var(--toolbar-size) / 10) 0; padding: calc(var(--buttons-size) / 10) 0;
background-color: var(--window-bg); background-color: var(--window-bg);
border-color: var(--medium-border); border-color: var(--medium-border);

18
ts/components/ButtonGroup.svelte
View File

@ -18,6 +18,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = ""; let className: string = "";
export { className as class }; export { className as class };
export let size: number | undefined = undefined;
export let wrap: boolean | undefined = undefined;
$: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
let buttonWrap: string;
$: if (wrap === undefined) {
buttonWrap = "";
} else {
buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
}
$: style = buttonSize + buttonWrap;
function makeRegistration(): ButtonRegistration { function makeRegistration(): ButtonRegistration {
const detach = writable(false); const detach = writable(false);
const position = writable(ButtonPosition.Standalone); const position = writable(ButtonPosition.Standalone);
@ -77,6 +90,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:this={buttonGroupRef} bind:this={buttonGroupRef}
{id} {id}
class={`btn-group ${className}`} class={`btn-group ${className}`}
{style}
dir="ltr" dir="ltr"
role="group" role="group"
> >
@ -90,8 +104,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
div { div {
flex-wrap: var(--toolbar-wrap); flex-wrap: var(--buttons-wrap);
padding: calc(var(--toolbar-size) / 10); padding: calc(var(--buttons-size) / 10);
margin: 0; margin: 0;
} }
</style> </style>

2
ts/components/ButtonGroupItem.svelte
View File

@ -20,7 +20,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let position_: ButtonPosition; let position_: ButtonPosition;
let style: string; let style: string;
const radius = "calc(var(--toolbar-size) / 7.5)"; const radius = "calc(var(--buttons-size) / 7.5)";
$: { $: {
switch (position_) { switch (position_) {

23
ts/components/ButtonToolbar.svelte
View File

@ -17,7 +17,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = ""; let className: string = "";
export { className as class }; export { className as class };
export let nowrap = false; export let size: number | undefined = undefined;
export let wrap: boolean | undefined = undefined;
$: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
let buttonWrap: string;
$: if (wrap === undefined) {
buttonWrap = "";
} else {
buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
}
$: style = buttonSize + buttonWrap;
function makeRegistration(): ButtonGroupRegistration { function makeRegistration(): ButtonGroupRegistration {
const detach = writable(false); const detach = writable(false);
@ -64,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div <div
bind:this={buttonToolbarRef} bind:this={buttonToolbarRef}
{id} {id}
class={`btn-toolbar ${className}`} class={`btn-toolbar wrap-variable ${className}`}
class:flex-nowrap={nowrap} {style}
role="toolbar" role="toolbar"
> >
<slot /> <slot />
@ -75,3 +86,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonToolbarItem> </ButtonToolbarItem>
{/each} {/each}
</div> </div>
<style lang="scss">
.wrap-variable {
flex-wrap: var(--buttons-wrap);
}
</style>

4
ts/components/ColorPicker.svelte
View File

@ -46,8 +46,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@import "ts/sass/bootstrap/variables"; @import "ts/sass/bootstrap/variables";
button { button {
width: calc(var(--toolbar-size) - 0px); width: calc(var(--buttons-size) - 0px);
height: calc(var(--toolbar-size) - 0px); height: calc(var(--buttons-size) - 0px);
padding: 4px; padding: 4px;
overflow: hidden; overflow: hidden;

2
ts/components/DropdownItem.svelte
View File

@ -40,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: calc(var(--toolbar-size) / 2.3); font-size: calc(var(--buttons-size) / 2.3);
background: none; background: none;
box-shadow: none; box-shadow: none;

4
ts/components/IconButton.svelte
View File

@ -63,8 +63,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
vertical-align: middle; vertical-align: middle;
/* constrain icon */ /* constrain icon */
width: calc(var(--toolbar-size) - 2px); width: calc(var(--buttons-size) - 2px);
height: calc(var(--toolbar-size) - 2px); height: calc(var(--buttons-size) - 2px);
& > :global(svg), & > :global(svg),
& > :global(img) { & > :global(img) {

4
ts/components/LabelButton.svelte
View File

@ -56,9 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@use "ts/sass/button_mixins" as button; @use "ts/sass/button_mixins" as button;
button { button {
padding: 0 calc(var(--toolbar-size) / 3); padding: 0 calc(var(--buttons-size) / 3);
width: auto; width: auto;
height: var(--toolbar-size); height: var(--buttons-size);
@include button.btn-border-radius; @include button.btn-border-radius;
} }

4
ts/components/SelectButton.svelte
View File

@ -45,7 +45,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@use "ts/sass/button_mixins" as button; @use "ts/sass/button_mixins" as button;
select { select {
height: var(--toolbar-size); height: var(--buttons-size);
/* Long option name can create overflow */
overflow-x: hidden;
} }
@include button.btn-day($with-hover: false); @include button.btn-day($with-hover: false);

2
ts/components/WithLabel.svelte
View File

@ -22,6 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss"> <style lang="scss">
label { label {
display: flex; display: flex;
padding: 0 calc(var(--toolbar-size) / 10); padding: 0 calc(var(--buttons-size) / 10);
} }
</style> </style>

55
ts/deckoptions/ConfigSelector.svelte
View File

@ -11,7 +11,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import TextInputModal from "./TextInputModal.svelte"; import TextInputModal from "./TextInputModal.svelte";
import StickyBar from "components/StickyBar.svelte"; import StickyBar from "components/StickyBar.svelte";
import WithTheming from "components/WithTheming.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte"; import ButtonToolbar from "components/ButtonToolbar.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte"; import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
import ButtonGroup from "components/ButtonGroup.svelte"; import ButtonGroup from "components/ButtonGroup.svelte";
@ -89,33 +88,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/> />
<StickyBar> <StickyBar>
<WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap"> <ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
<ButtonToolbar class="justify-content-between"> <ButtonToolbarItem>
<ButtonToolbarItem> <ButtonGroup class="flex-grow-1">
<ButtonGroup class="flex-grow-1"> <ButtonGroupItem>
<ButtonGroupItem> <SelectButton class="flex-grow-1" on:change={blur}>
<SelectButton class="flex-grow-1" on:change={blur}> {#each $configList as entry}
{#each $configList as entry} <SelectOption
<SelectOption value={String(entry.idx)}
value={String(entry.idx)} selected={entry.current}
selected={entry.current} >
> {configLabel(entry)}
{configLabel(entry)} </SelectOption>
</SelectOption> {/each}
{/each} </SelectButton>
</SelectButton> </ButtonGroupItem>
</ButtonGroupItem> </ButtonGroup>
</ButtonGroup> </ButtonToolbarItem>
</ButtonToolbarItem>
<ButtonToolbarItem> <ButtonToolbarItem>
<SaveButton <SaveButton
{state} {state}
on:add={promptToAdd} on:add={promptToAdd}
on:clone={promptToClone} on:clone={promptToClone}
on:rename={promptToRename} on:rename={promptToRename}
/> />
</ButtonToolbarItem> </ButtonToolbarItem>
</ButtonToolbar> </ButtonToolbar>
</WithTheming>
</StickyBar> </StickyBar>

49
ts/editor/EditorToolbar.svelte
View File

@ -30,7 +30,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<script lang="typescript"> <script lang="typescript">
import WithTheming from "components/WithTheming.svelte";
import StickyBar from "components/StickyBar.svelte"; import StickyBar from "components/StickyBar.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte"; import ButtonToolbar from "components/ButtonToolbar.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.svelte"; import ButtonToolbarItem from "components/ButtonToolbarItem.svelte";
@ -48,36 +47,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const colorButtons = {}; export const colorButtons = {};
export const templateButtons = {}; export const templateButtons = {};
export let size: number = 2; export let size = 2;
export let wraps: boolean = true; export let wrap = true;
$: style = `--toolbar-size: ${size}rem; --toolbar-wrap: ${
wraps ? "wrap" : "nowrap"
}`;
</script> </script>
<WithTheming {style}> <StickyBar>
<StickyBar> <ButtonToolbar {size} {wrap} api={toolbar}>
<ButtonToolbar api={toolbar}> <ButtonToolbarItem id="notetype">
<ButtonToolbarItem id="notetype"> <NoteTypeButtons api={notetypeButtons} />
<NoteTypeButtons api={notetypeButtons} /> </ButtonToolbarItem>
</ButtonToolbarItem>
<ButtonToolbarItem id="inlineFormatting"> <ButtonToolbarItem id="inlineFormatting">
<FormatInlineButtons api={formatInlineButtons} /> <FormatInlineButtons api={formatInlineButtons} />
</ButtonToolbarItem> </ButtonToolbarItem>
<ButtonToolbarItem id="blockFormatting"> <ButtonToolbarItem id="blockFormatting">
<FormatBlockButtons api={formatBlockButtons} /> <FormatBlockButtons api={formatBlockButtons} />
</ButtonToolbarItem> </ButtonToolbarItem>
<ButtonToolbarItem id="color"> <ButtonToolbarItem id="color">
<ColorButtons api={colorButtons} /> <ColorButtons api={colorButtons} />
</ButtonToolbarItem> </ButtonToolbarItem>
<ButtonToolbarItem id="template"> <ButtonToolbarItem id="template">
<TemplateButtons api={templateButtons} /> <TemplateButtons api={templateButtons} />
</ButtonToolbarItem> </ButtonToolbarItem>
</ButtonToolbar> </ButtonToolbar>
</StickyBar> </StickyBar>
</WithTheming>

14
ts/editor/legacy.scss
View File

@ -1,7 +1,7 @@
.linkb { .linkb {
display: inline-block; display: inline-block;
min-width: calc(var(--toolbar-size) - 2px); min-width: calc(var(--buttons-size) - 2px);
min-height: calc(var(--toolbar-size) - 2px); min-height: calc(var(--buttons-size) - 2px);
background-color: white; background-color: white;
border: 1px solid var(--medium-border); border: 1px solid var(--medium-border);
@ -22,7 +22,7 @@
&:active, &:active,
&:active:hover { &:active:hover {
background-color: white; background-color: white;
box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5) box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
rgba(0, 0, 0, 0.25); rgba(0, 0, 0, 0.25);
} }
@ -36,8 +36,8 @@
&:active, &:active,
&:active:hover { &:active:hover {
box-shadow: inset 0 calc(var(--toolbar-size) / 15) box-shadow: inset 0 calc(var(--buttons-size) / 15)
calc(var(--toolbar-size) / 5) rgba(0, 0, 0, 0.35); calc(var(--buttons-size) / 5) rgba(0, 0, 0, 0.35);
border-color: #525252; border-color: #525252;
} }
} }
@ -46,8 +46,8 @@
.topbut { .topbut {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: calc(var(--toolbar-size) - 12px); width: calc(var(--buttons-size) - 12px);
height: calc(var(--toolbar-size) - 12px); height: calc(var(--buttons-size) - 12px);
} }
.nightMode img.topbut { .nightMode img.topbut {

2
ts/sass/button_mixins.scss
View File

@ -113,7 +113,7 @@ $btn-base-color-night: #666;
$focus-color: $blue; $focus-color: $blue;
@mixin impressed-shadow($intensity) { @mixin impressed-shadow($intensity) {
box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5) box-shadow: inset 0 calc(var(--buttons-size) / 15) calc(var(--buttons-size) / 5)
rgba(black, $intensity); rgba(black, $intensity);
} }