fix(admin-ui): Replace all clr-dropdown with vdr-dropdown

Fixes #95
vendure-ecommerce · May 14, 2019 · 4de2a6a · 4de2a6a
1 parent 409bb16
commit 4de2a6a
Show file tree

Hide file tree

Showing 19 changed files with 133 additions and 137 deletions.
diff --git a/admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.html b/admin-ui/src/app/catalog/components/asset-gallery/asset-gallery.component.html
@@ -48,7 +48,7 @@
             <div clrTooltipTrigger class="trigger">
                 {{ 'catalog.assets-selected-count' | translate: { count: selection.length } }}
             </div>
-            <clr-tooltip-content clrPosition="top-left" clrSize="lg" *clrIfOpen>
+            <clr-tooltip-content vdrPosition="top-left" clrSize="lg">
                 <ul>
                     <li *ngFor="let asset of selection">{{ asset.name }}</li>
                 </ul>

diff --git a/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html b/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.html
@@ -85,24 +85,22 @@
             </ng-container>
 
             <div>
-                <clr-dropdown>
-                    <div clrDropdownTrigger>
-                        <button class="btn btn-outline">
-                            <clr-icon shape="plus"></clr-icon>
-                            {{ 'marketing.add-condition' | translate }}
-                        </button>
-                    </div>
-                    <clr-dropdown-menu clrPosition="top-right" *clrIfOpen>
+                <vdr-dropdown>
+                    <button class="btn btn-outline" vdrDropdownTrigger>
+                        <clr-icon shape="plus"></clr-icon>
+                        {{ 'marketing.add-condition' | translate }}
+                    </button>
+                    <vdr-dropdown-menu vdrPosition="bottom-left">
                         <button
                             *ngFor="let filter of allFilters"
                             type="button"
-                            clrDropdownItem
+                            vdrDropdownItem
                             (click)="addFilter(filter)"
                         >
                             {{ filter.description }}
                         </button>
-                    </clr-dropdown-menu>
-                </clr-dropdown>
+                    </vdr-dropdown-menu>
+                </vdr-dropdown>
             </div>
         </div>
         <div class="clr-col">

diff --git a/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html b/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html
@@ -37,11 +37,11 @@
                     <clr-icon shape="drag-handle" size="24"></clr-icon>
                 </div>
             -->
-            <clr-dropdown>
-                <span class="trigger" clrDropdownTrigger>
+            <vdr-dropdown>
+                <span class="trigger" vdrDropdownTrigger>
                     <clr-icon shape="ellipsis-vertical"></clr-icon>
                 </span>
-                <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="dropdown-item"
@@ -70,8 +70,8 @@ <h4 class="dropdown-header">{{ 'catalog.move-to' | translate }}</h4>
                         <clr-icon shape="child-arrow"></clr-icon>
                         {{ item.path }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
         <vdr-collection-tree-node
             [collectionTree]="collection"

diff --git a/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html b/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html
@@ -106,22 +106,22 @@
                         </td>
                     </ng-container>
                     <td>
-                        <clr-dropdown>
-                            <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+                        <vdr-dropdown>
+                            <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                                 {{ 'common.actions' | translate }}
                                 <clr-icon shape="caret down"></clr-icon>
                             </button>
-                            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                            <vdr-dropdown-menu vdrPosition="bottom-right">
                                 <button
                                     type="button"
                                     class="delete-button"
                                     (click)="deleteFacetValue(facet.values[i].id)"
-                                    clrDropdownItem
+                                    vdrDropdownItem
                                 >
                                     {{ 'common.delete' | translate }}
                                 </button>
-                            </clr-dropdown-menu>
-                        </clr-dropdown>
+                            </vdr-dropdown-menu>
+                        </vdr-dropdown>
                     </td>
                 </tr>
             </tbody>

diff --git a/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html b/admin-ui/src/app/catalog/components/facet-list/facet-list.component.html
@@ -58,22 +58,22 @@
             ></vdr-table-row-action>
         </td>
         <td class="right align-middle" [class.private]="facet.isPrivate">
-            <clr-dropdown>
-                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="delete-button"
                         (click)="deleteFacet(facet.id)"
-                        clrDropdownItem
+                        vdrDropdownItem
                     >
                         {{ 'common.delete' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </td>
     </ng-template>
 </vdr-data-table>
diff --git a/...app/catalog/components/generate-product-variants/generate-product-variants.component.html b/...app/catalog/components/generate-product-variants/generate-product-variants.component.html
@@ -1,17 +1,17 @@
-<clr-dropdown>
-    <button type="button" class="btn btn-primary" clrDropdownTrigger>
+<vdr-dropdown>
+    <button type="button" class="btn btn-primary" vdrDropdownTrigger>
         <clr-icon shape="add"></clr-icon>
         {{ 'catalog.generate-product-variants' | translate }}
         <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="generateProductVariants()">
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="generateProductVariants()">
             {{ 'catalog.generate-variants-default-only' | translate }}
         </button>
-        <button type="button" clrDropdownItem (click)="startProductVariantsWizard()">
+        <button type="button" vdrDropdownItem (click)="startProductVariantsWizard()">
             {{ 'catalog.generate-variants-with-options' | translate }}
         </button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    </vdr-dropdown-menu>
+</vdr-dropdown>
 
 <vdr-product-variants-wizard #productVariantsWizard [product]="product"></vdr-product-variants-wizard>
diff --git a/admin-ui/src/app/catalog/components/product-assets/product-assets.component.html b/admin-ui/src/app/catalog/components/product-assets/product-assets.component.html
@@ -45,34 +45,34 @@
 <ng-template #assetList>
     <div class="all-assets" [class.compact]="compact">
         <ng-container *ngFor="let asset of assets">
-            <clr-dropdown>
+            <vdr-dropdown>
                 <div
                     class="asset-thumb"
-                    clrDropdownTrigger
+                    vdrDropdownTrigger
                     [class.featured]="isFeatured(asset)"
                     [title]=""
                     tabindex="0"
                 >
                     <img [src]="asset.preview + '?preset=tiny'" />
                 </div>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-                    <button type="button" clrDropdownItem (click)="previewAsset(asset)">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button type="button" vdrDropdownItem (click)="previewAsset(asset)">
                         {{ 'catalog.preview' | translate }}
                     </button>
                     <button
                         type="button"
                         [disabled]="isFeatured(asset)"
-                        clrDropdownItem
+                        vdrDropdownItem
                         (click)="setAsFeatured(asset)"
                     >
                         {{ 'catalog.set-as-featured-asset' | translate }}
                     </button>
                     <div class="dropdown-divider"></div>
-                    <button type="button" class="remove-asset" clrDropdownItem (click)="removeAsset(asset)">
+                    <button type="button" class="remove-asset" vdrDropdownItem (click)="removeAsset(asset)">
                         {{ 'catalog.remove-asset' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </ng-container>
     </div>
 </ng-template>
diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.html b/admin-ui/src/app/catalog/components/product-list/product-list.component.html
@@ -7,16 +7,16 @@
                 (searchTermChange)="setSearchTerm($event)"
                 (facetValueChange)="setFacetValueIds($event)"
             ></vdr-product-search-input>
-            <clr-dropdown class="search-settings-menu">
-                <button type="button" clrDropdownTrigger>
+            <vdr-dropdown class="search-settings-menu">
+                <button type="button" vdrDropdownTrigger>
                     <clr-icon shape="cog"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
-                    <button type="button" clrDropdownItem (click)="rebuildSearchIndex()">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button type="button" vdrDropdownItem (click)="rebuildSearchIndex()">
                         {{ 'catalog.rebuild-search-index' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </div>
         <clr-checkbox-wrapper>
             <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" />
@@ -70,22 +70,22 @@
             ></vdr-table-row-action>
         </td>
         <td class="right align-middle" [class.disabled]="!result.enabled">
-            <clr-dropdown>
-                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                     {{ 'common.actions' | translate }}
                     <clr-icon shape="caret down"></clr-icon>
                 </button>
-                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                <vdr-dropdown-menu vdrPosition="bottom-right">
                     <button
                         type="button"
                         class="delete-button"
                         (click)="deleteProduct(result.productId)"
-                        clrDropdownItem
+                        vdrDropdownItem
                     >
                         {{ 'common.delete' | translate }}
                     </button>
-                </clr-dropdown-menu>
-            </clr-dropdown>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
         </td>
     </ng-template>
 </vdr-data-table>
diff --git a/admin-ui/src/app/catalog/components/product-list/product-list.component.scss b/admin-ui/src/app/catalog/components/product-list/product-list.component.scss
@@ -23,6 +23,12 @@
 }
 .search-settings-menu {
     margin: 0 12px;
+    > button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: $color-grey-500;
+    }
 }
 td.disabled {
     background-color: $color-grey-200;

diff --git a/admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.html b/admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.html
@@ -1,8 +1,8 @@
-<clr-dropdown>
+<vdr-dropdown>
     <span class="user-name">{{ uiLanguage$ | async }}</span>
-    <span class="trigger" clrDropdownTrigger><clr-icon shape="caret down"></clr-icon></span>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="setLanguage('en')">EN</button>
-        <button type="button" clrDropdownItem (click)="setLanguage('de')">DE</button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    <span class="trigger" vdrDropdownTrigger><clr-icon shape="caret down"></clr-icon></span>
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="setLanguage('en')">EN</button>
+        <button type="button" vdrDropdownItem (click)="setLanguage('de')">DE</button>
+    </vdr-dropdown-menu>
+</vdr-dropdown>
diff --git a/admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.ts b/admin-ui/src/app/core/components/ui-language-switcher/ui-language-switcher.component.ts
@@ -24,7 +24,7 @@ export class UiLanguageSwitcherComponent implements OnInit {
         );
     }
 
-    setLanguage(languageCode: LanguageCode) {
-        this.dataService.client.setUiLanguage(languageCode).subscribe();
+    setLanguage(languageCode: string) {
+        this.dataService.client.setUiLanguage(languageCode as LanguageCode).subscribe();
     }
 }
diff --git a/admin-ui/src/app/core/components/user-menu/user-menu.component.html b/admin-ui/src/app/core/components/user-menu/user-menu.component.html
@@ -1,12 +1,12 @@
-<clr-dropdown>
-    <button class="btn btn-link trigger" clrDropdownTrigger>
+<vdr-dropdown>
+    <button class="btn btn-link trigger" vdrDropdownTrigger>
         <span class="user-name">{{ userName }}</span>
         <clr-icon shape="user" size="24"></clr-icon>
         <clr-icon shape="caret down"></clr-icon>
     </button>
-    <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-        <button type="button" clrDropdownItem (click)="logOut.emit()">
+    <vdr-dropdown-menu vdrPosition="bottom-right">
+        <button type="button" vdrDropdownItem (click)="logOut.emit()">
             {{ 'common.log-out' | translate }}
         </button>
-    </clr-dropdown-menu>
-</clr-dropdown>
+    </vdr-dropdown-menu>
+</vdr-dropdown>
diff --git a/admin-ui/src/app/customer/components/address-card/address-card.component.html b/admin-ui/src/app/customer/components/address-card/address-card.component.html
@@ -80,29 +80,29 @@
         <button class="btn btn-sm btn-link" *ngIf="!editing" (click)="editing = true">
             {{ 'common.edit' | translate }}
         </button>
-        <clr-dropdown>
-            <button type="button" class="btn btn-sm btn-link" clrDropdownTrigger>
+        <vdr-dropdown>
+            <button type="button" class="btn btn-sm btn-link" vdrDropdownTrigger>
                 {{ 'common.more' | translate }}
                 <clr-icon shape="caret down"></clr-icon>
             </button>
-            <clr-dropdown-menu *clrIfOpen>
+            <vdr-dropdown-menu>
                 <button
-                    clrDropdownItem
+                    vdrDropdownItem
                     class="button"
                     [disabled]="isDefaultShipping || editing"
                     (click)="setAsDefaultShippingAddress()"
                 >
                     {{ 'customer.set-as-default-shipping-address' | translate }}
                 </button>
                 <button
-                    clrDropdownItem
+                    vdrDropdownItem
                     class="button"
                     [disabled]="isDefaultBilling || editing"
                     (click)="setAsDefaultBillingAddress()"
                 >
                     {{ 'customer.set-as-default-billing-address' | translate }}
                 </button>
-            </clr-dropdown-menu>
-        </clr-dropdown>
+            </vdr-dropdown-menu>
+        </vdr-dropdown>
     </div>
 </div>