Merge pull request #10025 from jibees/9998-new-admin-style

Admin, behind feature toggle `admin_style_v2`: new navigation menu

app/helpers/spree/admin/navigation_helper.rb

@@ -34,6 +34,7 @@ module Spree
           link = link_to_with_icon(options[:icon], titleized_label, destination_url)
           css_classes << 'tab-with-icon'
         else
+          titleized_label = raw("<span class='text'>#{titleized_label}</span>")
           link = link_to(titleized_label, destination_url)
         end
 

app/views/spree/admin/shared/_head.html.haml

@@ -10,7 +10,7 @@
     = t(controller.controller_name, :default => controller.controller_name.titleize)
   = " - OFN #{t(:administration)}"
 
-%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
+%link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
 
 = stylesheet_pack_tag 'admin-styles', media: "screen, print"
 = render "layouts/bugsnag_js"

app/views/spree/layouts/admin.html.haml

@@ -3,7 +3,7 @@
   %head{"data-hook" => "admin_inside_head"}
     = render :partial => 'spree/admin/shared/head'
 
-  %body.admin
+  %body.admin{ "class": ("admin-v2" if feature?(:admin_style_v2, spree_current_user)) }
     - if content_for?(:main_ng_app_name)
       - if content_for?(:main_ng_ctrl_name)
         %div{ "ng-app" => yield(:main_ng_app_name).strip.html_safe, "ng-controller" => yield(:main_ng_ctrl_name).strip.html_safe }

app/webpacker/css/admin/all.scss

@@ -120,3 +120,5 @@
 @import "components/tom_select";
 
 @import 'app/components/help_modal_component/help_modal_component';
+
+@import "v2/main.scss";

app/webpacker/css/admin/components/navigation.scss

@@ -78,7 +78,6 @@ nav.menu {
       text-transform: uppercase;
       position: relative;
       text-align: center;
-      font-weight: 600;      
 
       i {
         display: inline;

app/webpacker/css/admin/v2/main.scss

@@ -0,0 +1,5 @@
+@import "variables.scss";
+
+body.admin.admin-v2 {
+  @import "navigation.scss";
+}

app/webpacker/css/admin/v2/navigation.scss

@@ -0,0 +1,69 @@
+#header {
+  #login-nav {
+    li {
+      color: $v2-medium-dark-grey;
+
+      &:hover {
+        a, i {
+          color: $v2-orange;
+        }
+      }
+
+      a {
+        color: $v2-medium-dark-grey;
+      }
+    }
+  }
+}
+
+#admin-menu {
+  background-color: $v2-orange;
+
+  li a span.text {
+    font-weight: 700;
+  }
+
+  li.tab-with-icon a:before {
+    display: none;
+  }
+
+  li a:hover, li.selected a {
+    background-color: $v2-orange-light;
+
+    span {
+      text-shadow: 1px 1px 9px $v2-orange;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}
+
+
+#sub-menu {
+  background-color: $v2-orange-light;
+
+  li a {
+    font-size: 100%;
+  }
+
+  li a:hover, li.selected a {
+    text-shadow: 1px 1px 9px $v2-orange;
+    background-color: $v2-orange-lighter;
+    
+    &:after {
+      display: none;
+    }
+  }
+}
+
+.admin__section-header {
+  background-color: transparent;
+  border-bottom: none;
+
+  h1.js-admin-page-title {
+    color: $v2-medium-dark-grey;
+  }
+}
+

app/webpacker/css/admin/v2/variables.scss

@@ -0,0 +1,9 @@
+// Should finally replace (or at least complete) the file /admin/globale/variables.scss
+
+$v2-orange: #F27052;
+$v2-orange-light: #F5947D;
+$v2-orange-lighter: #F8B7A8;
+$v2-orange-lightest: #FCDBD4;
+
+$v2-dark-grey: #333333;
+$v2-medium-dark-grey: #444444;