feat(uploader): refine style

lumapps · Oct 25, 2019 · 59f3dcf · 59f3dcf
1 parent b1c2a8c
commit 59f3dcf
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 21 deletions.
diff --git a/demo/angularjs/components/uploader/controller.js b/demo/angularjs/components/uploader/controller.js
@@ -1,4 +1,4 @@
-import { mdiUpload } from 'LumX/icons';
+import { mdiImagePlus } from 'LumX/icons';
 
 /////////////////////////////
 
@@ -21,7 +21,7 @@ function DemoUploaderController() {
      * @readonly
      */
     vm.icons = {
-        mdiUpload,
+        mdiImagePlus,
     };
 }
 

diff --git a/demo/angularjs/components/uploader/partials/default.html b/demo/angularjs/components/uploader/partials/default.html
@@ -1,5 +1,8 @@
-<lumx-uploader lumx-icon="{{ vm.icons.mdiUpload }}" lumx-label="Upload">
-    <lumx-uploader-action>
-        <lumx-button lumx-emphasis="medium">Pick from</lumx-button>
-    </lumx-uploader-action>
-</lumx-uploader>
+<lumx-uploader
+    lumx-aspect-ratio="square"
+    lumx-icon="{{ vm.icons.mdiImagePlus }}"
+    lumx-label="Add profile picture"
+    lumx-size="xl"
+    lumx-theme="{{ demoBlock.theme }}"
+    lumx-variant="circle"
+></lumx-uploader>
diff --git a/demo/angularjs/layout/main-nav/main-nav_controller.js b/demo/angularjs/layout/main-nav/main-nav_controller.js
@@ -157,6 +157,10 @@ function MainNavController($state) {
                             label: 'Tooltip',
                             state: 'app.product.components.tooltip',
                         },
+                        {
+                            label: 'Uploader',
+                            state: 'app.product.components.uploader',
+                        },
                         {
                             label: 'User block',
                             state: 'app.product.components.user-block',

diff --git a/src/components/uploader/angularjs/uploader.html b/src/components/uploader/angularjs/uploader.html
@@ -1,13 +1,11 @@
-<div class="lumx-uploader" ng-class="lumx.getClasses()">
+<div class="lumx-uploader" ng-class="lumx.getClasses()" tabindex="0">
     <div class="lumx-uploader__background"></div>
 
     <div class="lumx-uploader__wrapper">
         <div class="lumx-uploader__icon" ng-if="lumx.icon">
-            <lumx-icon lumx-path="{{ lumx.icon }}" lumx-size="m"></lumx-icon>
+            <lumx-icon lumx-path="{{ lumx.icon }}" lumx-size="s"></lumx-icon>
         </div>
 
         <span class="lumx-uploader__label" ng-if="lumx.label">{{ lumx.label }}</span>
-
-        <div class="lumx-uploader__action" ng-transclude="action"></div>
     </div>
 </div>
diff --git a/src/components/uploader/angularjs/uploader_directive.js b/src/components/uploader/angularjs/uploader_directive.js
@@ -26,6 +26,7 @@ function UploaderController() {
      */
     const _DEFAULT_PROPS = {
         aspectRatio: 'horizontal',
+        theme: 'light',
         variant: 'squared',
     };
 
@@ -49,16 +50,22 @@ function UploaderController() {
             classes.push(`${CSS_PREFIX}-uploader--aspect-ratio-${_DEFAULT_PROPS.aspectRatio}`);
         }
 
+        if (angular.isDefined(lumx.size) && lumx.size) {
+            classes.push(`${CSS_PREFIX}-uploader--size-${lumx.size}`);
+        }
+
+        if (angular.isDefined(lumx.theme) && lumx.theme) {
+            classes.push(`${CSS_PREFIX}-uploader--theme-${lumx.theme}`);
+        } else {
+            classes.push(`${CSS_PREFIX}-uploader--theme-${_DEFAULT_PROPS.theme}`);
+        }
+
         if (angular.isDefined(lumx.variant) && lumx.variant) {
             classes.push(`${CSS_PREFIX}-uploader--variant-${lumx.variant}`);
         } else {
             classes.push(`${CSS_PREFIX}-uploader--variant-${_DEFAULT_PROPS.variant}`);
         }
 
-        if (angular.isDefined(lumx.size) && lumx.size) {
-            classes.push(`${CSS_PREFIX}-uploader--size-${lumx.size}`);
-        }
-
         return classes;
     }
 
@@ -83,12 +90,10 @@ function UploaderDirective() {
             icon: '@?lumxIcon',
             label: '@?lumxLabel',
             size: '@?lumxSize',
+            theme: '@?lumxTheme',
             variant: '@?lumxVariant',
         },
         template,
-        transclude: {
-            action: `${COMPONENT_PREFIX}UploaderAction`,
-        },
     };
 }
 

diff --git a/src/components/uploader/style/lumapps/_index.scss b/src/components/uploader/style/lumapps/_index.scss
@@ -3,8 +3,45 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-uploader {
+    $self: &;
+
+    @include lumx-state-transition;
+
     position: relative;
-    background-color: lumx-theme-color-variant('dark', 'L5');
+    cursor: pointer;
+    outline: none;
+
+    &--theme-light {
+        @include lumx-state('state-default', 'emphasis-medium', 'dark');
+
+        &:hover {
+            @include lumx-state('state-hover', 'emphasis-medium', 'dark');
+        }
+
+        &:active {
+            @include lumx-state('state-active', 'emphasis-medium', 'dark');
+        }
+
+        &[data-focus-visible-added] {
+            @include lumx-state('state-focus', 'emphasis-medium', 'dark');
+        }
+    }
+
+    &--theme-dark {
+        @include lumx-state('state-default', 'emphasis-medium', 'light');
+
+        &:hover {
+            @include lumx-state('state-hover', 'emphasis-medium', 'light');
+        }
+
+        &:active {
+            @include lumx-state('state-active', 'emphasis-medium', 'light');
+        }
+
+        &[data-focus-visible-added] {
+            @include lumx-state('state-focus', 'emphasis-medium', 'light');
+        }
+    }
 
     &--variant-square {
         border-radius: 0;
@@ -28,16 +65,34 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        padding: 0 $lumx-spacing-unit * 2;
+        user-select: none;
     }
 
     &__icon {
-        margin-bottom: 2px;
+        margin-bottom: $lumx-spacing-unit;
+
+        #{$self}--theme-light & {
+            color: lumx-theme-color-variant('dark', 'N');
+        }
+
+        #{$self}--theme-dark & {
+            color: lumx-theme-color-variant('light', 'N');
+        }
     }
 
     &__label {
         @include lumx-typography('subtitle1');
 
-        margin-bottom: $lumx-spacing-unit;
+        text-align: center;
+
+        #{$self}--theme-light & {
+            color: lumx-theme-color-variant('dark', 'N');
+        }
+
+        #{$self}--theme-dark & {
+            color: lumx-theme-color-variant('light', 'N');
+        }
     }
 }