Skip to content

Commit

Permalink
Merge pull request #1457 from sanger/sh51/add-environment-indicators
Browse files Browse the repository at this point in the history
Add more environment indicators
  • Loading branch information
StephenHulme authored Nov 14, 2023
2 parents 2d59705 + 8445c19 commit e6825ba
Show file tree
Hide file tree
Showing 16 changed files with 277 additions and 32 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 6 additions & 0 deletions app/assets/stylesheets/limber/colours.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
57 changes: 57 additions & 0 deletions app/assets/stylesheets/limber/icons.scss
Original file line number Diff line number Diff line change
@@ -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
);
}
129 changes: 109 additions & 20 deletions app/assets/stylesheets/limber/screen.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
33 changes: 29 additions & 4 deletions app/helpers/application_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
2 changes: 1 addition & 1 deletion app/helpers/session_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
4 changes: 2 additions & 2 deletions app/views/application/_flash_messages.html.erb
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 6 additions & 3 deletions app/views/application/_header.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -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' %>
Expand Down
Binary file added public/apple-touch-icon-development.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/apple-touch-icon-staging.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/apple-touch-icon-training.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/favicon-development.ico
Binary file not shown.
Binary file added public/favicon-staging.ico
Binary file not shown.
Binary file added public/favicon-training.ico
Binary file not shown.
Loading

0 comments on commit e6825ba

Please sign in to comment.