Added weight and decoration style settings

mdelobelle · Feb 5, 2022 · eb23d37 · eb23d37
1 parent d7266c8
commit eb23d37
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/cssBuilder/cssBuilder.ts b/src/cssBuilder/cssBuilder.ts
@@ -73,15 +73,17 @@ export async function buildCSS(selectors: CSSLink[], plugin: SuperchargedLinks)
 
         if (selector.selectText) {
             instructions.push(`    --${selector.uid}-color: ${colors[hash % 36]};`);
+            instructions.push(`    --${selector.uid}-weight: initial;`);
         }
         if (selector.selectPrepend) {
             instructions.push(`    --${selector.uid}-before: '';`);
         }
         if (selector.selectAppend) {
-            instructions.push(`    --${selector.uid}-after: '';`,);
+            instructions.push(`    --${selector.uid}-after: '';`);
         }
         if (selector.selectBackground) {
             instructions.push(`    --${selector.uid}-background-color: #ffffff;`);
+            instructions.push(`    --${selector.uid}-decoration: initial;`);
         }
     });
     instructions.push("}");
@@ -104,6 +106,7 @@ export async function buildCSS(selectors: CSSLink[], plugin: SuperchargedLinks)
                 `div[data-id="${selector.uid}"] div.setting-item-description,`,
                 cssSelector + " {",
                 `    color: var(--${selector.uid}-color) !important;`,
+                `    font-weight: var(--${selector.uid}-weight);`,
                 "}"]);
         }
         if (selector.selectBackground) {
@@ -114,6 +117,7 @@ export async function buildCSS(selectors: CSSLink[], plugin: SuperchargedLinks)
                 `    border-radius: 5px;`,
                 `    padding-left: 2px;`,
                 `    padding-right: 2px;`,
+                `    text-decoration: var(--${selector.uid}-decoration) !important;`,
                 "}"]);
         }
         if (selector.selectPrepend) {
@@ -164,7 +168,28 @@ export async function buildCSS(selectors: CSSLink[], plugin: SuperchargedLinks)
                 `        title: Link color`,
                 "        type: variable-color",
                 "        format: hex",
-                `        default: '${colors[i % 36]}'`])
+                `        default: '${colors[i % 36]}'`,
+                "    - ",
+                `        id: ${selector.uid}-weight`,
+                `        title: Font weight`,
+                "        type: variable-select",
+                `        default: initial`,
+                `        options:`,
+                `            - initial`,
+                `            - lighter`,
+                `            - normal`,
+                `            - bold`,
+                `            - bolder`,
+                "    - ",
+                `        id: ${selector.uid}-decoration`,
+                `        title: Font decoration`,
+                "        type: variable-select",
+                `        default: initial`,
+                `        options:`,
+                `            - initial`,
+                `            - underline`,
+                `            - overline`,
+                `            - line-through`])
         }
         if (selector.selectPrepend) {
             instructions.push(...["    - ",

diff --git a/src/cssBuilder/cssBuilderModal.ts b/src/cssBuilder/cssBuilderModal.ts
@@ -11,7 +11,7 @@ export function displayText(link: CSSLink, settings: SuperchargedLinksSettings):
         if (!link.value) {
             return "<b>Please choose a tag</b>";
         }
-        return `<span class="data-link-icon" data-link-tags="${link.value}">Note</span> has tag <a class="tag">#${link.value}</a>`;
+        return `<span class="data-link-icon data-link-text data-link-icon-after" data-link-tags="${link.value}">Note</span> has tag <a class="tag">#${link.value}</a>`;
     }
     else if (link.type === 'attribute') {
         if (settings.targetAttributes.length === 0) {
@@ -23,12 +23,12 @@ export function displayText(link: CSSLink, settings: SuperchargedLinksSettings):
         if (!link.value){
             return "<b>Please choose an attribute value.</b>"
         }
-        return `<span class="data-link-icon" data-link-${link.name}="${link.value}">Note</span> has attribute <b>${link.name}</b> ${matchPreview[link.match]} <b>${link.value}</b>.`;
+        return `<span class="data-link-icon data-link-text data-link-icon-after" data-link-${link.name}="${link.value}">Note</span> has attribute <b>${link.name}</b> ${matchPreview[link.match]} <b>${link.value}</b>.`;
     }
     if (!link.value) {
         return "<b>Please choose a path.</b>"
     }
-    return `The path of the <span class="data-link-icon" data-link-path="${link.value}">note</span> ${matchPreviewPath[link.match]} <b>${link.value}</b>`
+    return `The path of the <span class="data-link-icon data-link-text data-link-icon-after" data-link-path="${link.value}">note</span> ${matchPreviewPath[link.match]} <b>${link.value}</b>`
 }
 
 export function updateDisplay(textArea: HTMLElement, link: CSSLink, settings: SuperchargedLinksSettings): boolean {
@@ -231,7 +231,7 @@ class CSSBuilderModal extends Modal {
                     cssLink.selectBackground = value;
                 })
                 t.setValue(cssLink.selectBackground);
-                t.setTooltip("Add optional background to link");
+                t.setTooltip("Add optional background or underline to link");
             });