Merge pull request #999 from dodona-edu/enhc/tab-bar-tweaks

Tweak layout and behaviour of tab bar

Author: chvp

src/frontend/components/AddFileButton.ts

@@ -24,6 +24,7 @@ export class AddFileButton extends PapyrosElement {
             .add-btn {
                 padding: 0.375rem 0.5rem;
                 border: none;
+                border-bottom: 2px solid var(--md-sys-color-outline-variant);
                 border-radius: 0.375rem 0.375rem 0 0;
                 cursor: pointer;
                 font-size: 1rem;
@@ -63,8 +64,19 @@ export class AddFileButton extends PapyrosElement {
         this.invalid = !isValidFileName(value) || this.papyros.io.files.some((f) => f.name === value);
     }
 
+    private onBlur(): void {
+        if (!this.adding) return;
+        const name = this.addInputRef.value?.value.trim() ?? "";
+        if (name.length === 0) {
+            this.cancelAdd();
+        } else {
+            this.confirmAdd();
+        }
+    }
+
     private onAddKeydown(e: KeyboardEvent): void {
         if (e.key === "Enter") {
+            e.preventDefault();
             this.confirmAdd();
         } else if (e.key === "Escape") {
             this.cancelAdd();
@@ -85,10 +97,15 @@ export class AddFileButton extends PapyrosElement {
                 placeholder=${this.t("Papyros.add_file_placeholder")}
                 @input=${this.onAddInput}
                 @keydown=${this.onAddKeydown}
-                @blur=${this.cancelAdd}
+                @blur=${this.onBlur}
             />`;
         }
-        return html`<button class="add-btn" aria-label=${this.t("Papyros.add_file")} @click=${this.startAdding}>
+        return html`<button
+            class="add-btn"
+            title=${this.t("Papyros.add_file")}
+            aria-label=${this.t("Papyros.add_file")}
+            @click=${this.startAdding}
+        >
             +
         </button>`;
     }

src/frontend/components/EditorTab.ts

@@ -45,10 +45,11 @@ export class EditorTab extends PapyrosElement {
                 opacity: 0.6;
             }
 
-            button:hover .rename-btn,
-            button:hover .close-btn,
-            button:focus-within .rename-btn,
-            button:focus-within .close-btn,
+            .rename-btn svg {
+                width: 0.75rem;
+                height: 0.75rem;
+            }
+
             button.active .rename-btn,
             button.active .close-btn {
                 display: inline-flex;
@@ -76,6 +77,7 @@ export class EditorTab extends PapyrosElement {
 
     private closeFile(e: Event): void {
         e.stopPropagation();
+        if (!confirm(this.t("Papyros.close_file_confirm"))) return;
         this.papyros.io.removeFile(this.file.name);
         void this.papyros.runner.deleteFile(this.file.name);
     }
@@ -187,14 +189,18 @@ export class EditorTab extends PapyrosElement {
                               class="rename-btn"
                               role="button"
                               tabindex="0"
+                              title=${this.t("Papyros.rename_file_tab")}
                               aria-label=${this.t("Papyros.rename_file_tab")}
                               @click=${this.onRenameClick}
                               @keydown=${this.onRenameBtnKeydown}
-                              >✎</span
-                          ><span
+                          >
+                              ${this.papyros.constants.icons.edit}
+                          </span>
+                          <span
                               class="close-btn"
                               role="button"
                               tabindex="0"
+                              title=${this.t("Papyros.close_file_tab")}
                               aria-label=${this.t("Papyros.close_file_tab")}
                               @click=${this.closeFile}
                               @keydown=${this.onCloseBtnKeydown}

src/frontend/components/shared-styles.ts

@@ -4,6 +4,7 @@ export const tabButtonStyles: CSSResult = css`
     button {
         padding: 0.375rem 0.75rem;
         border: none;
+        border-bottom: 2px solid var(--md-sys-color-outline-variant);
         border-radius: 0.375rem 0.375rem 0 0;
         cursor: pointer;
         font-size: 0.875rem;
@@ -18,6 +19,8 @@ export const tabButtonStyles: CSSResult = css`
     button.active {
         background-color: var(--md-sys-color-surface);
         color: var(--md-sys-color-on-surface);
+        font-weight: 600;
+        border-bottom: 2px solid var(--md-sys-color-primary);
     }
 
     button:hover:not(.active) {

src/frontend/state/Constants.ts

@@ -68,6 +68,13 @@ export class Constants extends State {
                 />
             </svg>
         `,
+        edit: html`
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                <path
+                    d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"
+                />
+            </svg>
+        `,
     };
 
     @stateProperty

src/frontend/state/Translations.ts

@@ -71,7 +71,8 @@ export const ENGLISH_TRANSLATION = {
             stop: "Stop debugging",
         },
         editor_tab_code: "Code",
-        close_file_tab: "Close file",
+        close_file_tab: "Remove file",
+        close_file_confirm: "Are you sure you want to remove this file?",
         rename_file_tab: "Rename file",
         add_file: "Add file",
         add_file_placeholder: "filename\u2026",
@@ -166,7 +167,8 @@ export const DUTCH_TRANSLATION = {
             stop: "Stop debugger",
         },
         editor_tab_code: "Code",
-        close_file_tab: "Bestand sluiten",
+        close_file_tab: "Bestand verwijderen",
+        close_file_confirm: "Weet je zeker dat je dit bestand wilt verwijderen?",
         rename_file_tab: "Bestand hernoemen",
         add_file: "Bestand toevoegen",
         add_file_placeholder: "bestandsnaam\u2026",