First implementation

qt/aqt/editor.py

@@ -82,9 +82,7 @@ _html = """
 }
 </style>
 <div>
-    <div id="topbutsOuter">
-        %s
-    </div>
+    <anki-editor-toolbar></anki-editor-toolbar>
     <div id="fields">
     </div>
     <div id="dupes" class="is-inactive">
@@ -233,10 +231,13 @@ class Editor:
             _html % (bgcol, topbuts, tr.editing_show_duplicates()),
             css=[
                 "css/editor.css",
+                "css/editor-toolbar.css",
             ],
             js=[
                 "js/vendor/jquery.min.js",
+                "js/vendor/protobuf.min.js",
                 "js/editor.js",
+                "js/editor-toolbar.js",
             ],
             context=self,
             default_css=False,

ts/editor-toolbar/ButtonBar.svelte

@@ -0,0 +1,20 @@
+<style lang="scss">
+    ul {
+        padding-left: 0;
+        margin-bottom: 2px;
+
+        & > :global(*) {
+            margin: 0 4px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+</style>
+
+<ul><slot/></ul>

ts/editor-toolbar/ButtonBarOuter.svelte

@@ -0,0 +1,17 @@
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        padding: 2px;
+
+        background: var(--bg-color);
+    }
+</style>
+
+<div><slot /></div>

ts/editor-toolbar/ButtonItem.svelte

@@ -0,0 +1,7 @@
+<style lang="scss">
+    li {
+        display: inline;
+    }
+</style>
+
+<li><slot/></li>

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,10 +1,27 @@
-<script>
+<script lang="typescript">
+    import ButtonBarOuter from "./ButtonBarOuter.svelte";
+    import ButtonBar from "./ButtonBar.svelte";
+
+    import LeftButton from "./LeftButton.svelte";
+    import RightButton from "./RightButton.svelte";
+
+    export let leftButtons = ["Fields...", "Cards..."];
+    export let rightButtons = ["bi bi-type-bold", "bi bi-pin-angle"];
+    export let nightMode: boolean;
+
+    console.log(nightMode);
 </script>
 
-<style lang="scss">
-    p {
-        color: red;
-        }
-</style>
+<ButtonBarOuter>
+    <ButtonBar>
+        {#each leftButtons as leftButton}
+            <LeftButton>{leftButton}</LeftButton>
+        {/each}
+    </ButtonBar>
 
-<p>Test</p>
+    <ButtonBar>
+        {#each rightButtons as rightButton}
+            <RightButton className={rightButton} />
+        {/each}
+    </ButtonBar>
+</ButtonBarOuter>

ts/editor-toolbar/LeftButton.svelte

@@ -0,0 +1,20 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+</script>
+<style lang="scss">
+    button {
+        padding: 3px 10px;
+        /* fit RightButton */
+        vertical-align: -.425em;
+    }
+
+    button:focus {
+        0 0 0 0.05rem rgba(255, 255, 255, 0.5);
+    }
+</style>
+
+<ButtonItem>
+    <button type="button" class="btn btn-secondary" on:click>
+        <slot />
+    </button>
+</ButtonItem>

ts/editor-toolbar/RightButton.svelte

@@ -0,0 +1,15 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+
+    export let className: string;
+</script>
+
+<style>
+    span {
+        font-size: x-large;
+    }
+</style>
+
+<ButtonItem>
+    <span class={className}></span>
+</ButtonItem>

ts/editor-toolbar/_buttons.scss

@@ -0,0 +1,51 @@
+.rainbow {
+    background-image: -webkit-gradient(
+        linear,
+        left top,
+        left bottom,
+        color-stop(0, #f77),
+        color-stop(50%, #7f7),
+        color-stop(100%, #77f)
+    );
+}
+
+button.linkb {
+    -webkit-appearance: none;
+    margin-bottom: -3px;
+    border: 0;
+    box-shadow: none;
+    padding: 0px 2px;
+    background: transparent;
+
+    &:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+    }
+
+    .nightMode & > img {
+        filter: invert(180);
+    }
+}
+
+button:focus {
+    outline: none;
+}
+
+button.highlighted {
+    #topbutsleft & {
+        background-color: lightgrey;
+
+        .nightMode & {
+            background: linear-gradient(0deg, #333333 0%, #434343 100%);
+        }
+    }
+
+    #topbutsright & {
+        border-bottom: 3px solid black;
+        border-radius: 3px;
+
+        .nightMode & {
+            border-bottom-color: white;
+        }
+    }
+}

ts/editor-toolbar/index.ts

@@ -1,19 +1,16 @@
 import type { SvelteComponent } from "svelte";
-import { setupI18n } from "anki/i18n";
 import { checkNightMode } from "anki/nightmode";
 import EditorToolbarSvelte from "./EditorToolbar.svelte";
 
 class EditorToolbar extends HTMLElement {
     component?: SvelteComponent;
 
-    async connectedCallback(): Promise<void> {
+    connectedCallback(): void {
         const nightMode = checkNightMode();
-        const i18n = await setupI18n();
 
         this.component = new EditorToolbarSvelte({
             target: this,
             props: {
-                i18n,
                 nightMode,
             },
         });

ts/editor/editor.scss

@@ -29,97 +29,6 @@
     padding: 0;
 }
 
-#topbutsOuter {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 5;
-    padding: 2px;
-
-    background: var(--bg-color);
-    font-size: 13px;
-}
-
-.topbuts {
-    margin-bottom: 2px;
-
-    & > * {
-        margin: 0 1px;
-
-        &:first-child {
-            margin-left: 0;
-        }
-
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
-.topbut {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-top: 4px;
-    vertical-align: -0.125em;
-}
-
-.rainbow {
-    background-image: -webkit-gradient(
-        linear,
-        left top,
-        left bottom,
-        color-stop(0, #f77),
-        color-stop(50%, #7f7),
-        color-stop(100%, #77f)
-    );
-}
-
-button.linkb {
-    -webkit-appearance: none;
-    margin-bottom: -3px;
-    border: 0;
-    box-shadow: none;
-    padding: 0px 2px;
-    background: transparent;
-
-    &:disabled {
-        opacity: 0.3;
-        cursor: not-allowed;
-    }
-
-    .nightMode & > img {
-        filter: invert(180);
-    }
-}
-
-button:focus {
-    outline: none;
-}
-
-button.highlighted {
-    #topbutsleft & {
-        background-color: lightgrey;
-
-        .nightMode & {
-            background: linear-gradient(0deg, #333333 0%, #434343 100%);
-        }
-    }
-
-    #topbutsright & {
-        border-bottom: 3px solid black;
-        border-radius: 3px;
-
-        .nightMode & {
-            border-bottom-color: white;
-        }
-    }
-}
-
 #dupes {
     position: sticky;
     bottom: 0;