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 { dropdownKey } from "./contextKeys";
import WithTheming from "./WithTheming.svelte";
import ButtonToolbar from "./ButtonToolbar.svelte";
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);
</script>
<WithTheming style="--toolbar-wrap: nowrap; ">
<ButtonToolbar
{id}
class={`dropdown-menu btn-dropdown-menu ${className}`}
nowrap={true}
{api}
>
<slot />
</ButtonToolbar>
</WithTheming>
<ButtonToolbar
{id}
class={`dropdown-menu btn-dropdown-menu ${className}`}
wrap={false}
{api}
>
<slot />
</ButtonToolbar>
<style lang="scss">
:global(.dropdown-menu.btn-dropdown-menu) {
display: none;
min-width: 0;
padding: calc(var(--toolbar-size) / 10) 0;
padding: calc(var(--buttons-size) / 10) 0;
background-color: var(--window-bg);
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 = "";
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 {
const detach = writable(false);
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}
{id}
class={`btn-group ${className}`}
{style}
dir="ltr"
role="group"
>
@ -90,8 +104,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
div {
flex-wrap: var(--toolbar-wrap);
padding: calc(var(--toolbar-size) / 10);
flex-wrap: var(--buttons-wrap);
padding: calc(var(--buttons-size) / 10);
margin: 0;
}
</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 style: string;
const radius = "calc(var(--toolbar-size) / 7.5)";
const radius = "calc(var(--buttons-size) / 7.5)";
$: {
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 = "";
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 {
const detach = writable(false);
@ -64,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div
bind:this={buttonToolbarRef}
{id}
class={`btn-toolbar ${className}`}
class:flex-nowrap={nowrap}
class={`btn-toolbar wrap-variable ${className}`}
{style}
role="toolbar"
>
<slot />
@ -75,3 +86,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonToolbarItem>
{/each}
</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";
button {
width: calc(var(--toolbar-size) - 0px);
height: calc(var(--toolbar-size) - 0px);
width: calc(var(--buttons-size) - 0px);
height: calc(var(--buttons-size) - 0px);
padding: 4px;
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;
justify-content: space-between;
font-size: calc(var(--toolbar-size) / 2.3);
font-size: calc(var(--buttons-size) / 2.3);
background: 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;
/* constrain icon */
width: calc(var(--toolbar-size) - 2px);
height: calc(var(--toolbar-size) - 2px);
width: calc(var(--buttons-size) - 2px);
height: calc(var(--buttons-size) - 2px);
& > :global(svg),
& > :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;
button {
padding: 0 calc(var(--toolbar-size) / 3);
padding: 0 calc(var(--buttons-size) / 3);
width: auto;
height: var(--toolbar-size);
height: var(--buttons-size);
@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;
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);

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">
label {
display: flex;
padding: 0 calc(var(--toolbar-size) / 10);
padding: 0 calc(var(--buttons-size) / 10);
}
</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 StickyBar from "components/StickyBar.svelte";
import WithTheming from "components/WithTheming.svelte";
import ButtonToolbar from "components/ButtonToolbar.svelte";
import ButtonToolbarItem from "components/ButtonToolbarItem.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>
<WithTheming style="--toolbar-size: 2.3rem; --toolbar-wrap: nowrap">
<ButtonToolbar class="justify-content-between">
<ButtonToolbarItem>
<ButtonGroup class="flex-grow-1">
<ButtonGroupItem>
<SelectButton class="flex-grow-1" on:change={blur}>
{#each $configList as entry}
<SelectOption
value={String(entry.idx)}
selected={entry.current}
>
{configLabel(entry)}
</SelectOption>
{/each}
</SelectButton>
</ButtonGroupItem>
</ButtonGroup>
</ButtonToolbarItem>
<ButtonToolbar class="justify-content-between" size={2.3} wrap={false}>
<ButtonToolbarItem>
<ButtonGroup class="flex-grow-1">
<ButtonGroupItem>
<SelectButton class="flex-grow-1" on:change={blur}>
{#each $configList as entry}
<SelectOption
value={String(entry.idx)}
selected={entry.current}
>
{configLabel(entry)}
</SelectOption>
{/each}
</SelectButton>
</ButtonGroupItem>
</ButtonGroup>
</ButtonToolbarItem>
<ButtonToolbarItem>
<SaveButton
{state}
on:add={promptToAdd}
on:clone={promptToClone}
on:rename={promptToRename}
/>
</ButtonToolbarItem>
</ButtonToolbar>
</WithTheming>
<ButtonToolbarItem>
<SaveButton
{state}
on:add={promptToAdd}
on:clone={promptToClone}
on:rename={promptToRename}
/>
</ButtonToolbarItem>
</ButtonToolbar>
</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 lang="typescript">
import WithTheming from "components/WithTheming.svelte";
import StickyBar from "components/StickyBar.svelte";
import ButtonToolbar from "components/ButtonToolbar.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 templateButtons = {};
export let size: number = 2;
export let wraps: boolean = true;
$: style = `--toolbar-size: ${size}rem; --toolbar-wrap: ${
wraps ? "wrap" : "nowrap"
}`;
export let size = 2;
export let wrap = true;
</script>
<WithTheming {style}>
<StickyBar>
<ButtonToolbar api={toolbar}>
<ButtonToolbarItem id="notetype">
<NoteTypeButtons api={notetypeButtons} />
</ButtonToolbarItem>
<StickyBar>
<ButtonToolbar {size} {wrap} api={toolbar}>
<ButtonToolbarItem id="notetype">
<NoteTypeButtons api={notetypeButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="inlineFormatting">
<FormatInlineButtons api={formatInlineButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="inlineFormatting">
<FormatInlineButtons api={formatInlineButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="blockFormatting">
<FormatBlockButtons api={formatBlockButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="blockFormatting">
<FormatBlockButtons api={formatBlockButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="color">
<ColorButtons api={colorButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="color">
<ColorButtons api={colorButtons} />
</ButtonToolbarItem>
<ButtonToolbarItem id="template">
<TemplateButtons api={templateButtons} />
</ButtonToolbarItem>
</ButtonToolbar>
</StickyBar>
</WithTheming>
<ButtonToolbarItem id="template">
<TemplateButtons api={templateButtons} />
</ButtonToolbarItem>
</ButtonToolbar>
</StickyBar>

14
ts/editor/legacy.scss
View File

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

2
ts/sass/button_mixins.scss
View File

@ -113,7 +113,7 @@ $btn-base-color-night: #666;
$focus-color: $blue;
@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);
}