comand-component-library 3.3.28 → 3.3.30

package/src/components/CmdThumbnailScroller.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox, 'full-width' : fullWidth}]">
+    <div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox, 'full-width' : fullWidth, 'large-icons': largeIcons}]">
         <!-- begin CmdSlideButton -->
         <CmdSlideButton
             @click.prevent="showPrevItem"
@@ -71,6 +71,15 @@ export default {
             type: Boolean,
             default: false
         },
+        /**
+         * activate if large icons should be displayed above link text
+         *
+         * @affectsStyling: true
+         */
+        largeIcons: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set content-type
          *
@@ -180,8 +189,6 @@ export default {
             this.emitCurrentItemId(index)
         },
         emitCurrentItemId(index) {
-            console.log("index", index)
-            console.log("this.items[index]", this.items[index])
             // emit id of current/clicked item
             this.$emit("click", this.items[index].id)
         },
@@ -342,6 +349,25 @@ export default {
         }
     }
 
+    &.large-icons {
+        li a {
+            display: flex;
+            flex-direction: column;
+            gap: calc(var(--default-gap) / 4);
+            text-decoration: none;
+            align-items: center;
+            justify-content: center;
+
+            span {
+                margin: 0;
+            }
+
+            [class*="icon-"] {
+                font-size: 5rem;
+            }
+        }
+    }
+
     @media only screen and (max-width: $medium-max-width) {
         & > ul > li {
             flex: none;
@@ -361,6 +387,12 @@ export default {
     }
 }
 
+@media only screen and (width <= #{$small-max-width}) {
+    .cmd-thumbnail-scroller {
+        display: block;
+    }
+}
+
 @container (width <= #{$small-max-width}) {
     .cmd-thumbnail-scroller {
         display: block;

package/src/components/CmdToggleDarkMode.vue

@@ -11,7 +11,7 @@
             <CmdIcon
                 :iconClass="iconClass"
                 :type="iconType"
-                :tooltip="!showLabel ? labelText: ''"
+                :tooltip="iconTooltip"
             />
             <!-- end CmdIcon -->
         </a>
@@ -56,11 +56,12 @@ export default {
          *
          * (styledAsButton-property must be activated)
          */
-        iconDarkMode: {
+        iconDarkModeActivated: {
             default() {
                 return {
-                    iconClass: "icon-home",
-                    iconType: "auto"
+                    iconClass: "icon-sun",
+                    iconType: "auto",
+                    tooltip: "Activate light mode"
                 }
             }
         },
@@ -69,11 +70,12 @@ export default {
          *
          * (styledAsButton-property must be activated)
          */
-        iconLightMode: {
+        iconLightModeActivated: {
             default() {
                 return {
-                    iconClass: "icon-globe",
-                    iconType: "auto"
+                    iconClass: "icon-moon",
+                    iconType: "auto",
+                    tooltip: "Activate dark mode"
                 }
             }
         },
@@ -157,10 +159,13 @@ export default {
             return this.darkMode ? this.labelTextDarkMode : this.labelTextLightMode
         },
         iconClass() {
-            return this.darkMode ? this.iconDarkMode.iconClass : this.iconLightMode.iconClass
+            return this.darkMode ? this.iconDarkModeActivated.iconClass : this.iconLightModeActivated.iconClass
         },
         iconType() {
-            return this.darkMode ? this.iconDarkMode.iconType : this.iconLightMode.iconType
+            return this.darkMode ? this.iconDarkModeActivated.iconType : this.iconLightModeActivated.iconType
+        },
+        iconTooltip() {
+            return this.darkMode ? this.iconDarkModeActivated.tooltip : this.iconLightModeActivated.tooltip
         }
     },
     watch: {

package/src/mixins/CmdAddressData/DefaultMessageProperties.js

@@ -10,10 +10,10 @@ export default {
         "cmdaddressdata.labeltext.email": "Email:",
         "cmdaddressdata.labeltext.website": "Web site:",
         "cmdaddressdata.labeltext.custom": "Custom:",
-        "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
-        "cmdaddressdata.title.call_number": "Call number",
-        "cmdaddressdata.title.send_email": "Send email",
-        "cmdaddressdata.title.visit_website": "Visit web site (in new tab)"
+        "cmdaddressdata.tooltip.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
+        "cmdaddressdata.tooltip.call_number": "Call number",
+        "cmdaddressdata.tooltip.send_email": "Send email",
+        "cmdaddressdata.tooltip.visit_website": "Visit web site (in new tab)"
       }
     }
   }