Merge pull request #1137 from mlorb/ml-sci-2336-v2

UI/UX restyle - fixes throughout application - part 2 [SCI-2336]
This commit is contained in:
mlorb 2018-05-16 11:30:54 +02:00 committed by GitHub
commit f59ea8c7a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 124 additions and 107 deletions

View file

@ -250,11 +250,14 @@ var HelperModule = (function(){
return helpers;
})();
// initialize code markup in rich text fields
(function() {
$(document).ready(function() {
// initialize code markup in rich text fields
$('[class^=language]').each(function(i, block) {
hljs.highlightBlock(block);
});
// fix dropdown-menu style throughout the app
$('.dropdown-header').parent('ul').addClass('custom-dropdown-menu');
});
})();

View file

@ -1127,6 +1127,7 @@ function updateModuleHtml(module, id, name, gridDistX, gridDistY) {
var dropdownMenu = document.createElement("ul");
$(dropdownMenu)
.addClass("dropdown-menu")
.addClass("custom-dropdown-menu")
.addClass("no-scale")
.attr("aria-labelledby", id + "_options")
.appendTo(dropdown);

View file

@ -23,7 +23,7 @@ $brand-success: #2dbe61;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #e54e42;
$brand-other: #9b59b6;
$brand-other: #8fd13f;
$brand-extra: #34495e;
$brand-primary-light: #dcedf6;
$brand-success-light: #e2eed8;
@ -58,10 +58,11 @@ $link-hover-color: darken($link-color, 15%);
$link-hover-decoration: underline;
// Typography
$font-family-lato: lato, "Open Sans", Arial, Helvetica, sans-serif;
$font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$font-family-base: $font-family-lato;
$font-size-base: 14px;
$font-size-large: ceil(($font-size-base * 1.1)); //16px
$font-size-small: ceil(($font-size-base * .9)); //13px
@ -117,7 +118,7 @@ $btn-default-color: $gray-dark;
$btn-default-bg: $brand-default;
$btn-default-border: $color-silver;
$btn-primary-color: $color-white;
$btn-primary-bg: $brand-primary;
$btn-primary-bg: $brand-success;
$btn-primary-border: darken($btn-primary-bg, 5%);
$btn-success-color: $color-white;
$btn-success-bg: $brand-success;
@ -293,21 +294,21 @@ $container-lg: auto;
// $jumbotron-heading-color: inherit;
// $jumbotron-font-size: ceil(($font-size-base * 1.5));
// $jumbotron-heading-font-size: ceil(($font-size-base * 4.5));
//
// // Form states and alerts
// $state-success-text: #3c763d;
// $state-success-bg: #dff0d8;
// $state-success-border: adjust-hue(darken($state-success-bg, 5%), -10);
// $state-info-text: #31708f;
// $state-info-bg: #d9edf7;
// $state-info-border: adjust-hue(darken($state-info-bg, 7%), -10);
// $state-warning-text: #8a6d3b;
// $state-warning-bg: #fcf8e3;
// $state-warning-border: adjust-hue(darken($state-warning-bg, 5%), -10);
// $state-danger-text: #a94442;
// $state-danger-bg: #f2dede;
// $state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
//
// Form states and alerts
$state-success-text: #3c763d;
$state-success-bg: #d5f2df;
$state-success-border: adjust-hue(darken($state-success-bg, 5%), -10);
$state-info-text: #31708f;
$state-info-bg: #d7ecf7;
$state-info-border: adjust-hue(darken($state-info-bg, 7%), -10);
$state-warning-text: #8a6d3b;
$state-warning-bg: #fcf8e3;
$state-warning-border: adjust-hue(darken($state-warning-bg, 5%), -10);
$state-danger-text: #a94442;
$state-danger-bg: #fadcd9;
$state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10);
// // Tooltips
// $tooltip-max-width: 200px;
// $tooltip-color: #fff;

View file

@ -31,7 +31,7 @@
padding-top: 10px;
&:hover {
background-color: $brand-primary-light;
background-color: $color-gainsboro;
}
&.no-notifications {
@ -60,7 +60,7 @@
}
.system-message {
background-color: $brand-default;
background-color: $brand-success;
border-radius: 50%;
color: $color-concrete;
display: inline-block;

View file

@ -32,7 +32,7 @@ $toggle-btn-size: 50px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
width: $wrapper-width;
z-index: 1000;
z-index: 999;
#slide-panel {
height: 100%;

View file

@ -42,8 +42,6 @@ $color-module-hover: $brand-primary;
}
#canvas-new-module {
margin-left: 10px;
.hbtn-default {
opacity: 1;
width: 0;
@ -518,7 +516,7 @@ li.module-hover {
}
.big-plus {
color: $brand-primary-light;
color: $color-gainsboro;
display: block;
font-size: 250px;
margin: 20px 0;

View file

@ -214,8 +214,8 @@ label {
}
&:hover {
background-color: $brand-primary-light;
@include box-shadow(0 0 2px 15px $brand-primary-light);
background-color: $color-gainsboro;
@include box-shadow(0 0 2px 15px $color-gainsboro);
& > .report-element-header {

View file

@ -107,7 +107,7 @@
}
.system-message {
background-color: $brand-default;
background-color: $brand-success;
border-radius: 50%;
color: $color-concrete;
display: block;
@ -118,22 +118,13 @@
}
.notifications-dropdown-footer {
background-color: $brand-primary-light;
background-color: $color-gainsboro;
padding: 8px;
text-align: center;
}
}
.notifications-dropdown-header,
.team-switch-dropdown-header {
background-color: $brand-primary;
color: $color-concrete;
font-weight: bold;
padding: 8px;
a {
color: $color-white;
a:hover {
background-color: $color-gainsboro;
}
}
}
@ -234,7 +225,7 @@
}
.system-message {
background-color: $brand-default;
background-color: $brand-success;
border-radius: 50%;
color: $color-concrete;
display: block !important;
@ -262,8 +253,8 @@
.glyphicon-ok-sign {
color: $brand-primary;
margin-left: -10px;
margin-right: 10px;
margin-left: -2px;
margin-right: 2px;
}
.team-name-item {

View file

@ -26,7 +26,11 @@
}
.custom-alert-info {
background-color: $brand-danger-light;
background-color: $state-info-bg;
border: 1px solid $state-info-border;
color: $state-info-text;
margin: 10px 0;
padding: 10px;
opacity: .86;
padding: 15px;
width: 100%;
}

View file

@ -73,6 +73,23 @@ table {
}
}
.custom-dropdown-menu {
padding-top: 0;
}
.notifications-dropdown-header,
.dropdown-header {
background-color: $brand-primary;
color: $color-concrete;
font-size: $font-size-base;
font-weight: bold;
padding: 8px 20px;
a {
color: $color-white;
}
}
.well-search-checklist {
background-color: $color-concrete !important;
margin-bottom: 5px;
@ -578,7 +595,7 @@ ul.double-line > li {
}
.panel-default > .panel-heading {
background-color: $brand-primary-light;
background-color: $color-gainsboro;
&>.panel-title {
overflow: hidden;
@ -596,7 +613,7 @@ ul.double-line > li {
.panel-archive {
.panel-heading {
background-color: darken($brand-primary-light, 5%);
background-color: darken($color-gainsboro, 5%);
color: lighten($color-emperor, 15%);
}
}
@ -684,7 +701,7 @@ ul.double-line > li {
margin-bottom: 0;
&> .panel-heading {
background-color: $brand-primary-light;
background-color: $color-gainsboro;
border-bottom: 1px solid $color-alto;
.panel-title > a {
@ -757,9 +774,8 @@ ul.content-module-activities {
.activity-item-date {
font-size: 1.2em;
background-color: $brand-primary;
border-color: $brand-primary;
color: $color-white;
background-color: $color-alto;
border-color: $color-alto;
padding-top: 5px;
padding-bottom: 5px;
}
@ -1440,15 +1456,15 @@ textarea.textarea-sm {
z-index: 99999999;
}
li {
li:not(.dropdown-header) {
background: $color-white;
border: 1px solid $color-alto;
padding: 10px 10px 10px 0;
vertical-align: middle;
}
&.dropdown-header {
padding-left: 30px;
}
li.dropdown-header {
padding-left: 30px;
}
[data-position] {

View file

@ -9,7 +9,20 @@
data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>"
>
<%= bootstrap_form_tag url: canvas_experiment_url, method: "post" do |f| %>
<div class="btn-group" role="group">
<% if can_manage_experiment?(@experiment) %>
<%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
<span class="hbtn-default">
<span class="glyphicon glyphicon-credit-card"></span>
<%= t("experiments.canvas.edit.new_module") %>
</span>
<span class="hbtn-hover">
<span class="glyphicon glyphicon-credit-card"></span>
<em class="hidden-xs"><%= t("experiments.canvas.edit.new_module_hover") %></em>
<span class="visible-xs-inline"><%= t("experiments.canvas.edit.new_module") %></span>
</span>
<% end %>
<% end %>
<div class="btn-group pull-right" role="group">
<%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-default cancel-edit-canvas" do %>
<span class="hidden-xs"><%= t("experiments.canvas.edit.cancel") %></span>
<span class="glyphicon glyphicon-remove visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
@ -19,19 +32,6 @@
<span class="hidden-xs"><%= t("experiments.canvas.edit.save") %></span>
<% end %>
</div>
<% if can_manage_experiment?(@experiment) %>
<%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
<span class="hbtn-default">
<span class="glyphicon glyphicon-credit-card"></span>
<%= t("experiments.canvas.edit.new_module") %>
</span>
<span class="hbtn-hover">
<span class="glyphicon glyphicon-credit-card"></span>
<em class="hidden-xs"><%= t("experiments.canvas.edit.new_module_hover") %></em>
<span class="visible-xs-inline"><%= t("experiments.canvas.edit.new_module") %></span>
</span>
<% end %>
<% end %>
<%= hidden_field_tag 'connections', '' %>
<%= hidden_field_tag 'positions', '' %>
<%= hidden_field_tag 'add', '' %>

View file

@ -17,7 +17,7 @@
<a class="dropdown-toggle" id="<%= my_module.id %>_options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options">
<ul class="dropdown-menu custom-dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options">
<li class="dropdown-header"><%= t('projects.index.options_header') %></li>
<% if can_manage_module?(my_module) %>
<li>

View file

@ -12,7 +12,7 @@
aria-expanded="true">
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<ul class="dropdown-menu custom-dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<li class="dropdown-header"><%= I18n.t('comments.options_dropdown.header') %></li>
<li>
<a href="#"

View file

@ -12,7 +12,7 @@
aria-expanded="true">
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<ul class="dropdown-menu custom-dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<li class="dropdown-header"><%= I18n.t('comments.options_dropdown.header') %></li>
<li>
<a href="#"

View file

@ -12,7 +12,7 @@ data-project-users-tab-url="<%= url_for project_user_projects_path(project_id: p
<% project_form = f %>
<%= f.hidden_field :archived, value: true %>
<% end %>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1" style="top: 105%;">
<li class="dropdown-header"><%= t('projects.index.options_header') %></li>
<li>
<%= link_to t("projects.index.edit_option"), edit_project_path(project, format: :json), remote: true, "data-action" => "edit" %>

View file

@ -33,6 +33,26 @@
<li class="dropdown-header">
<%= t("repositories.index.options_dropdown.header") %>
</li>
<% if can_create_repository_columns?(@repository.team) %>
<li>
<%= link_to t('repositories.index.options_dropdown.manage_columns'),
repository_repository_columns_path(@repository) %>
</li>
<% end %>
<% if can_create_repository_rows?(@repository.team) %>
<li>
<a href="#" id="importRecordsButton" data-turbolinks="false">
<%= t('repositories.index.options_dropdown.import_items') %>
</a>
<li>
<% end %>
<% if can_read_team?(@repository.team) %>
<li>
<a href="#" id="exportRepositoriesButton" data-turbolinks="false">
<%= t("repositories.index.options_dropdown.export_items") %>
</a>
</li>
<% end %>
<% if can_manage_repository?(@repository) %>
<li>
<%= link_to t('repositories.index.options_dropdown.rename'),
@ -41,12 +61,6 @@
remote: true %>
</li>
<% end %>
<% if can_create_repository_columns?(@repository.team) %>
<li>
<%= link_to t('repositories.index.options_dropdown.manage_columns'),
repository_repository_columns_path(@repository) %>
</li>
<% end %>
<% if can_create_repositories?(@repository.team) %>
<li>
<%= link_to t('repositories.index.options_dropdown.copy'),
@ -55,24 +69,10 @@
remote: true %>
</li>
<% end %>
<% if can_create_repository_rows?(@repository.team) %>
<li>
<a href="#" id="importRecordsButton" data-turbolinks="false">
<%= t('repositories.import_records.import') %>
</a>
<li>
<% end %>
<% if can_read_team?(@repository.team) %>
<li>
<a href="#" id="exportRepositoriesButton" data-turbolinks="false">
<%= t("my_modules.repository.export") %>
</a>
</li>
<% end %>
<% if can_manage_repository?(@repository) %>
<li role="separator" class="divider"></li>
<li>
<%= link_to t('repositories.index.modal_delete.delete'),
<%= link_to t('repositories.index.options_dropdown.delete'),
team_repository_destroy_modal_path(current_team, repository_id: @repository),
class: "delete-repo-option",
remote: true %>

View file

@ -13,7 +13,7 @@
aria-expanded="true">
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<ul class="dropdown-menu custom-dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<li class="dropdown-header"><%= I18n.t('comments.options_dropdown.header') %></li>
<li>
<a href="#"

View file

@ -37,7 +37,7 @@
url: user_current_team_path,
method: :post) do |f| %>
<%= hidden_field(:user, :current_team_id) %>
<div class="team-switch-dropdown-header"><%= t('nav.team_switch_title') %></div>
<div class="dropdown-header"><%= t('nav.team_switch_title') %></div>
<% current_user.teams.each do |team| %>
<li class="team-name-item">
<a href="#"

View file

@ -136,7 +136,7 @@
<!-- Secondary navigation title -->
<h4 class="nav-name">
<%= truncate(title_element.name,
length: Constants::NAME_TRUNCATION_LENGTH) %>
length: Constants::MAX_EDGE_LENGTH) %>
</h4>
</div>

View file

@ -14,7 +14,7 @@
aria-expanded="true">
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<ul class="dropdown-menu custom-dropdown-menu dropdown-menu-fixed" aria-labelledby="comment-<%= comment.id %>-dropdown">
<li class="dropdown-header"><%= I18n.t('comments.options_dropdown.header') %></li>
<li>
<a href="#"

View file

@ -15,7 +15,7 @@
<span class="glyphicon glyphicon-cog"></span>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="<%= id %>">
<ul class="dropdown-menu custom-dropdown-menu dropdown-menu-right" aria-labelledby="<%= id %>">
<li class="dropdown-header">
<%= t("users.settings.teams.edit.user_dropdown.role_label") %>
</li>

View file

@ -1,9 +1,10 @@
<% provide(:head_title, t("users.settings.teams.head_title")) %>
<% provide(:container_class, "no-second-nav-container") %>
<%= render partial: "users/settings/sidebar.html.erb" %>
<div class="tab-content">
<div class="tab-pane tab-pane-settings" role="tabpanel"></div>
<div class="tab-pane tab-pane-settings active" role="tabpanel">
<div class="tab-pane content-pane" role="tabpanel"></div>
<div class="tab-pane content-pane active" role="tabpanel">
<%= render partial: "users/settings/teams/breadcrumbs.html.erb" %>

View file

@ -319,7 +319,7 @@ en:
nav_print: "Print"
nav_pdf: "Download PDF"
nav_save: "Save"
nav_close: "Close"
nav_close: "Cancel"
nav_sort_by: "Sort by"
nav_sort_asc: "Oldest on top"
nav_sort_desc: "Newest on top"
@ -909,10 +909,12 @@ en:
advanced: "Advanced"
options_dropdown:
header: "Edit inventory"
rename: "Rename"
copy: "Copy"
delete: "Delete"
manage_columns: 'Manage Columns'
manage_columns: 'Manage columns'
import_items: 'Import items'
export_items: 'Export items'
rename: "Rename inventory"
copy: "Copy inventory"
delete: "Delete inventory"
modal_delete:
title_html: "Delete inventory <em>%{name}</em>"
message_html: "Are you sure you want to delete inventory <em>%{name}</em>? This action is irreversible."