feat: Allow customizing icon text when icon style is title

Drive4ik · Oct 3, 2023 · 550e388 · 550e388
1 parent da2d2e2
commit 550e388
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,5 @@
 /addon/dist/
 /addon/dist-zip/
 /addon/package-lock.json
+
+.DS_Store
diff --git a/addon/src/components/edit-group.vue b/addon/src/components/edit-group.vue
@@ -82,7 +82,7 @@
         computed: {
             iconUrlToDisplay() {
                 return Groups.getIconUrl({
-                    title: this.group.title,
+                    title: this.group.iconText || this.group.title,
                     iconUrl: this.group.iconUrl,
                     iconColor: this.group.iconColor,
                     iconViewType: this.group.iconViewType,
@@ -225,7 +225,7 @@
 
             getIconTypeUrl(iconType) {
                 return Groups.getIconUrl({
-                    title: this.group.title,
+                    title: this.group.iconText || this.group.title,
                     iconViewType: iconType,
                     iconColor: this.group.iconColor || 'rgb(66, 134, 244)',
                 });
@@ -375,6 +375,12 @@
                 </div>
             </div>
         </div>
+        <div class="field" v-if="group.iconViewType === 'title'">
+            <label class="label" v-text="'Icon Text'"></label>
+            <div class="control is-expanded">
+                <input v-model.trim="group.iconText" type="text" maxlength="16" class="input" placeholder="Customize icon text other than using title"/>
+            </div>
+        </div>
 
         <div class="field">
             <div class="control">

diff --git a/addon/src/js/groups.js b/addon/src/js/groups.js
@@ -84,6 +84,7 @@ export function create(id, title, defaultGroupProps = {}) {
     const group = {
         id,
         title: null,
+        iconText: null,
         iconColor: null,
         iconUrl: null,
         iconViewType: Constants.DEFAULT_GROUP_ICON_VIEW_TYPE,
@@ -343,6 +344,7 @@ export async function update(groupId, updateData) {
 
 const KEYS_RESPONSIBLE_VIEW = Object.freeze([
     'title',
+    'iconText',
     'iconUrl',
     'iconColor',
     'iconViewType',
@@ -526,6 +528,7 @@ const ExternalExtensionGroupDependentKeys = new Set([
     'title',
     'isArchive',
     'isSticky',
+    'iconText',
     'iconColor',
     'iconUrl',
     'iconViewType',
@@ -538,6 +541,7 @@ export function mapForExternalExtension(group) {
         title: getTitle(group),
         isArchive: group.isArchive,
         isSticky: group.isSticky,
+        iconText: group.iconText,
         iconUrl: getIconUrl(group),
         contextualIdentity: Containers.get(group.newTabContainer),
         windowId: Cache.getWindowId(group.id) || null,
@@ -676,7 +680,7 @@ const emojiRegExp = /\p{RI}\p{RI}|\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E002
 const firstCharEmojiRegExp = new RegExp(`^(${emojiRegExp.source})`, emojiRegExp.flags);
 
 export function getEmojiIcon(group) {
-    if (group.iconViewType === 'title') {
+    if (group.iconViewType === 'title' && !group.iconText) {
         const [emoji] = firstCharEmojiRegExp.exec(group.title) || [];
         return emoji;
     }
@@ -702,7 +706,7 @@ export function getIconUrl(group, keyInObj = null) {
 
         const stroke = 'transparent' === group.iconColor ? 'stroke="#606060" stroke-width="1"' : '',
             emoji = getEmojiIcon(group),
-            title = emoji || group.title;
+            title = emoji || group.iconText || group.title;
 
         const icons = {
             'main-squares': `

diff --git a/addon/src/popup/Popup.vue b/addon/src/popup/Popup.vue
@@ -654,7 +654,7 @@
                     computed: {
                         iconUrlToDisplay() {
                             return Groups.getIconUrl({
-                                title: this.title,
+                                title: this.iconText || this.title,
                                 iconUrl: this.iconUrl,
                                 iconColor: this.iconColor,
                                 iconViewType: this.iconViewType,