Merge pull request #201 from magento-falcons/MAGETWO-55903

[Falcons] Improvement of Web Setup Wizard

Author: kandy

app/design/adminhtml/Magento/backend/web/app/setup/styles/less/lib/_variables.less

@@ -112,6 +112,8 @@
 @icon-stores__content: '\e60d';
 @icon-systems__content: '\e610';
 @icon-views__content: '\e60f';
+@icon-module__content: '\e647';
+@icon-alert-round__content: '\e648';
 
 @icons-round__size: 2.5rem;
 

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_data-grid.less

@@ -7,7 +7,7 @@
 //  Variables
 //  _____________________________________________
 
-@component-indicator__size: 20px;
+@component-indicator__size: 16px;
 
 //
 //  Component grid elements
@@ -19,6 +19,7 @@
     display: inline-block;
     height: @component-indicator__size;
     text-align: center;
+    vertical-align: middle;
     width: @component-indicator__size;
 
     &::before,
@@ -37,7 +38,7 @@
         box-shadow: 0 0 2px rgba(0,0,0,.4);
         content: attr(data-label);
         font-size: @font-size__s;
-        margin: 34px 0 0 -10px;
+        margin: 30px 0 0 -10px;
         min-width: 50px;
         padding: 4px 5px;
     }
@@ -73,7 +74,7 @@
             content: '';
             display: block;
             font-family: @icons__font-family;
-            font-size: 20px;
+            font-size: @component-indicator__size;
             height: 100%;
             line-height: @component-indicator__size;
             width: 100%;
@@ -105,10 +106,105 @@
 
             &:before {
                 color: @color-info;
-                content: @icon-notice-messages__content;
+                content: @icon-alert-round__content;
                 font-family: @icons__font-family;
-                font-size: 21px;
+                font-size: @component-indicator__size;
             }
         }
     }
 }
+
+.col-manager-item-name {
+    .data-grid-data {
+        padding-left: 5px;
+    }
+
+    .ng-hide {
+        + .data-grid-data {
+            padding-left: 24px;
+        }
+    }
+
+    ._show-dependencies,
+    ._hide-dependencies {
+        cursor: pointer;
+        padding-left: 24px;
+        position: relative;
+
+        &:before {
+            display: block;
+            font-family: @icons__font-family;
+            font-size: 12px;
+            left: 0;
+            position: absolute;
+            top: 1px;
+        }
+    }
+
+    ._show-dependencies {
+        &:before {
+            content: @icon-caret-up__content;
+        }
+    }
+
+    ._hide-dependencies {
+        &:before {
+            content: @icon-caret-down__content;
+        }
+    }
+
+    ._no-dependencies {
+        padding-left: 24px;
+    }
+}
+
+.product-modules-block {
+    .lib-font-size(12);
+    padding: 15px 0 0;
+
+    .col-manager-item-name & {
+        padding-left: @indent__s;
+    }
+}
+
+.product-modules-title,
+.product-modules-descriprion {
+    font-weight: @font-weight__bold;
+    margin: 0 0 7px;
+}
+
+.product-modules-list {
+    .lib-font-size(11);
+    list-style: none;
+    margin: 0;
+
+    .col-manager-item-name & {
+        margin-left: 15px;
+
+        li {
+            padding: 0 0 0 15px;
+            position: relative;
+        }
+    }
+
+    li {
+        margin: 0 0 @indent__xs;
+    }
+
+    .component-indicator {
+        height: 10px;
+        left: 0;
+        position: absolute;
+        top: 3px;
+        width: 10px;
+    }
+}
+
+.module-summary {
+    white-space: nowrap;
+}
+
+.module-summary-title {
+    .lib-font-size(21);
+    margin-right: @indent__s;
+}

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_header.less

@@ -9,7 +9,7 @@
 
 @page-header__border-color: @color-gray89;
 @page-header__border-width: 1px;
-@page-header__padding-bottom: 2.9rem;
+@page-header__padding-bottom: 2rem;
 @page-header__margin-bottom: 2.7rem;
 
 @search-global-label-icon__color: @color-very-dark-gray1;

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/components/_menu.less

@@ -64,6 +64,14 @@
         }
     }
 
+    .item-extension {
+        > a {
+            &:before {
+                content: @icon-module__content;
+            }
+        }
+    }
+
     .item-upgrade {
         > a {
             &:before {

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_component-manager.less

@@ -0,0 +1,88 @@
+// /**
+//  * Copyright © 2016 Magento. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Web Setup Wizard -> Extension Manager
+//  _____________________________________________
+
+//
+//  Variables
+//  ---------------------------------------------
+
+@extension-manager-wrap__border-color: @color-gray-light2;
+
+@extension-manager-title__background-color: @color-white-fog;
+@extension-manager-title__border-color: @color-gray89;
+@extension-manager-title__color: @color-brown-darkie;
+
+@extension-manager-button__border-color: @color-gray68;
+
+//
+
+.extension-manager-wrap {
+    border: 1px solid @extension-manager-wrap__border-color;
+    margin: 0 0 @indent__xl;
+}
+
+.extension-manager-account {
+    .lib-font-size(21);
+    display: inline-block;
+    font-weight: @font-weight__regular;
+}
+
+.extension-manager-title {
+    &:extend(.abs-clearer all);
+    .lib-font-size(32);
+    background-color: @extension-manager-title__background-color;
+    border-bottom: 1px solid @extension-manager-title__border-color;
+    color: @extension-manager-title__color;
+    font-weight: @font-weight__semibold;
+    line-height: 1.2;
+    padding: @indent__base;
+}
+
+.extension-manager-content {
+    &:extend(.abs-clearer all);
+    padding: @indent__m @indent__base @indent__base;
+}
+
+.extension-manager-items {
+    list-style: none;
+    margin: 0;
+    text-align: center;
+
+    .btn {
+        border: 1px solid @extension-manager-button__border-color;
+        display: block;
+        margin: @indent__s auto 0;
+    }
+
+    .item-title {
+        .lib-font-size(21);
+        display: inline-block;
+        text-align: left;
+    }
+
+    .item-number {
+        .lib-font-size(41);
+        display: inline-block;
+        line-height: .8;
+        margin: 0 5px 1.5rem 0;
+        vertical-align: top;
+    }
+
+    .item-date {
+        .lib-font-size(26);
+        margin-top: 1px;
+    }
+
+    .item-date-title {
+        .lib-font-size(15);
+    }
+
+    .item-install {
+        margin: 0 0 @indent__base;
+    }
+}

app/design/adminhtml/Magento/backend/web/app/updater/styles/less/pages/_extension-manager.less

@@ -61,12 +61,19 @@
     }
 }
 
-.setup-home-item-component {
+.setup-home-item-component,
+.setup-home-item-extension {
     &:before {
         content: @icon-lego__content;
     }
 }
 
+.setup-home-item-module {
+    &:before {
+        content: @icon-module__content;
+    }
+}
+
 .setup-home-item-upgrade {
     &:before {
         content: @icon-updater__content;