#278

UCDavisLibrary · Feb 8, 2024 · 35fe83c · 35fe83c
1 parent a129f5d
commit 35fe83c
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 20 deletions.
diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/edit.js b/src/editor/lib/blocks/ucd-theme-priority-link/edit.js
@@ -1,8 +1,9 @@
-import { html } from "../../utils";
+import { html, UCDIcons } from "../../utils";
 import "./ucd-wp-priority-link";
 import { ToolbarColorPicker, ToolbarLinkPicker, IconPicker } from "../../block-components";
 import { useBlockProps, BlockControls } from '@wordpress/block-editor';
 import { useRef, useEffect, createRef } from "@wordpress/element";
+import { ToolbarButton } from "@wordpress/components";
 
 
 export default ( props ) => {
@@ -46,6 +47,7 @@ export default ( props ) => {
     if ( attributes.brandColor ) p.color = attributes.brandColor;
     if ( attributes.icon ) p.icon = attributes.icon;
     if ( attributes.text ) p.text = attributes.text;
+    if ( attributes.tiltCircle ) p['tilt-circle'] = true;
 
     return p;
   }
@@ -67,15 +69,15 @@ export default ( props ) => {
       attrs.postId = value.id;
     }
     else if ( value.kind == 'taxonomy' ) {
-      attrs.taxId = value.id 
+      attrs.taxId = value.id
     }
     setAttributes(attrs);
   }
   const hrefContent = (() => {
     let value = {opensInNewTab: attributes.newTab, url: ""};
     if ( attributes.href ) {
       value.url = attributes.href;
-    } 
+    }
     return value;
   })();
 
@@ -88,13 +90,19 @@ export default ( props ) => {
   <div ...${ blockProps }>
     <${BlockControls} group="block">
       <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} />
-      <${ToolbarColorPicker} 
-          onChange=${onColorChange}
-          value=${attributes.brandColor}
-          ucdBlock="priority-link"
+      <${ToolbarColorPicker}
+        onChange=${onColorChange}
+        value=${attributes.brandColor}
+        ucdBlock="priority-link"
+      />
+      <${ToolbarButton}
+        icon=${UCDIcons.renderPublic("fa-rotate-right")}
+        onClick=${ () => {setAttributes({'tiltCircle': !attributes.tiltCircle})}}
+        isPressed=${attributes.tiltCircle}
+        label="Toggle 'Tilt Circle' Modifier"
       />
     </${BlockControls}>
-    <${IconPicker} 
+    <${IconPicker}
       ref=${iconPickerRef}
       onChange=${onIconSelect}
       selectedIcon=${attributes.icon}
@@ -104,4 +112,4 @@ export default ( props ) => {
     </ucd-wp-priority-link>
   </div>
   `
-}
+}
diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/index.js b/src/editor/lib/blocks/ucd-theme-priority-link/index.js
@@ -45,9 +45,13 @@ const settings = {
     hideText: {
       type: "boolean",
       default: false
+    },
+    tiltCircle: {
+      type: "boolean",
+      default: false
     }
   },
 	edit: Edit
 };
 
-export default { name, settings };
+export default { name, settings };
diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.js
@@ -11,7 +11,8 @@ export default class UcdWpPriorityLink extends Mixin(LitElement)
       color: {type: String},
       icon: {type: String},
       text: {type: String},
-      hideText: {type: Boolean, attribute: 'hide-text'}
+      hideText: {type: Boolean, attribute: 'hide-text'},
+      tiltCircle: {type: Boolean, attribute: 'tilt-circle'}
     }
   }
 
@@ -34,10 +35,14 @@ export default class UcdWpPriorityLink extends Mixin(LitElement)
 
   _getBaseClasses(){
     let classes = {
-      "vertical-link": true,
-      "vertical-link--circle": true
+      "vertical-link": true
     };
     classes[`category-brand--${this.color}`] = this.color ? true : false;
+    if ( this.tiltCircle ) {
+      classes['vertical-link--tilt-circle'] = true;
+    } else {
+      classes['vertical-link--circle'] = true;
+    }
 
     return classes;
   }
@@ -53,4 +58,4 @@ export default class UcdWpPriorityLink extends Mixin(LitElement)
 
 }
 
-customElements.define('ucd-wp-priority-link', UcdWpPriorityLink);
+customElements.define('ucd-wp-priority-link', UcdWpPriorityLink);
diff --git a/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js b/src/editor/lib/blocks/ucd-theme-priority-link/ucd-wp-priority-link.tpl.js
@@ -14,6 +14,7 @@ export function styles() {
     }
     ucdlib-icon {
       height: 50%;
+      width: 50%;
     }
     .show-placeholder:before {
       content: attr(placeholder);
@@ -32,7 +33,7 @@ export function styles() {
   ];
 }
 
-export function render() { 
+export function render() {
 return html`
   <a class=${classMap(this._getBaseClasses())}>
     <div class="vertical-link__figure" @click="${this.dispatchIconChangeRequest}">
@@ -44,14 +45,14 @@ return html`
     </div>
     ${!this.hideText ? html`
       <div class="vertical-link__title">
-        <slot 
+        <slot
           id="text-slot"
           class=${this.text ? '' : 'show-placeholder'}
-          name="text" 
+          name="text"
           placeholder="Write text..."
           @input=${this._onTextInput}>${this.text}</slot>
       </div>
     ` : html``}
     </div>
   </a>
-`;}
+`;}
diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss
@@ -197,8 +197,11 @@ a.icon--circle-arrow-right::before {
 }
 
 // for priority links
-.vertical-link--circle ucdlib-icon.vertical-link__image {
+.vertical-link--circle ucdlib-icon.vertical-link__image,
+.vertical-link--tilt-circle ucdlib-icon.vertical-link__image
+ {
   height: 50%;
+  width: 50%;
 }
 
 // for focal link

diff --git a/views/macros/links.twig b/views/macros/links.twig
@@ -239,10 +239,15 @@ kwargs:
   newTab {Boolean} - If link opens in new tab
 #}
 {% macro priority_link( kwargs={} ) %}
-  {% set classes = ['vertical-link', 'vertical-link--circle'] %}
+  {% set classes = ['vertical-link'] %}
   {% if kwargs.brandColor %}
     {% set classes = classes|merge(['category-brand--' ~ kwargs.brandColor]) %}
   {% endif %}
+  {% if kwargs.tiltCircle %}
+    {% set classes = classes|merge(['vertical-link--tilt-circle']) %}
+  {% else %}
+    {% set classes = classes|merge(['vertical-link--circle']) %}
+  {% endif %}
   {% set classes = classes|join(' ') %}
 
   {% set target = kwargs.newTab ? "target='_blank'" : "" %}