shows current profile on action bar

yomidevs · Jan 29, 2025 · 03fefc5 · 03fefc5
1 parent 0e63359
commit 03fefc5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -475,6 +475,7 @@ a:has(rt) {
     background-color: var(--sidebar-background-color);
     display: flex;
     flex-flow: column nowrap;
+    align-items: center;
 }
 :root[data-popup-action-bar-location=top] .content-outer,
 :root[data-popup-action-bar-location=bottom] .content-outer {
@@ -579,6 +580,11 @@ button.sidebar-button.sidebar-button-highlight {
     --button-active-content-color: var(--accent-color);
 }
 
+.vertical-text {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+
 
 /* Search page */
 .search-header-wrapper {

diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js
@@ -34,6 +34,8 @@ export class DisplayProfileSelection {
         this._profileButton = querySelectorNotNull(document, '#profile-button');
         /** @type {HTMLElement} */
         const profilePanelElement = querySelectorNotNull(document, '#profile-panel');
+        /** @type {HTMLElement} */
+        this._profileLanguage = querySelectorNotNull(document, '#profile-language');
         /** @type {PanelElement} */
         this._profilePanel = new PanelElement(profilePanelElement, 375); // Milliseconds; includes buffer
         /** @type {boolean} */
@@ -49,6 +51,7 @@ export class DisplayProfileSelection {
         this._display.application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false);
         this._profileListNeedsUpdate = true;
+        await this._updateProfileLanguage();
     }
 
     // Private
@@ -85,6 +88,17 @@ export class DisplayProfileSelection {
         }
     }
 
+    /**
+     *
+     */
+    async _updateProfileLanguage() { // call this somewhere that gets updated when popActionBarLocation gets called?
+        const {profileCurrent, profiles} = await this._display.application.api.optionsGetFull();
+        const currentProfile = profiles[profileCurrent];
+        this._profileLanguage.textContent = currentProfile.name;
+        // ? currentprofile popactionbarlocation only changes on reload
+        // this._profileLanguage.textContent = currentProfile.options.general.popupActionBarLocation;
+    }
+
     /** */
     async _updateProfileList() {
         this._profileListNeedsUpdate = false;
@@ -109,6 +123,7 @@ export class DisplayProfileSelection {
         }
         this._profileList.textContent = '';
         this._profileList.appendChild(fragment);
+        await this._updateProfileLanguage();
     }
 
     /**
@@ -136,5 +151,6 @@ export class DisplayProfileSelection {
         };
         await this._display.application.api.modifySettings([modification], this._source);
         this._setProfilePanelVisible(false);
+        await this._updateProfileLanguage();
     }
 }
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
@@ -199,6 +199,8 @@ export class Display extends EventDispatcher {
         this._languageSummaries = [];
         /** @type {import('dictionary-importer').Summary[]} */
         this._dictionaryInfo = [];
+        /** @type {HTMLElement} */
+        this._profileLanguage = querySelectorNotNull(document, '#profile-language');
 
         /* eslint-disable @stylistic/no-multi-spaces */
         this._hotkeyHandler.registerActions([
@@ -443,6 +445,17 @@ export class Display extends EventDispatcher {
         await this.updateOptions();
     }
 
+    /**
+     * @param {import('settings').ProfileOptions} currentProfile
+     */
+    async _updateCurrentProfileDisplay(currentProfile) {
+        if (currentProfile.general.popupActionBarLocation === 'left' || currentProfile.general.popupActionBarLocation === 'right') {
+            this._profileLanguage.classList.add('vertical-text');
+        } else {
+            this._profileLanguage.classList.remove('vertical-text');
+        }
+    }
+
     /** */
     async updateOptions() {
         const options = await this._application.api.optionsGet(this.getOptionsContext());
@@ -484,6 +497,7 @@ export class Display extends EventDispatcher {
 
         void this._updateNestedFrontend(options);
         this._updateContentTextScanner(options);
+        await this._updateCurrentProfileDisplay(options);
 
         this.trigger('optionsUpdated', {options});
     }

diff --git a/ext/popup.html b/ext/popup.html
@@ -84,6 +84,7 @@ <h3>Default Profile</h3>
                 <button type="button" class="sidebar-button" disabled id="navigate-next-button" title="Next definition" data-hotkey='["historyForward","title","Next definition ({0})"]'><span class="sidebar-button-icon icon" data-icon="right-chevron"></span></button>
             </div>
             <div class="content-sidebar-bottom">
+                <p class="sidebar-profile-language" id="profile-language"></p>
                 <button type="button" class="sidebar-button" id="profile-button"><span class="sidebar-button-icon icon" data-icon="profile"></span></button>
             </div>
         </div>