Merge pull request #1457 from sanger/sh51/add-environment-indicators

Add more environment indicators

app/assets/stylesheets/application.scss

@@ -4,6 +4,7 @@
 @import 'limber/_labware-mixins';
 @import 'bootstrap';
 @import 'limber/screen';
+@import 'limber/icons';
 @import 'limber/plate';
 @import 'limber/tube';
 @import 'limber/tube-rack';

app/assets/stylesheets/limber/colours.scss

@@ -1,3 +1,9 @@
+/* Colours defined per environment */
+$production: $gray-800 !default;
+$training: $green !default;
+$staging: $red !default;
+$development: $gray-100 !default;
+
 @mixin shade-aliquot($base_colour, $text_colour) {
   &.aliquot,
   &.pool_name {

app/assets/stylesheets/limber/icons.scss

@@ -0,0 +1,57 @@
+// Bare Bones Icon System
+
+// Usage:
+//   <span class="icon icon-{name}-{color}"></span>
+//   Where {name} is the name of the icon and {color} is the bootstrap theme color
+//   (e.g. icon-user-primary, icon-user-secondary, icon-user-success, etc.)
+
+$icon-size: 24px;
+
+/// Replace `$search` with `$replace` in `$string`
+/// @author Kitty Giraudel
+/// @param {String} $string - Initial string
+/// @param {String} $search - Substring to replace
+/// @param {String} $replace ('') - New value
+/// @return {String} - Updated string
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@mixin icon($name, $path, $theme-color) {
+  // split theme color into name and value
+  $theme-color-name: nth($theme-color, 1);
+  $theme-color-value: nth($theme-color, 2);
+  // escape characters for html
+  $escaped-color: str-replace(inspect($theme-color-value), '#', '%23');
+
+  .icon-#{$name}-#{$theme-color-name} {
+    display: inline-block;
+    width: $icon-size;
+    height: $icon-size;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$escaped-color}" className="w-6 h-6"> #{$path} </svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: $icon-size;
+  }
+}
+
+// icons list
+// (add new icons here, note names must not contain dashes '-')
+@each $theme-color in $theme-colors {
+  // iterate over bootstrap theme colors
+
+  // icons by Heroicons https://heroicons.com/
+  // user-circle
+  @include icon(
+    'user',
+    '<path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clipRule="evenodd" />',
+    $theme-color
+  );
+}

app/assets/stylesheets/limber/screen.scss

@@ -9,52 +9,134 @@ body {
   margin-bottom: 50px;
 }
 
-header.limber-header {
+/* Background colours for different environments */
+.bg-production {
+  background-color: $production;
+}
+.bg-training {
+  background-color: $training;
+}
+.bg-staging {
+  background-color: $staging;
+}
+.bg-development {
+  background-color: $development;
+}
+
+// navbar styles
+%navbar-dark-style {
   nav {
-    @extend .navbar;
-    @extend .navbar-expand-md;
     @extend .navbar-dark;
   }
+  .navbar-text {
+    @extend .text-light;
+  }
+  .icon-user {
+    @extend .icon-user-light;
+  }
 }
-
-#app {
-  margin-bottom: 100px;
+%navbar-light-style {
+  nav {
+    @extend .navbar-light;
+  }
+  .navbar-text {
+    @extend .text-dark;
+  }
+  .icon-user {
+    @extend .icon-user-secondary;
+  }
+  .btn-logout {
+    @extend .btn-light;
+    @extend .border;
+  }
+  @extend .border-bottom; // add border to bottom to increase visibility
+  border-bottom-color: #eaecef !important; // set border color to match jumbotron background
 }
 
-#flashes {
-  @extend .col-12;
+// development and unknown environments
+header.limber-header {
+  @extend %navbar-light-style;
+  nav {
+    @extend .navbar;
+    @extend .navbar-expand-md;
+    @extend .py-3;
+    @extend .bg-development;
+  }
 }
 
-#plate-title,
-#tube-title,
-.card-header,
-#tube-rack-title {
-  font-weight: 300;
+.environment {
+  // surround in bold square brackets
+  &:before {
+    content: '[';
+    font-weight: bold;
+  }
+  &:after {
+    content: ']';
+    font-weight: bold;
+  }
+  @extend .navbar-text;
+  @extend .small;
+  @extend .mr-2;
 }
 
+// Set the background color of the navbar based on the environment
 .production {
   header.limber-header {
+    @extend %navbar-dark-style;
     nav {
-      @extend .bg-dark;
+      @extend .bg-production;
     }
     .environment {
       display: none;
     }
+    .btn-logout {
+      @extend .btn-danger;
+      @extend .border-0;
+    }
   }
 }
-.nonproduction {
+
+.training {
   header.limber-header {
+    @extend %navbar-dark-style;
     nav {
-      @extend .bg-danger;
+      @extend .bg-training;
     }
-    .environment {
-      @extend .badge;
-      @extend .badge-light;
-      @extend .mr-2;
+    .btn-logout {
+      @extend .btn-success;
+      border-color: darken($training, 5%) !important;
+    }
+  }
+}
+
+.staging {
+  header.limber-header {
+    @extend %navbar-dark-style;
+    nav {
+      @extend .bg-staging;
+    }
+    .btn-logout {
+      @extend .btn-danger;
+      border-color: darken($staging, 5%) !important;
     }
   }
 }
 
+#app {
+  margin-bottom: 100px;
+}
+
+#flashes {
+  @extend .col-12;
+}
+
+#plate-title,
+#tube-title,
+.card-header,
+#tube-rack-title {
+  font-weight: 300;
+}
+
 .tube-list,
 .plate-list {
   @extend .list-group;
@@ -120,6 +202,13 @@ nav.robots-list {
   font-style: oblique;
   font-stretch: ultra-condensed;
   font-weight: lighter;
+  @extend .mr-2;
+}
+
+.btn-logout {
+  @extend .btn;
+  @extend .btn-secondary;
+  @extend .rounded;
 }
 
 .logged_in {

app/helpers/application_helper.rb

@@ -27,10 +27,6 @@ def environment
     Rails.env
   end
 
-  def environment_type_class
-    Rails.env.production? ? 'production' : 'nonproduction'
-  end
-
   def each_robot(&block)
     Robots.each_robot(&block)
   end
@@ -40,4 +36,33 @@ def pipeline_groups
     return [] if Settings.pipelines.list.empty?
     Settings.pipelines.map(&:pipeline_group).uniq.sort
   end
+
+  # Returns the appropriate icon suffix for the current environment
+  # Returns empty string for production
+  # Returns "-#{environment}" for training, staging
+  # Returns "-development" for any other environment
+  # @return [String] The suffix to append to the icon name
+  def icon_suffix
+    environment = Rails.env
+    case environment
+    when 'production'
+      ''
+    when 'training', 'staging'
+      "-#{environment}"
+    else
+      '-development'
+    end
+  end
+
+  # Return the appropriate favicon for the current environment
+  # @return [String] The path to the favicon
+  def favicon
+    "favicon#{icon_suffix}.ico"
+  end
+
+  # Return the appropriate apple-touch-icon for the current environment
+  # @return [String] The path to the apple-touch-icon
+  def apple_touch_icon
+    "apple-touch-icon#{icon_suffix}.png"
+  end
 end

app/helpers/session_helper.rb

@@ -30,6 +30,6 @@ def check_for_login!
   end
 
   def session_switcher
-    link_to 'Log Out', logout_sessions_path, class: 'btn btn-danger' if logged_in?
+    link_to 'Log Out', logout_sessions_path, class: 'btn-logout' if logged_in?
   end
 end

app/views/application/_flash_messages.html.erb

@@ -1,8 +1,8 @@
 <div id="flashes">
   <% flash.each do |name, message| %>
     <div class="flash flash-<%= name %>">
-      <h3><%= name.titleize %></h3>
-      <ul><% Array(message).each do |m| %><li><%= m %> <% end %></li></ul>
+      <span class='font-weight-bold'><%= name.titleize %></span>
+      <ul class='mb-0'><% Array(message).each do |m| %><li><%= m %> <% end %></li></ul>
     </div>
   <% end %>
 </div>

app/views/application/_header.html.erb

@@ -12,11 +12,14 @@
     <ul class="navbar-nav mr-auto mt-2 mt-md-0">
       <!-- No nav items -->
     </ul>
-    <span class='navbar-text float-sm-right navbar-dark text-white'>
       <% if logged_in? %>
-        Currently logged in as, <span class="user_name_placeholder"><strong><%= user_name.titlecase %></strong></span> <%= session_switcher %></span>
+        <span class="icon icon-user mr-1"></span>
+        <span class='navbar-text mr-sm-2'>
+          <span class="user_name_placeholder"><strong><%= user_name.titlecase %></strong></span>
+        </span>
+        <%= session_switcher %>
       <% else %>
-        Not logged in
+        <span class='navbar-text'>Not logged in</span>
       <% end %>
   </div>
 </nav>

app/views/layouts/application.html.erb

@@ -21,11 +21,12 @@
       <script>$.fx.off = true;</script>
     <% end %>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/<%= apple_touch_icon %>" />
     <link rel="icon" sizes="32x32" href="/icon32.png" />
     <link rel="icon" sizes="16x16" href="/icon16.png" />
+    <link rel="shortcut icon" href="/<%= favicon %>" type="image/x-icon" />
   </head>
-  <body class='<%= environment %> <%= environment_type_class %> <%= logged_in_class %>'>
+  <body class='<%= environment %> <%= logged_in_class %>'>
     <div id='app'>
       <%= render 'header' %>
       <%= render partial: 'flash_messages' %>