refactor(admin-ui): Reuse select toggle component for asset gallery

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.html

@@ -6,7 +6,11 @@
         [class.selected]="isSelected(asset)"
     >
         <div class="card-img">
-            <div class="selected-checkbox"><clr-icon shape="check-circle" size="32"></clr-icon></div>
+            <vdr-select-toggle
+                [selected]="isSelected(asset)"
+                [disabled]="true"
+                [hiddenWhenOff]="true"
+            ></vdr-select-toggle>
             <img [src]="asset | assetPreview: 'thumb'" />
         </div>
         <div class="detail">

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss

@@ -28,16 +28,13 @@
     position: relative;
 }
 
-.selected-checkbox {
-    opacity: 0;
+vdr-select-toggle {
     position: absolute;
-    color: var(--color-success-500);
-    background-color: white;
-    border-radius: 50%;
+    ::ng-deep .toggle {
+        box-shadow: 0px 5px 5px -4px rgba(0, 0, 0, 0.75);
+    }
     top: -12px;
     left: -12px;
-    box-shadow: 0px 5px 5px -4px rgba(0, 0, 0, 0.75);
-    transition: opacity 0.1s;
 }
 
 .card.selected {

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.html

@@ -1,5 +1,6 @@
 <div
     class="toggle"
+    [class.hide-when-off]="hiddenWhenOff"
     [class.disabled]="disabled"
     [class.small]="size === 'small'"
     [attr.tabindex]="disabled ? null : 0"
@@ -8,7 +9,7 @@
     (keydown.space)="$event.preventDefault(); selectedChange.emit(!selected)"
     (click)="selectedChange.emit(!selected)"
 >
-    <clr-icon shape="check" [attr.size]="size === 'small' ? 16 : 32"></clr-icon>
+    <clr-icon shape="check-circle" [attr.size]="size === 'small' ? 24 : 32"></clr-icon>
 </div>
 <div class="toggle-label" [class.disabled]="disabled" *ngIf="label" (click)="selectedChange.emit(!selected)">
     {{ label }}

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.scss

@@ -10,17 +10,16 @@
 .toggle {
     @include no-select();
     cursor: pointer;
+    color: var(--color-grey-300);
     background-color: var(--color-component-bg-100);
-    border: 2px solid var(--color-component-border-300);
-    padding: 0 6px;
     border-radius: 50%;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-grey-300);
-    transition: background-color 0.2s, border 0.2s;
+    top: -12px;
+    left: -12px;
+    transition: opacity 0.2s, color 0.2s;
+
+    &.hide-when-off {
+        opacity: 0;
+    }
 
     &.small {
         width: 24px;
@@ -28,19 +27,16 @@
     }
 
     &:not(.disabled):hover {
-        border-color: var(--color-success-500);
-        background-color: var(--color-success-400);
+        color: var(--color-success-400);
         opacity: 0.9;
     }
 
     &.selected {
-        background-color: var(--color-success-500);
-        border-color: var(--color-success-600);
-        color: white;
+        opacity: 1;
+        color: var(--color-success-500);
 
         &:not(.disabled):hover {
-            background-color: var(--color-success-500);
-            border-color: var(--color-success-400);
+            color: var(--color-success-400);
             opacity: 0.9;
         }
     }
@@ -54,11 +50,13 @@
         cursor: default;
     }
 }
+
 .toggle-label {
     flex: 1;
     margin-left: 6px;
     text-align: left;
     font-size: 12px;
+
     &:not(.disabled) {
         cursor: pointer;
     }

packages/admin-ui/src/lib/core/src/shared/components/select-toggle/select-toggle.component.ts

@@ -12,6 +12,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
 export class SelectToggleComponent {
     @Input() size: 'small' | 'large' = 'large';
     @Input() selected = false;
+    @Input() hiddenWhenOff = false;
     @Input() disabled = false;
     @Input() label: string | undefined;
     @Output() selectedChange = new EventEmitter<boolean>();