#1752 Fixes & CSS refactor

back/models/account.js

@@ -23,15 +23,13 @@ module.exports = Self => {
         description: 'Gets the current user data',
         accepts: [
             {
-                arg: 'context',
-                type: 'object',
-                http: function(ctx) {
-                    return ctx;
-                }
+                arg: 'ctx',
+                type: 'Object',
+                http: {source: 'context'}
             }
         ],
         returns: {
-            type: 'object',
+            type: 'Object',
             root: true
         },
         http: {
@@ -41,12 +39,18 @@ module.exports = Self => {
     });
 
     Self.getCurrentUserData = async function(ctx) {
-        let filter = {fields: ['name']};
         let userId = ctx.req.accessToken.userId;
-        let account = await Self.findById(userId, filter);
-        let worker = await Self.app.models.Worker.findOne({where: {userFk: userId}, fields: ['id']});
 
-        return {accountName: account.name, workerId: worker.id};
+        let account = await Self.findById(userId, {
+            fields: ['id', 'name', 'nickname']
+        });
+
+        let worker = await Self.app.models.Worker.findOne({
+            fields: ['id'],
+            where: {userFk: userId}
+        });
+
+        return Object.assign(account, {workerId: worker.id});
     };
 
     /**

front/core/components/index.js

@@ -39,6 +39,7 @@ import './field';
 import './input-number';
 import './input-time';
 import './input-file';
+import './list';
 import './radio';
 import './table';
 import './td-editable';

front/core/components/list/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/app/style.scss

@@ -3,7 +3,8 @@
 body {
     background-color: $color-bg;
     overflow: auto;
-    height: 100%
+    height: 100%;
+    font-family: vn-font;
 }
 vn-app {
     height: inherit;

front/salix/components/descriptor/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/index.js

@@ -7,3 +7,5 @@ import './side-menu/side-menu';
 import './left-menu/left-menu';
 import './topbar/topbar';
 import './user-configuration-popover';
+import './descriptor';
+import './summary';

front/salix/components/main-menu/main-menu.html

@@ -3,7 +3,7 @@
         ng-click="$ctrl.openUserConfiguration($event)"
         id="user"
         class="unselectable">
-        {{currentUserName}}
+        {{$root.user.nickname}}
     </div>
     <vn-icon-button
         id="apps"

front/salix/components/main-menu/main-menu.js

@@ -16,11 +16,10 @@ export default class MainMenu {
     }
 
     getCurrentUserName() {
-        this.$http.get('/api/Accounts/getCurrentUserData')
-            .then(json => {
-                this.$.currentUserName = json.data.accountName;
-                window.localStorage.currentUserWorkerId = json.data.workerId;
-            });
+        this.$http.get('/api/Accounts/getCurrentUserData').then(json => {
+            this.$.$root.user = json.data;
+            window.localStorage.currentUserWorkerId = json.data.workerId;
+        });
     }
 
     openUserConfiguration(event) {

front/salix/components/main-menu/main-menu.spec.js

@@ -16,12 +16,12 @@ describe('Component vnMainMenu', () => {
 
     describe('getCurrentUserName()', () => {
         it(`should set the user name property in the controller`, () => {
-            $httpBackend.when('GET', `/api/Accounts/getCurrentUserData`).respond({accountName: 'Batman'});
+            $httpBackend.when('GET', `/api/Accounts/getCurrentUserData`).respond({name: 'batman'});
             $httpBackend.expect('GET', `/api/Accounts/getCurrentUserData`);
             controller.getCurrentUserName();
             $httpBackend.flush();
 
-            expect(controller.$.currentUserName).toEqual('Batman');
+            expect(controller.$.$root.user.name).toEqual('batman');
         });
     });
 });

front/salix/components/summary/index.js

@@ -0,0 +1 @@
+import './style.scss';

front/salix/components/user-configuration-popover/index.html

@@ -11,7 +11,23 @@
     order="code">
 </vn-crud-model>
 <vn-popover vn-id="popover">
-    <vn-vertical class="user-configuration">
+    <vn-vertical class="user-configuration pad-medium">
+        <div class="profile-card pad-medium-bottom">
+            <vn-icon icon="person"></vn-icon>
+            <div pad-medium-left>
+                <div class="user">
+                    <div class="ellipsize">
+                        {{$root.user.nickname}}
+                    </div>
+                    <div class="text-secondary text-caption ellipsize">
+                        {{$root.user.name}}
+                    </div>
+                </div>
+                <a ui-sref="worker.card.summary({id: $root.user.id})">
+                    <vn-button label="My account"> </vn-button>
+                </a>
+            </div>
+        </div>
         <vn-autocomplete
             vn-one
             label="Local warehouse"

front/salix/components/user-configuration-popover/locale/es.yml

@@ -1,3 +1,4 @@
+My account: Mi cuenta
 Local warehouse: Almacén local
 Local bank: Banco local
 Local company: Empresa local

front/salix/components/user-configuration-popover/style.scss

@@ -1,6 +1,29 @@
 @import "variables";
 
 .vn-popover .user-configuration {
-    min-width: 250px;
-    padding: $pad-medium;
+    width: 16em;
+
+    & > .profile-card {
+        display: flex;
+        align-items: center;
+
+        & > vn-icon {
+            font-size: 60px;
+            border-radius: 50%;
+            color: $color-font-dark;
+            background: $color-secondary;
+            padding: .1em;
+        }
+        & > div {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            flex: 1;
+
+            & > .user {
+                max-width: 10em;
+                padding-bottom: .5em;
+            }
+        }
+    }
 }

front/salix/styles/display.scss

@@ -1,35 +0,0 @@
-.display-block {
-    display: block;
-}
-
-.form-group {
-    margin-bottom: 15px;
-}
-
-/* Label del popover */
-.popover-button {
-    padding: 3px 3px 3px 0px;
-    height: auto;
-    min-width: auto;
-}
-
-.popover-label {
-    font-family: vn-font-bold;
-    color: black;
-    padding-top:5px;
-}
-
-/* Icon cuadrado */
-.icon-square{
-  min-width: 0px;
-  height: 46px;
-  line-height: 0px;
-}
-
-input[type="submit"]:disabled, button:disabled {
-    opacity: 0.7;
-}
-
-.descriptor-icon{
-    font-size:60px;
-}

front/salix/styles/font-style.scss

@@ -1,16 +0,0 @@
-@import "./variables";
-@import "./font-family";
-
-body {
-    color: $color-font;
-    font-family: vn-font;
-}
-html [uppercase], .uppercase {
-    text-transform: uppercase;
-}
-html [color-main], .color-main {
-    color: $color-main;
-}
-html [color-secondary], .color-secondary {
-    color: $color-secondary;
-}

front/salix/styles/index.js

@@ -1,18 +1,14 @@
 import './responsive.scss';
-import './title.scss';
 import './layout.scss';
-import './display.scss';
 import './margin.scss';
 import './padding.scss';
 import './border.scss';
 import './background.scss';
-import './font-style.scss';
+import './font-family.scss';
+import './text.scss';
 import './misc.scss';
 import './effects.scss';
 import './order-product.scss';
-import './summary.scss';
-import './descriptor.scss';
-import './list.scss';
 import './modal-form.scss';
 import './photo-list.scss';
 import './width.scss';

front/salix/styles/misc.scss

@@ -60,24 +60,6 @@ html [fixed-bottom-right] {
     bottom: 2em;
     right: 2em;
 }
-html [text-center], .text-center {
-    text-align: center;
-}
-html [text-right], .text-right {
-    text-align: right;
-}
-html [text-left], .text-left {
-    text-align: left;
-}
-html [vn-right], .vn-right {
-     float: right;
-}
-html [vn-left], .vn-left {
-     float: left;
-}
-html [vn-center], .vn-center {
-     justify-content: center;
-}
 .list > vn-none {
     min-width: 60px;
 }
@@ -89,9 +71,6 @@ html [vn-center], .vn-center {
         color: $color-main;
     }
 }
-.flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
-    background-color: $color-main;
-}
 html [pointer], .pointer{
     cursor: pointer;
 }
@@ -112,6 +91,9 @@ vn-tool-bar {
         margin-right: .6em;
     }
 }
+input[type="submit"]:disabled, button:disabled {
+    opacity: 0.7;
+}
 
 /** START - FORM ELEMENTS DISABLED **/
 
@@ -198,3 +180,24 @@ vn-empty-rows {
     padding: 1.5em;
     box-sizing: border-box;
 }
+
+/* XXX: Deprecated, use classes with text prefix */
+
+[color-main] {
+    color: $color-main;
+}
+[color-secondary] {
+    color: $color-secondary;
+}
+[uppercase], .uppercase {
+    text-transform: uppercase;
+}
+html [text-center], .text-center {
+    text-align: center;
+}
+html [text-right], .text-right {
+    text-align: right;
+}
+html [text-left], .text-left {
+    text-align: left;
+}

front/salix/styles/photo-list.scss

@@ -1,4 +1,5 @@
 @import "./variables";
+
 .photo-list {
     justify-content: center;
     align-items: flex-start;

front/salix/styles/text.scss

@@ -0,0 +1,72 @@
+@import "./variables";
+@import "./font-family";
+
+/* Headings */
+
+.text-h1, h1 {
+    font-size: 32pt;
+}
+.text-h2, h2 {
+    font-size: 28pt;
+}
+.text-h3, h3 {
+    font-size: 24pt;
+}
+.text-h4, h4 {
+    font-size: 20pt;
+}
+.text-h5, h5 {
+    font-size: 16pt;
+}
+.text-h6, h6 {
+    font-size: 14pt;
+}
+.text-subtitle1 {
+    font-size: 13pt;
+}
+.text-subtitle2 {
+    font-size: 12pt;
+}
+.text-body1 {
+    font-size: 11pt;
+}
+.text-body2 {
+    font-size: 11pt;
+}
+.text-caption {
+    font-size: 11pt;
+}
+.text-overline {
+    font-size: 10pt;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: .2em;
+    font-family: vn-font-bold;
+}
+
+/* Colors */
+
+.text-primary {
+    color: $color-font;
+}
+.text-secondary {
+    color: $color-font-secondary;
+}
+
+/* Helpers */
+
+.text-uppercase {
+    text-transform: uppercase;
+}
+.text-center {
+    text-align: center;
+}
+.text-right {
+    text-align: right;
+}
+.text-left {
+    text-align: left;
+}

front/salix/styles/title.scss

@@ -1,28 +0,0 @@
-@import "./variables";
-
-h1 {
-    font-size: 32pt;
-}
-h2 {
-    font-size: 28pt;
-}
-h3 {
-    font-size: 24pt;
-}
-h4 {
-    font-size: 20pt;
-}
-h5 {
-    font-size: 16pt;
-}
-h6 {
-    font-size: 12pt;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    padding: 0;
-    margin-top: 0;
-    margin-bottom: .2em;
-    font-family: vn-font-bold;
-    color: $color-font
-}