Added Bookmarsk to Image Picker

ibexa · Aug 12, 2024 · 3eabeb4 · 3eabeb4
1 parent bab28a8
commit 3eabeb4
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 122 deletions.
diff --git a/src/bundle/Resources/config/universal_discovery_widget.yaml b/src/bundle/Resources/config/universal_discovery_widget.yaml
@@ -35,6 +35,17 @@ system:
                         browse:
                             items_per_page: 50
                             priority: 30
+                    image_picker_tabs_config:
+                        image_picker:
+                            id: 'image_picker'
+                            priority: 40
+                            items_per_page: 12
+                            hidden: false
+                        image_picker_bookmarks:
+                            id: 'image_picker_bookmarks'
+                            priority: 50
+                            items_per_page: 30
+                            hidden: false
 
                 # These inherit _default configuration
                 create:

diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
@@ -12,6 +12,7 @@
 @import 'mixins/containers';
 @import 'mixins/drag-and-drop';
 @import 'mixins/spinner';
+@import 'mixins/tab-selector';
 
 @mixin datetime-field() {
     &.is-invalid {

diff --git a/src/bundle/Resources/public/scss/mixins/_tab-selector.scss b/src/bundle/Resources/public/scss/mixins/_tab-selector.scss
@@ -0,0 +1,43 @@
+@mixin tab-selector {
+    &__item {
+        height: calculateRem(48px);
+        width: calculateRem(48px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: $ibexa-border-radius;
+        margin: calculateRem(12px) calculateRem(8px) calculateRem(24px);
+        position: relative;
+
+        .ibexa-icon {
+            fill: $ibexa-color-black;
+        }
+
+        &--selected {
+            background-color: $ibexa-color-light-400;
+
+            .ibexa-icon {
+                fill: $ibexa-color-black;
+            }
+        }
+
+        &:not(:first-of-type) {
+            &:before {
+                content: '';
+                position: absolute;
+                top: calculateRem(-12px);
+                left: calculateRem(12px);
+                height: calculateRem(1.5px);
+                width: calculateRem(24px);
+                background-color: $ibexa-color-dark-200;
+            }
+        }
+
+        &:hover {
+            .ibexa-icon {
+                fill: $ibexa-color-primary;
+            }
+        }
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_tab.selector.scss
@@ -1,43 +1,3 @@
 .c-tab-selector {
-    &__item {
-        height: calculateRem(48px);
-        width: calculateRem(48px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        border-radius: $ibexa-border-radius;
-        margin: calculateRem(12px) calculateRem(8px) calculateRem(24px);
-        position: relative;
-
-        .ibexa-icon {
-            fill: $ibexa-color-black;
-        }
-
-        &--selected {
-            background-color: $ibexa-color-light-400;
-
-            .ibexa-icon {
-                fill: $ibexa-color-black;
-            }
-        }
-
-        &:not(:first-of-type) {
-            &:before {
-                content: '';
-                position: absolute;
-                top: calculateRem(-12px);
-                left: calculateRem(12px);
-                height: calculateRem(1.5px);
-                width: calculateRem(24px);
-                background-color: $ibexa-color-dark-200;
-            }
-        }
-
-        &:hover {
-            .ibexa-icon {
-                fill: $ibexa-color-primary;
-            }
-        }
-    }
+    @include tab-selector();
 }