diff --git a/app/assets/images/favicon-16.png b/app/assets/images/favicon-16.png index 0ebf0087e..93a5b366d 100644 Binary files a/app/assets/images/favicon-16.png and b/app/assets/images/favicon-16.png differ diff --git a/app/assets/images/favicon-32.png b/app/assets/images/favicon-32.png index 868ea6dc1..5778c9c11 100644 Binary files a/app/assets/images/favicon-32.png and b/app/assets/images/favicon-32.png differ diff --git a/app/assets/images/favicon-48.png b/app/assets/images/favicon-48.png index 0a9b0b8ba..914184cc9 100644 Binary files a/app/assets/images/favicon-48.png and b/app/assets/images/favicon-48.png differ diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico index 1354303b0..87f76573c 100644 Binary files a/app/assets/images/favicon.ico and b/app/assets/images/favicon.ico differ diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index bee3df49e..902d4b7a3 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/app/assets/javascripts/projects/canvas.js.erb @@ -496,6 +496,10 @@ function animateReposition(el, left, top) { function bindModeChange() { var buttons = $('#diagram-buttons').find("a[type='button']"); + $('.change-canvas-view').off().on('click', '.sci-toggle-item', function() { + $(this).next().click(); + }) + buttons.on('click', function() { var action = $(this).data("action"); diff --git a/app/assets/javascripts/projects/index.js b/app/assets/javascripts/projects/index.js index 727be409b..76bed9eef 100644 --- a/app/assets/javascripts/projects/index.js +++ b/app/assets/javascripts/projects/index.js @@ -510,16 +510,20 @@ } function initProjectsViewModeSwitch() { - $('input[name=projects-view-mode-selector]').off().on('change', function() { - if ($(this).val() === projectsViewMode) { - return; - } - projectsViewMode = $(this).val(); - if (projectsChanged) { - refreshCurrentView(); - } - projectsChanged = false; - }); + $('input[name=projects-view-mode-selector]').off() + .on('change', function() { + if ($(this).val() === projectsViewMode) { + return; + } + projectsViewMode = $(this).val(); + if (projectsChanged) { + refreshCurrentView(); + } + projectsChanged = false; + }) + .on('click', function() { + $(this).next().click(); + }); } function initSorting() { diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index 827a8d9a9..104c19882 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -7,7 +7,7 @@ $('#wrapper').removeClass('hidden2'); $('#wrapper').css('paddingLeft', '280px'); $('.navbar-secondary').css( - { 'margin-left': '-280px', 'padding-left': '294px' } + { 'margin-left': '-280px', 'padding-left': '280px' } ); $('#sidebar-arrow').attr('data-shown', ''); sessionStorage.setItem(STORAGE_TOGGLE_KEY, "un-toggled"); @@ -18,7 +18,7 @@ $('#wrapper').css('paddingLeft', '0'); $('.navbar-secondary').css({ 'margin-left': '0', - 'padding-left': '14px' + 'padding-left': '0' }); $('#sidebar-arrow').removeAttr('data-shown'); sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled"); diff --git a/app/assets/javascripts/sitewide/avatar_modal.js b/app/assets/javascripts/sitewide/avatar_modal.js index 893ed0c64..c7906e665 100644 --- a/app/assets/javascripts/sitewide/avatar_modal.js +++ b/app/assets/javascripts/sitewide/avatar_modal.js @@ -31,7 +31,7 @@ var avatarsModal = (function() { reader.readAsDataURL(inputField.files[0]); reader.onload = function() { var avatarContainer = $(modal).find('.avatar-preview-container'); - $(modal).find('.save-button').removeClass('disabled'); + $(modal).find('.save-button').attr('disabled', false); $(modal).find('#new_avatar').val(reader.result); avatarContainer.show().children().remove(); @@ -50,7 +50,7 @@ var avatarsModal = (function() { function initPredefinedAvatars() { $(modal).find('.avatar-collection .avatar').click(function() { - $(modal).find('.save-button').removeClass('disabled'); + $(modal).find('.save-button').attr('disabled', false); $(modal).find('#raw_avatar')[0].value = null; $(modal).find('.avatar-preview-container').hide(); $(modal).find('.current-avatar').show().find('img') @@ -61,9 +61,9 @@ var avatarsModal = (function() { function initUpdateButton() { $(modal).find('.save-button').click(function() { - if ($(this).hasClass('disabled')) return; + if ($(this).is('[disabled=disabled]')) return; - $(this).addClass('disabled'); + $(this).attr('disabled', true); $.ajax({ url: $(modal).data('update-url'), type: 'PUT', @@ -76,7 +76,7 @@ var avatarsModal = (function() { location.reload(); }, error: () => { - $(this).removeClass('disabled'); + $(this).attr('disabled', false); } }); }); diff --git a/app/assets/javascripts/sitewide/comments.js b/app/assets/javascripts/sitewide/comments.js index 45e4a3ef9..26159335f 100644 --- a/app/assets/javascripts/sitewide/comments.js +++ b/app/assets/javascripts/sitewide/comments.js @@ -65,6 +65,7 @@ var Comments = (function() { $el.find('textarea'), $el.find('.new-comment-button') ); + $el.find('textarea').focus().blur(); $el.find('.new-comment-button').off('click').click(() => { var errorField = $el.find('.new-message-error'); var newButton = this; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 76b39c9c1..3a28a9d3e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,27 +1,36 @@ /* *= require highlightjs-github-theme *= require_self - *= require_tree . *= require jquery-ui/draggable *= require rails_bootstrap_forms *= require bootstrap-select - *= require constants *= stub reports_pdf */ +@import "shared_styles/constants/*"; + @import "constants"; + @import "bootstrap-sprockets"; @import "bootstrap"; @import "bootstrap-datetimepicker"; @import "bootstrap-colorselector"; @import "bootstrap-tagsinput"; @import "bootstrap-tagsinput-typeahead"; + +@import "shared_styles/elements/*"; + @import "handsontable.full.min"; @import "ajax-bootstrap-select.min"; @import "extend/bootstrap"; -@import "themes/scinote"; -@import "extend/perfect-scrollbar"; +@import "extend/*"; +@import "hooks/*"; +@import "partials/*"; @import "my_modules/protocols/*"; @import "my_modules/results/*"; @import "protocols/*"; -@import "hooks/*"; +@import "settings/*"; +@import "shared/*"; +@import "themes/*"; + +@import "*" diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss index d9fb728de..4d0eb4083 100644 --- a/app/assets/stylesheets/constants.scss +++ b/app/assets/stylesheets/constants.scss @@ -5,7 +5,7 @@ //============================================================================== // Grayscale colors -$color-white: #fff; +/*$color-white: #fff; $color-alabaster: #fcfcfc; $color-concrete: #f2f2f2; $color-gainsboro: #e3e3e3; @@ -41,7 +41,7 @@ $office-ms-powerpoint: #d24726; // MarvinJS color: $marvinjs-color: #29999c; - +*/ //============================================================================== // Other //============================================================================== @@ -62,14 +62,14 @@ $gray-light: $color-dove-gray; $gray-lighter: $color-concrete; // Scaffolding -$body-bg: $color-concrete; -$text-color: $color-emperor; -$link-color: $brand-primary; -$link-hover-color: darken($link-color, 15%); -$link-hover-decoration: underline; +// $body-bg: $color-concrete; +// $text-color: $color-emperor; +// $link-color: $brand-primary; +// $link-hover-color: darken($link-color, 15%); +// $link-hover-decoration: underline; // Typography -$font-family-lato: Lato, "Open Sans", Arial, Helvetica, sans-serif; +/*$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; @@ -89,7 +89,7 @@ $line-height-computed: floor(($font-size-base * $line-height-base)); $headings-font-family: inherit; $headings-font-weight: 500; $headings-line-height: 1.1; -$headings-color: inherit; +$headings-color: inherit;*/ // Components $padding-base-vertical: 6px; @@ -125,17 +125,17 @@ $btn-default-color: $gray-dark; $btn-default-bg: $brand-default; $btn-default-border: $color-silver; $btn-primary-color: $color-white; -$btn-primary-bg: $brand-success; +$btn-primary-bg: $brand-primary; $btn-primary-border: darken($btn-primary-bg, 5%); $btn-primary-new-color: $color-white; -$btn-primary-new-bg: $brand-primary-new; -$btn-primary-new-border: darken($brand-primary-new, 5%); +$btn-primary-new-bg: $brand-primary; +$btn-primary-new-border: darken($brand-primary , 5%); $btn-success-color: $color-white; -$btn-success-bg: $brand-success; +$btn-success-bg: $brand-primary; $btn-success-border: darken($btn-success-bg, 5%); $btn-info-color: $color-white; -$btn-info-bg: $brand-info; -$btn-info-border: darken($btn-info-bg, 5%); +$btn-info-bg: $brand-primary; +$btn-info-border: $brand-primary; $btn-warning-color: $color-white; $btn-warning-bg: $brand-warning; $btn-warning-border: darken($btn-warning-bg, 5%); diff --git a/app/assets/stylesheets/extend/perfect-scrollbar.scss b/app/assets/stylesheets/extend/perfect-scrollbar.scss index cec47082b..6407a74e2 100644 --- a/app/assets/stylesheets/extend/perfect-scrollbar.scss +++ b/app/assets/stylesheets/extend/perfect-scrollbar.scss @@ -14,10 +14,10 @@ */ .ps__rail-x { display: none; - opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 16px; + opacity: 0.6; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; /* please don't change 'position' */ @@ -26,10 +26,10 @@ .ps__rail-y { display: none; - opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 16px; + opacity: 0.6; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; /* please don't change 'position' */ @@ -80,10 +80,10 @@ .ps__thumb-y { background-color: $color-silver-chalice; - border-radius: 4px; + border-radius: 3px; transition: background-color .2s linear, width .2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out; - width: 4px; + width: 6px; /* there must be 'right' for ps__thumb-y */ right: 2px; /* please don't change 'position' */ @@ -93,15 +93,13 @@ .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { - background-color: $brand-primary; - height: 12px; + height: 10px; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { - background-color: $brand-primary; - width: 12px; + width: 10px; } /* MS supports */ diff --git a/app/assets/stylesheets/global_activities.scss b/app/assets/stylesheets/global_activities.scss index e6a949b3b..1ef49cded 100644 --- a/app/assets/stylesheets/global_activities.scss +++ b/app/assets/stylesheets/global_activities.scss @@ -34,22 +34,6 @@ display: flex; height: 42px; - .hide-actions { - align-items: center; - color: $color-silver-chalice; - display: flex; - margin-right: 20px; - - &:hover { - text-decoration: none; - } - - .fas { - font-size: 18px; - margin-right: 5px; - } - } - .ga-search-container { display: none; flex-grow: 1; diff --git a/app/assets/stylesheets/marvinjs.scss b/app/assets/stylesheets/marvinjs.scss index 92d1a2da7..918b8016a 100644 --- a/app/assets/stylesheets/marvinjs.scss +++ b/app/assets/stylesheets/marvinjs.scss @@ -140,6 +140,7 @@ } .new-marvinjs-upload-button { + padding: 2px 16px; .new-marvinjs-upload-icon { display: inline-block; diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 8e9736d33..d5a76bf33 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -259,6 +259,7 @@ .my-module-recent-protocols { flex-grow: 1; + height: 36px; margin-bottom: 5px; position: relative; diff --git a/app/assets/stylesheets/my_modules/results/index.scss b/app/assets/stylesheets/my_modules/results/index.scss index 9fe221dc4..5d8714ee0 100644 --- a/app/assets/stylesheets/my_modules/results/index.scss +++ b/app/assets/stylesheets/my_modules/results/index.scss @@ -8,10 +8,14 @@ #results-toolbar { .help_tooltips { - .btn-default { - border: 0; - color: inherit; - margin-left: 10px; + align-items: center; + display: flex; + + .add-result-text { + display: inline-block; + line-height: 36px; + margin-bottom: 5px; + margin-right: 5px; } } } diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss index f3eed2ba0..3b0fadb98 100644 --- a/app/assets/stylesheets/partials/_sidebar.scss +++ b/app/assets/stylesheets/partials/_sidebar.scss @@ -26,7 +26,7 @@ $toggle-btn-size: 50px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; bottom: 50%; - box-shadow: 2px 0 4px $color-alto; + box-shadow: $flyout-shadow; display: block; position: absolute; right: -18px; @@ -54,7 +54,7 @@ $toggle-btn-size: 50px; #sidebar-wrapper { background-color: $color-white; - box-shadow: 1px 3px 6px $color-alto; + box-shadow: $flyout-shadow; height: 100%; margin-left: -$wrapper-width; position: fixed; diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 4c43691c9..a7859d1b9 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -40,7 +40,7 @@ $color-module-hover: $brand-primary; } .projects-view-mode-switch { - margin: 10px; + margin: 8px 10px 12px; } } @@ -48,26 +48,38 @@ $color-module-hover: $brand-primary; /* Canvas index page */ #canvas-container:not(.canvas-container-edit-mode) { - margin-top: 20px; + margin-top: 5px; } /********************************** * jsPlumb CANVAS RELATED STYLING * *********************************/ #diagram-buttons { - margin-bottom: 10px; + align-items: center; + display: flex; + + #edit-canvas-button { + margin-right: 5px; + } + + .actions-button { + margin-right: 15px; + } + + .toolbarButtons { + align-items: center; + display: flex; + + .zoom-text { + margin-right: 5px; + } + } } #update-canvas { - #canvas-new-module { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .btn-group > .btn:first-child { - border-bottom-left-radius: 0; - } - .btn-group > .btn:last-child { - border-bottom-right-radius: 0; + + .canvas-header { + margin-bottom: 5px; } } @@ -552,9 +564,9 @@ li.module-hover { } .experiment-no-description { + @include font-h3; color: $color-alto; display: block; - font-size: $font-size-large; font-weight: bold; margin-top: 10px; text-align: center; diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss index a11303793..67573f78c 100644 --- a/app/assets/stylesheets/protocol_management.scss +++ b/app/assets/stylesheets/protocol_management.scss @@ -226,6 +226,7 @@ align-items: center; display: flex; height: 30px; + margin-top: 5px; .info-line.button { flex-grow: 1; @@ -355,15 +356,6 @@ } } - .external-import-btn { - background-color: $brand-primary; - border: 0; - color: $color-white; - font-size: 12px; - padding-bottom: 3px; - padding-top: 3px; - } - .footer { background: $color-white; bottom: -30px; diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index 91a2ea303..2acec9c31 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -12,7 +12,6 @@ border-bottom: 1px solid $color-gainsboro; border-left: 0; border-right: 0; - border-top: 15px solid $color-concrete; margin-bottom: 15px; min-width: 320px; padding: 25px 20px; diff --git a/app/assets/stylesheets/shared/comments.scss b/app/assets/stylesheets/shared/comments.scss index 2961d4915..93356a7db 100644 --- a/app/assets/stylesheets/shared/comments.scss +++ b/app/assets/stylesheets/shared/comments.scss @@ -220,6 +220,7 @@ border: 1px solid transparent; box-shadow: none; outline: none; + overflow: hidden; width: 100%; &:focus { diff --git a/app/assets/stylesheets/shared_styles/constants/borders.scss b/app/assets/stylesheets/shared_styles/constants/borders.scss new file mode 100644 index 000000000..e62e938ec --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants/borders.scss @@ -0,0 +1,13 @@ +@import "colors"; + +$border-radius-default: 4px; +$border-radius-modal: 6px; +$border-radius-tag: 2px; + +$border-default: 1px solid $color-silver-chalice; +$border-secondary: 1px solid $color-volcano; +$border-tertiary: 1px solid $color-alto; + +$border-focus: 1px solid $brand-focus; +$border-danger: 1px solid $brand-danger; +$border-transparent: 1px solid transparent; diff --git a/app/assets/stylesheets/shared_styles/constants/colors.scss b/app/assets/stylesheets/shared_styles/constants/colors.scss new file mode 100644 index 000000000..d8cab82b5 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants/colors.scss @@ -0,0 +1,55 @@ +// Grayscale colors +$color-white: #fff; +$color-concrete: #f0f0f6; +$color-alto: #d0d0d8; +$color-silver-chalice: #a0a0a8; +$color-volcano: #404048; +$color-black: #231f20; + + + +// Theme colors +$brand-primary: #104da9; +$brand-primary-hover: #0c3a80; +$brand-primary-press: #07244f; + +$brand-academy: #a52068; +$brand-academy-dark: #8c1b58; + +$brand-focus: #609fff; +$brand-focus-light: #dfecff; + +$brand-success: #2dbe61; +$brand-success-light: #cbefd7; + +$brand-danger: #e72525; +$brand-danger-hover: #b21d1d; +$brand-danger-press: #801515; +$brand-danger-light: #f9c9c9; + +$brand-warning: #f0ad4e; +$brand-warning-light: #fbebd3; + +// MS Office colors: +$office-ms-word: #2b579a; +$office-ms-excel: #217346; +$office-ms-powerpoint: #d24726; + +// MarvinJS color: +$marvinjs-color: #29999c; + + + +// Don't use them +$color-alabaster: $color-concrete; +$color-gainsboro: $color-concrete; +$color-silver: $color-alto; +$color-dove-gray: $color-volcano; +$color-emperor: $color-volcano; +$brand-default: $color-white; +$brand-info: $brand-focus; +$brand-other: $brand-success; +$brand-extra: $brand-focus; +$brand-primary-light: $brand-focus-light; +$brand-light-blue: $brand-focus-light; + diff --git a/app/assets/stylesheets/shared_styles/constants/fonts.scss b/app/assets/stylesheets/shared_styles/constants/fonts.scss new file mode 100644 index 000000000..1a156e6bd --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants/fonts.scss @@ -0,0 +1,67 @@ +$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-lato; +$font-family-icons: "Font Awesome 5 Free"; +$font-size-base: 16px; + +$font-size-h1: 24px; +$font-size-h2: 18px; +$font-size-h3: $font-size-base; +$font-size-h4: $font-size-base; +$font-size-h5: $font-size-base; +$font-size-h6: $font-size-base; + +$font-fas-check: "\f00c"; +$font-fas-exclamation-triangle: "\f071"; + +@mixin font-h1 { + font-size: 24px; + font-weight: bold; +} + +@mixin font-h2 { + font-size: 18px; + font-weight: bold; +} + +@mixin font-h3 { + font-size: $font-size-base; + font-weight: bold; +} + +@mixin font-main { + font-size: $font-size-base; +} + +@mixin font-button { + font-size: 14px; +} + +@mixin font-small { + font-size: 12px; +} + +@mixin font-awesome { + font-family: "Font Awesome 5 Free"; + font-weight: 501; +} + + + + +// $font-size-large: ceil(($font-size-base * 1.1)); //16px +// $font-size-small: ceil(($font-size-base * .9)); //13px +// $font-size-h1: floor(($font-size-base * 2.6)); //36px +// $font-size-h2: floor(($font-size-base * 2.15)); //30px +// $font-size-h3: ceil(($font-size-base * 1.7)); //24px +// $font-size-h4: ceil(($font-size-base * 1.25)); //18px +// $font-size-h5: $font-size-base; //14px +// $font-size-h6: ceil(($font-size-base * .85)); //12px +// $line-height-base: 1.428571429; +// $line-height-computed: floor(($font-size-base * $line-height-base)); +// $headings-font-family: inherit; +// $headings-font-weight: 500; +// $headings-line-height: 1.1; +// $headings-color: inherit; diff --git a/app/assets/stylesheets/shared_styles/constants/shadows.scss b/app/assets/stylesheets/shared_styles/constants/shadows.scss new file mode 100644 index 000000000..a345c116e --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants/shadows.scss @@ -0,0 +1,2 @@ +$flyout-shadow: 0px 1px 4px rgba(35, 31, 32, 0.15); +$modal-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15); \ No newline at end of file diff --git a/app/assets/stylesheets/shared_styles/constants/transition.scss b/app/assets/stylesheets/shared_styles/constants/transition.scss new file mode 100644 index 000000000..689148746 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants/transition.scss @@ -0,0 +1,4 @@ +$timing-function-deceleration: cubic-bezier(0, 0, .2, 1) !default; +$timing-function-standard: cubic-bezier(.4, 0, .2, 1) !default; +$timing-function-acceleration: cubic-bezier(.4, 0, 1, 1) !default; +$timing-function-sharp: cubic-bezier(.4, 0, .6, 1) !default; diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss new file mode 100644 index 000000000..9b38b4736 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss @@ -0,0 +1,170 @@ +// scss-lint:disable NestingDepth + +.btn{ + @include font-button; + animation-timing-function: $timing-function-sharp; + border-radius: $border-radius-default; + cursor: pointer; + display: inline-block; + line-height: 20px; + outline: 0; + padding: 7px 16px; + position: relative; + text-align: center; + text-decoration: none; + transition: .3s; + user-select: none; + + .fas { + color: inherit; + margin-right: 5px; + } + + &:hover { + text-decoration: none; + } + + &:active { + text-decoration: none; + } + + &:focus { + outline: 0; + text-decoration: none; + } + + &.btn-primary { + background: $brand-primary; + border: 1px solid $brand-primary; + color: $color-white; + + &:hover { + background: $brand-primary-hover; + color: $color-white; + } + + &:active { + background: $brand-primary-press; + color: $color-white; + } + + &:focus { + box-shadow: 0 0 0 1px $brand-focus; + color: $color-white; + } + } + + &.btn-secondary { + background: $color-white; + border: $border-default; + color: $color-black; + + &:hover { + background: $color-concrete; + border: $border-secondary; + color: $color-black; + } + + &:active { + background: $color-alto; + border: $border-secondary; + color: $color-black; + } + + &:focus { + box-shadow: 0 0 0 1px $brand-focus; + color: $color-black; + } + } + + &.btn-light { + background: transparent; + border: $border-transparent; + color: $color-black; + + &:hover { + background: $color-concrete; + border: $border-transparent; + color: $color-black; + } + + &:active { + background: $color-alto; + border: $border-transparent; + color: $color-black; + } + + &:focus { + box-shadow: 0 0 0 1px $brand-focus; + color: $color-black; + } + } + + &.btn-danger { + background: $brand-danger; + border: $border-danger; + color: $color-white; + + &:hover { + background: $brand-danger-hover; + color: $color-white; + } + + &:active { + background: $brand-danger-press; + color: $color-white; + } + + &:focus { + box-shadow: 0 0 0 1px $brand-focus; + color: $color-white; + } + } + + &.icon-btn { + padding: 7px; + width: 36px; + + .fas { + margin: 0; + } + } + + &:disabled { + background: $color-alto; + border: $border-tertiary; + color: $color-silver-chalice; + opacity: .5; + + &.btn-secondary, + &.btn-light { + background: $color-white; + + &:hover { + background: $color-white; + border: $border-tertiary; + color: $color-silver-chalice; + } + } + + &.btn-danger { + &:hover { + background: $color-alto; + } + } + } +} + +.sci-btn-group { + display: inline-block; + position: relative; + + .btn { + float: left; + margin: 2px 4px 2px 0; + + &:nth-last-child(1) { + margin-right: 0; + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/checkboxes.scss b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss new file mode 100644 index 000000000..c7cee3baa --- /dev/null +++ b/app/assets/stylesheets/shared_styles/elements/checkboxes.scss @@ -0,0 +1,63 @@ +// scss-lint:disable SelectorDepth QualifyingElement + +:root { + --sci-checkbox-size: 16px; +} + +input[type="checkbox"].sci-checkbox { + cursor: pointer; + flex-shrink: 0; + height: var(--sci-checkbox-size); + margin: 0; + opacity: 0; + position: relative; + width: var(--sci-checkbox-size); + z-index: 2; + + + .sci-checkbox-label { + display: inline-block; + flex-shrink: 0; + height: var(--sci-checkbox-size); + margin-left: calc((var(--sci-checkbox-size) * -1) - 3px); + position: relative; + width: var(--sci-checkbox-size); + + &::before { + @include font-awesome; + animation-timing-function: $timing-function-sharp; + background: $color-white; + border: $border-default; + border-radius: 1px; + color: $color-white; + content: ""; + font-size: calc(var(--sci-checkbox-size) - var(--sci-checkbox-size) * .375); + height: var(--sci-checkbox-size); + left: 0; + line-height: calc(var(--sci-checkbox-size) - 2px); + position: absolute; + text-align: center; + top: 1px; + transition: .2s; + width: var(--sci-checkbox-size); + } + } + + &.hidden + .sci-checkbox-label { + display: none; + } + + &:checked + .sci-checkbox-label { + &::before { + background: $brand-primary; + border: 1px solid $brand-primary; + content: $font-fas-check; + } + } + + &:disabled + .sci-checkbox-label { + &::before { + background: $color-alto; + border: $border-tertiary; + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss new file mode 100644 index 000000000..c86571b5d --- /dev/null +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -0,0 +1,132 @@ +// scss-lint:disable NestingDepth + +.sci-input-container { + display: inline-block; + position: relative; + + label { + @include font-small; + display: inline-block; + font-weight: bold; + margin-bottom: 5px; + } + + .sci-input-field { + @include font-button; + animation-timing-function: $timing-function-sharp; + border: $border-default; + border-radius: $border-radius-default; + height: 36px; + outline: 0; + padding: 0 0 0 10px; + transition: .3s; + width: 100%; + + &:focus { + border: $border-focus; + } + + &:disabled { + background: transparent; + } + } + + .fas { + bottom: 0; + line-height: 36px; + position: absolute; + text-align: center; + width: 25px; + } + + &.left-icon { + .sci-input-field { + padding: 0 0 0 30px; + } + + .fas { + left: 5px; + } + } + + &.right-icon { + .sci-input-field { + padding: 0 30px 0 10px; + } + + .fas { + right: 5px; + } + } + + &.success, + &.error { + .sci-input-field { + padding: 0 30px 0 10px; + } + + &::after { + @include font-awesome; + bottom: 0; + line-height: 36px; + position: absolute; + right: 5px; + text-align: center; + width: 25px; + } + + &.right-icon { + .sci-input-field { + padding: 0 60px 0 10px; + } + + &::after { + right: 35px; + } + } + } + + &.success { + &::after { + color: $brand-success; + content: $font-fas-check; + } + } + + &.error { + .sci-input-field { + border: $border-danger; + } + + &::after { + color: $brand-danger; + content: $font-fas-exclamation-triangle; + } + + &::before { + @include font-small; + bottom: -15px; + color: $brand-danger; + content: attr(data-error-text); + left: 0; + line-height: 15px; + position: absolute; + width: 100%; + } + } + + &.disabled { + label { + color: $color-alto; + } + + .sci-input-field { + border: $border-tertiary; + color: $color-alto; + + &::placeholder { + color: inherit; + } + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss new file mode 100644 index 000000000..706e8a12e --- /dev/null +++ b/app/assets/stylesheets/shared_styles/elements/radio_buttons.scss @@ -0,0 +1,81 @@ +// scss-lint:disable SelectorDepth QualifyingElement + +:root { + --sci-radio-size: 16px; +} + +input[type="radio"].sci-radio { + cursor: pointer; + flex-shrink: 0; + height: var(--sci-radio-size); + margin: 0; + opacity: 0; + position: relative; + width: var(--sci-radio-size); + z-index: 2; + + + .sci-radio-label { + display: inline-block; + flex-shrink: 0; + height: var(--sci-radio-size); + margin-left: calc((var(--sci-radio-size) * -1) - 3px); + position: relative; + width: var(--sci-radio-size); + + &::before { + animation-timing-function: $timing-function-sharp; + border: $border-default; + border-radius: 50%; + color: $color-white; + content: ""; + font-size: calc(var(--sci-radio-size) - var(--sci-radio-size) * .375); + height: var(--sci-radio-size); + left: 0; + line-height: calc(var(--sci-radio-size) - 2px); + position: absolute; + text-align: center; + top: 1px; + transition: .2s; + width: var(--sci-radio-size); + } + + &::after { + animation-timing-function: $timing-function-sharp; + background: $color-white; + border-radius: 50%; + content: ""; + display: inline-block; + height: calc(var(--sci-radio-size) - 6px); + left: 3px; + position: absolute; + top: 4px; + transition: .2s; + width: calc(var(--sci-radio-size) - 6px); + } + } + + &.hidden + .sci-radio-label { + display: none; + } + + &:checked + .sci-radio-label { + &::before { + border: 1px solid $brand-primary; + } + + &::after { + background: $brand-primary; + } + } + + &:disabled + .sci-radio-label { + &::before { + background: $color-alto; + border: $border-tertiary; + } + + &::after { + display: none; + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/toggles.scss b/app/assets/stylesheets/shared_styles/elements/toggles.scss new file mode 100644 index 000000000..e95ae09c6 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/elements/toggles.scss @@ -0,0 +1,104 @@ +// scss-lint:disable SelectorDepth QualifyingElement NestingDepth + +input[type="checkbox"].sci-toggle-checkbox { + cursor: pointer; + flex-shrink: 0; + height: 16px; + margin: 0; + opacity: 0; + position: relative; + width: 24px; + z-index: 2; + + + .sci-toggle-checkbox-label { + animation-timing-function: $timing-function-sharp; + background: $color-alto; + border-radius: 8px; + display: inline-block; + flex-shrink: 0; + height: 16px; + margin-left: -27px; + position: relative; + transition: .2s; + width: 24px; + + &::before { + animation-timing-function: $timing-function-sharp; + background: $color-white; + border-radius: 7px; + content: ""; + height: 12px; + left: 0; + margin: 2px; + position: absolute; + transition: .2s; + width: 12px; + } + } + + &.hidden + .sci-toggle-checkbox-label { + display: none; + } + + &:checked + .sci-toggle-checkbox-label { + background: $brand-primary; + + &::before { + left: 8px; + } + } + + &:disabled + .sci-toggle-checkbox-label { + + &::before { + background: $color-silver-chalice; + } + } +} + +.sci-toggles-group { + align-items: center; + display: flex; + position: relative; + + input[type="radio"].sci-toggle-item { + cursor: pointer; + height: 36px; + margin: 0; + opacity: 0; + position: relative; + width: 48px; + z-index: 2; + + + .sci-toggle-item-label { + animation-timing-function: $timing-function-sharp; + background: $color-white; + border: $border-default; + border-left-color: transparent; + color: $color-black; + display: inline-block; + height: 36px; + line-height: 34px; + margin-left: -48px; + position: relative; + text-align: center; + transition: .2s; + width: 48px; + + &:first-of-type { + border-left-color: $color-silver-chalice; + border-radius: $border-radius-default 0 0 $border-radius-default; + } + + &:last-of-type { + border-radius: 0 $border-radius-default $border-radius-default 0; + } + } + + &:checked + .sci-toggle-item-label { + background: $brand-primary; + border: 1px solid $brand-primary; + color: $color-white; + } + } +} diff --git a/app/assets/stylesheets/shared_styles/global_elements.scss b/app/assets/stylesheets/shared_styles/global_elements.scss new file mode 100644 index 000000000..5bfab7225 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/global_elements.scss @@ -0,0 +1,82 @@ +// scss-lint:disable Comment + +@import "constants/*"; +@import "elements/*"; + +// Examples + +/* + +
+
+ + + + + + + + +
+
+
+ + + + + + + + +
+
+
+ + + + + +
+
+
+ + + + + + +
+
+
+ +
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + +
+
+
+ + +
+
+ +*/ diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index c1562b4eb..3a129293b 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -42,28 +42,17 @@ .complete-step-btn { display: inline-block; - line-height: 39px; - - button { - display: block; - font-size: 12px; - margin: auto 0; - padding: 3px 10px; - - span { - font-size: 15px; - } - } } .panel-heading { - height: 39px; + border: 0; + height: 46px; padding-bottom: 0; padding-top: 0; .panel-options { bottom: 0; - line-height: 39px; + line-height: 46px; } span.step-number { @@ -76,19 +65,19 @@ .left-floats { align-items: center; display: flex; - height: 39px; + height: 100%; padding-right: 15px; .step-name-link { display: flex; flex-shrink: 1; - line-height: 39px; + line-height: 100%; overflow: hidden; .name-block { display: flex; flex-shrink: 1; - height: 39px; + height: 100%; overflow: hidden; @media (max-width: 1188px) { diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss index 974ab8e3e..639bf98ff 100644 --- a/app/assets/stylesheets/themes/main_navigation.scss +++ b/app/assets/stylesheets/themes/main_navigation.scss @@ -2,7 +2,7 @@ @import "mixins"; #main-nav { - box-shadow: 0 3px 6px $color-alto; + box-shadow: $flyout-shadow; margin-bottom: 0; } @@ -11,7 +11,7 @@ padding-left: 15px; .fa-bell { - font-size: $font-size-large; + font-size: 16px; } #count-notifications { @@ -40,10 +40,12 @@ } .navbar-default .navbar-brand { - & > img { - margin-top: -7px; - max-width: 55px; - max-height: 38px; + align-items: center; + display: flex; + padding: 0 15px; + + #logo { + max-height: 22px; } } @@ -394,10 +396,6 @@ #search-bar { padding-right: 0; - - .btn-default[type="submit"] { - height: 34px; - } } @media (max-width: 768px) { @@ -419,7 +417,7 @@ #system-notifications-dropdown { .fa-gift { - font-size: $font-size-large; + font-size: 16px; } #count-system-notifications { diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 96c2b0138..71146b679 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -3,7 +3,7 @@ .menu-bar { background-color: $color-white; - box-shadow: 1px 3px 6px 0 $color-alto; + box-shadow: $flyout-shadow; height: 100%; left: 0; padding-bottom: 50px; @@ -22,9 +22,9 @@ & > a, & > span { + @include font-small; color: $color-silver-chalice; display: grid; - font-size: $font-size-h6; margin-left: auto; margin-right: auto; padding: 10px 0; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 7be1f04a1..ab9b0e508 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -286,8 +286,8 @@ a[data-toggle="tooltip"] { .navbar-secondary { background: $color-concrete !important; margin-left: -280px; - padding-left: 294px; - padding-right: 97px; + padding-left: 280px; + padding-right: 82px; margin-bottom: 0; border-color: transparent; border-bottom: 0; @@ -310,7 +310,8 @@ a[data-toggle="tooltip"] { #secondary-menu { background: $color-white; border-bottom: 1px solid $color-gainsboro; - margin-top: 15px; + padding-left: 29px; + padding-top: 15px; .open > a, .open > a:hover, @@ -398,11 +399,11 @@ a[data-toggle="tooltip"] { } .navbar-without-sidebar{ - padding-left: 15px; margin-left: 0px; - -webkit-transition: all 0.5s ease; - -moz-transition: all 0.5s ease; + padding-left: 0; -o-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } @@ -422,9 +423,6 @@ a[data-toggle="tooltip"] { .tab-pane-settings { background-color: $color-white; padding: 15px; - border-left: 1px solid $color-alto; - border-right: 1px solid $color-alto; - border-bottom: 1px solid $color-alto; } .breadcrumb-teams { @@ -498,7 +496,7 @@ a[data-toggle="tooltip"] { margin-bottom: 15px; } - & > .btn-group { + > .sci-btn-group { margin-right: 30px; } } @@ -918,13 +916,15 @@ ul.content-activities { margin-bottom: 5px; .protocol-button { - margin-bottom: 5px; + + .sci-btn-group { + float: left; + } } .protocol-status-bar { display: flex; - height: 33px; - margin-bottom: 5px; + height: 40px; margin-right: 15px; } @@ -932,7 +932,8 @@ ul.content-activities { border-color: $color-silver; box-shadow: none; display: inline-block; - height: 33px; + height: 36px; + margin: 2px 0; & > .panel-body { padding: 0 0 0 15px; @@ -944,7 +945,7 @@ ul.content-activities { .link-button, .link-toggle { - height: 33px; + height: 36px; position: relative; right: -1px; top: -1px; @@ -1851,6 +1852,14 @@ th.custom-field .modal-tooltiptext { color: $color-white; font: bold; } + + .res-description { + color: $color-white; + } + + .res-type { + border-color: $color-white; + } } ul { diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb index 794efd8cf..79dbf08ef 100644 --- a/app/helpers/search_helper.rb +++ b/app/helpers/search_helper.rb @@ -25,11 +25,11 @@ module SearchHelper if search_team != current_team link_to text, path, - class: 'btn btn-success', + class: 'btn btn-primary', data: { confirm: t('users.settings.changed_team_in_search', team: search_team.name) } else - link_to text, path, class: 'btn btn-success' + link_to text, path, class: 'btn btn-primary' end end end diff --git a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb index d4d3c472f..21f706710 100644 --- a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb +++ b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb @@ -1,5 +1,5 @@ " data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>" > - <%= bootstrap_form_tag url: canvas_experiment_url, method: "post" do |f| %> + <%= bootstrap_form_tag url: canvas_experiment_url, method: "post", html: {class: "canvas-header"} do |f| %> <% if can_manage_experiment?(@experiment) %> <%=link_to "", type: "button", class: "btn btn-primary help_tooltips", id: "canvas-new-module", data: { tooltiplink: I18n.t('tooltips.link.task.new'), @@ -24,12 +24,12 @@ <% end %> <% end %> -
- <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-default cancel-edit-canvas" do %> +
+ <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-secondary cancel-edit-canvas" do %>   <% end %> - <%= f.submit class: "btn btn-success", id: "canvas-save" do %> + <%= f.submit class: "btn btn-primary", id: "canvas-save" do %> <%= t("experiments.canvas.edit.save_short") %> <% end %> diff --git a/app/views/canvas/edit/modal/_delete_module.html.erb b/app/views/canvas/edit/modal/_delete_module.html.erb index a6c2ed036..975373a8e 100644 --- a/app/views/canvas/edit/modal/_delete_module.html.erb +++ b/app/views/canvas/edit/modal/_delete_module.html.erb @@ -10,7 +10,7 @@
- + diff --git a/app/views/canvas/edit/modal/_delete_module_group.html.erb b/app/views/canvas/edit/modal/_delete_module_group.html.erb index 48ea665e7..0f8ae0656 100644 --- a/app/views/canvas/edit/modal/_delete_module_group.html.erb +++ b/app/views/canvas/edit/modal/_delete_module_group.html.erb @@ -10,7 +10,7 @@
- + diff --git a/app/views/canvas/edit/modal/_edit_module.html.erb b/app/views/canvas/edit/modal/_edit_module.html.erb index ed55ea417..822bb836f 100644 --- a/app/views/canvas/edit/modal/_edit_module.html.erb +++ b/app/views/canvas/edit/modal/_edit_module.html.erb @@ -11,8 +11,8 @@ <% end %>
- - + +
diff --git a/app/views/canvas/edit/modal/_move_module.html.erb b/app/views/canvas/edit/modal/_move_module.html.erb index 5b8482e4f..c9b88920f 100644 --- a/app/views/canvas/edit/modal/_move_module.html.erb +++ b/app/views/canvas/edit/modal/_move_module.html.erb @@ -23,9 +23,9 @@ <% end %>
- + <% if experiments.count > 1 %> - <% end %> diff --git a/app/views/canvas/edit/modal/_move_module_group.html.erb b/app/views/canvas/edit/modal/_move_module_group.html.erb index c95788cee..dd6278892 100644 --- a/app/views/canvas/edit/modal/_move_module_group.html.erb +++ b/app/views/canvas/edit/modal/_move_module_group.html.erb @@ -24,8 +24,8 @@
<% if experiments.count > 1 %> - - + <% end %> diff --git a/app/views/experiments/_clone_modal.html.erb b/app/views/experiments/_clone_modal.html.erb index e6dcb217f..24d5725e3 100644 --- a/app/views/experiments/_clone_modal.html.erb +++ b/app/views/experiments/_clone_modal.html.erb @@ -26,8 +26,8 @@ {}, {class: "form-control selectpicker", "data-role" => "clear"} %>
- - <%= f.submit t("experiments.clone.modal_submit"), class: "btn btn-success" %> + + <%= f.submit t("experiments.clone.modal_submit"), class: "btn btn-primary" %>
diff --git a/app/views/experiments/_edit_modal.html.erb b/app/views/experiments/_edit_modal.html.erb index a33a6ea97..d705b26a8 100644 --- a/app/views/experiments/_edit_modal.html.erb +++ b/app/views/experiments/_edit_modal.html.erb @@ -15,8 +15,8 @@ <%= render partial: "form.html.erb", locals: { form: f } %>
- - <%= f.submit t("experiments.edit.modal_create"), class: "btn btn-success" %> + + <%= f.submit t("experiments.edit.modal_create"), class: "btn btn-primary" %>
diff --git a/app/views/experiments/_move_modal.html.erb b/app/views/experiments/_move_modal.html.erb index 521250036..4af583ac9 100644 --- a/app/views/experiments/_move_modal.html.erb +++ b/app/views/experiments/_move_modal.html.erb @@ -27,9 +27,9 @@ <%= t("experiments.move.notice") %>
- + <% if !@projects.blank? %> - <%= f.submit t("experiments.move.modal_submit"), class: "btn btn-success" %> + <%= f.submit t("experiments.move.modal_submit"), class: "btn btn-primary" %> <% end %>
diff --git a/app/views/experiments/_new_modal.html.erb b/app/views/experiments/_new_modal.html.erb index 8d75300e3..c07376307 100644 --- a/app/views/experiments/_new_modal.html.erb +++ b/app/views/experiments/_new_modal.html.erb @@ -11,8 +11,8 @@ <%= render partial: "form.html.erb", locals: { form: f } %>
- - <%= f.submit t("experiments.new.modal_create"), class: "btn btn-success" %> + + <%= f.submit t("experiments.new.modal_create"), class: "btn btn-primary" %>
diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb index 2769de66f..b14f3a13e 100644 --- a/app/views/experiments/canvas.html.erb +++ b/app/views/experiments/canvas.html.erb @@ -17,8 +17,8 @@ <% end %> - - diff --git a/app/views/my_modules/_state_button_uncomplete.html.erb b/app/views/my_modules/_state_button_uncomplete.html.erb index a923e5d26..bd4ca47aa 100644 --- a/app/views/my_modules/_state_button_uncomplete.html.erb +++ b/app/views/my_modules/_state_button_uncomplete.html.erb @@ -1,4 +1,4 @@ - \ No newline at end of file diff --git a/app/views/my_modules/modals/_manage_module_tags_modal.html.erb b/app/views/my_modules/modals/_manage_module_tags_modal.html.erb index 94f977386..2c1ac7c50 100644 --- a/app/views/my_modules/modals/_manage_module_tags_modal.html.erb +++ b/app/views/my_modules/modals/_manage_module_tags_modal.html.erb @@ -7,7 +7,7 @@
- +
diff --git a/app/views/my_modules/modals/_manage_users_modal.html.erb b/app/views/my_modules/modals/_manage_users_modal.html.erb index baf988374..da9e7b5c0 100644 --- a/app/views/my_modules/modals/_manage_users_modal.html.erb +++ b/app/views/my_modules/modals/_manage_users_modal.html.erb @@ -15,7 +15,7 @@ <%=t "experiments.canvas.full_zoom.modal_manage_users.contact_admins", team: @experiment.project.team.name %> <% end %> - + diff --git a/app/views/my_modules/protocols/_copy_to_repository_modal.html.erb b/app/views/my_modules/protocols/_copy_to_repository_modal.html.erb index 5c2e0c95d..ef4ef7c0d 100644 --- a/app/views/my_modules/protocols/_copy_to_repository_modal.html.erb +++ b/app/views/my_modules/protocols/_copy_to_repository_modal.html.erb @@ -9,8 +9,8 @@
- - + +
diff --git a/app/views/my_modules/protocols/_load_from_repository_modal.html.erb b/app/views/my_modules/protocols/_load_from_repository_modal.html.erb index fb60bab63..6f256964a 100644 --- a/app/views/my_modules/protocols/_load_from_repository_modal.html.erb +++ b/app/views/my_modules/protocols/_load_from_repository_modal.html.erb @@ -9,8 +9,8 @@
- - + +
diff --git a/app/views/my_modules/protocols/_protocol_buttons.html.erb b/app/views/my_modules/protocols/_protocol_buttons.html.erb index 421dbbd3d..327956e9c 100644 --- a/app/views/my_modules/protocols/_protocol_buttons.html.erb +++ b/app/views/my_modules/protocols/_protocol_buttons.html.erb @@ -1,6 +1,6 @@
-
-
@@ -25,17 +25,17 @@
  •  <%= t("my_modules.protocols.buttons.load_protocol_from_file") %>
    • <% end %> + <% if can_read_experiment?(@my_module.experiment) %> + <%= link_to raw(" " + t('my_modules.protocols.buttons.export') + ""), export_protocols_path(protocol_ids: @protocol.id, my_module_id: @my_module.id), class: "btn btn-secondary", data: { turbolinks: false } %> + <% else %> +  <%= t("my_modules.protocols.buttons.export") %> + <% end %> + <% if can_read_protocol_in_module?(@protocol) && can_create_protocols_in_repository?(@protocol.team) %> + +  <%= t("my_modules.protocols.buttons.copy_to_repository") %> + + <% else %> +  <%= t("my_modules.protocols.buttons.copy_to_repository") %> + <% end %>
    - <% if can_read_experiment?(@my_module.experiment) %> - <%= link_to raw(" " + t('my_modules.protocols.buttons.export') + ""), export_protocols_path(protocol_ids: @protocol.id, my_module_id: @my_module.id), class: "btn btn-default", data: { turbolinks: false } %> - <% else %> -  <%= t("my_modules.protocols.buttons.export") %> - <% end %> - <% if can_read_protocol_in_module?(@protocol) && can_create_protocols_in_repository?(@protocol.team) %> - -  <%= t("my_modules.protocols.buttons.copy_to_repository") %> - - <% else %> -  <%= t("my_modules.protocols.buttons.copy_to_repository") %> - <% end %>
    diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb index 3f0e9bb80..074a4f596 100644 --- a/app/views/my_modules/results.html.erb +++ b/app/views/my_modules/results.html.erb @@ -6,45 +6,47 @@
    -
    - -
    <% if can_manage_module?(@my_module) %> -
    - - - - - - - - - - - - - - <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb', - locals: { element_id: @my_module.id, element_type: 'Result', sketch_container: "#results[data-module-id=#{@my_module.id}]" } %> - <%= render partial: "assets/wopi/create_wopi_file_button", - locals: { element_id: @my_module.id, element_type: 'Result' } %> + +
    + + + + + + + + + + + + + <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb', + locals: { element_id: @my_module.id, element_type: 'Result', sketch_container: "#results[data-module-id=#{@my_module.id}]" } %> + <%= render partial: "assets/wopi/create_wopi_file_button", + locals: { element_id: @my_module.id, element_type: 'Result' } %> +
    <% end %>
    diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 6c1fdcf58..33210803a 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -1,5 +1,6 @@ -<% provide(:head_title, t("projects.index.head_title")) %> +<% provide(:head_title, t("projects.index.head_title")) %> + <% if current_team %> <%= render partial: "shared/sidebar", locals: { page: 'project' } %> <%= render partial: "shared/secondary_navigation" %> @@ -18,8 +19,8 @@ <%= render partial: "new.html.erb", locals: { form: f, teams: @teams } %>
    - - <%= f.submit t("projects.index.modal_new_project.create"), class: "btn btn-success help_tooltips", + + <%= f.submit t("projects.index.modal_new_project.create"), class: "btn btn-primary help_tooltips", data: { tooltiplink: I18n.t('tooltips.link.new_project'), tooltipcontent: I18n.t('tooltips.text.new_project') @@ -42,8 +43,8 @@
    - - + +
    @@ -74,11 +75,11 @@
    - - + + @@ -95,7 +96,7 @@ <% if @teams.exists? && can_create_projects?(current_team) %>

    <%=t 'projects.index.no_projects.title' %>


    - + @@ -121,7 +122,7 @@
    - @@ -139,7 +140,7 @@
    - diff --git a/app/views/protocol_importers/_preview_modal_footer.html.erb b/app/views/protocol_importers/_preview_modal_footer.html.erb index 6a05e76a8..426d69436 100644 --- a/app/views/protocol_importers/_preview_modal_footer.html.erb +++ b/app/views/protocol_importers/_preview_modal_footer.html.erb @@ -1,3 +1,3 @@ - + diff --git a/app/views/protocol_importers/_protocol_card.html.erb b/app/views/protocol_importers/_protocol_card.html.erb index ef6d1cc1d..4b3ac571c 100644 --- a/app/views/protocol_importers/_protocol_card.html.erb +++ b/app/views/protocol_importers/_protocol_card.html.erb @@ -19,7 +19,7 @@
    <% if show_import_button %> - + <% end %>
    diff --git a/app/views/protocols/_steps.html.erb b/app/views/protocols/_steps.html.erb index 304921870..e03b9f9d3 100644 --- a/app/views/protocols/_steps.html.erb +++ b/app/views/protocols/_steps.html.erb @@ -10,10 +10,10 @@
    - + - +
    diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index e4bd1ded1..f405e3d09 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -28,39 +28,38 @@
    <%= t(@type == :public ? "protocols.index.public_description" : "protocols.index.private_description") %>
    -
    - data-url="<%= create_new_modal_protocols_path(team: @current_team, type: @type) %>"> +
    + + + <% if @type == :public %> - + <% elsif @type == :private %> - + <% end %>
    -
    - + <% if can_create_protocols_in_repository?(@current_team) %> <% end %> - +
    -
    - +
    +
    <% elsif @type == :archive %>
    <%= t("protocols.index.archive.description") %>
    -
    - +
    +
    <% end %> diff --git a/app/views/protocols/index/_create_new_modal.html.erb b/app/views/protocols/index/_create_new_modal.html.erb index 22047f3d0..1a483c4de 100644 --- a/app/views/protocols/index/_create_new_modal.html.erb +++ b/app/views/protocols/index/_create_new_modal.html.erb @@ -9,8 +9,8 @@
    - - + +
    diff --git a/app/views/protocols/index/_protocol_preview_modal.html.erb b/app/views/protocols/index/_protocol_preview_modal.html.erb index 68f35c55b..5ea63c0cb 100644 --- a/app/views/protocols/index/_protocol_preview_modal.html.erb +++ b/app/views/protocols/index/_protocol_preview_modal.html.erb @@ -3,8 +3,8 @@
    - +
    diff --git a/app/views/protocols/index/_protocol_preview_modal_body.html.erb b/app/views/protocols/index/_protocol_preview_modal_body.html.erb index 45d57430d..81a14427c 100644 --- a/app/views/protocols/index/_protocol_preview_modal_body.html.erb +++ b/app/views/protocols/index/_protocol_preview_modal_body.html.erb @@ -3,7 +3,7 @@
    -

    <%= t("protocols.steps.subtitle") %>

    +

    <%= t("protocols.steps.subtitle") %>

    diff --git a/app/views/protocols/index/_protocol_preview_modal_footer.html.erb b/app/views/protocols/index/_protocol_preview_modal_footer.html.erb index 5bf6d9a20..36fcabba2 100644 --- a/app/views/protocols/index/_protocol_preview_modal_footer.html.erb +++ b/app/views/protocols/index/_protocol_preview_modal_footer.html.erb @@ -1,4 +1,4 @@ - + <% if can_manage_protocol_in_repository?(@protocol) %> <%= route_to_other_team_btn edit_protocol_path(protocol), protocol.team, diff --git a/app/views/reports/index.html.erb b/app/views/reports/index.html.erb index 0c9bcf20f..08acfca06 100644 --- a/app/views/reports/index.html.erb +++ b/app/views/reports/index.html.erb @@ -14,11 +14,11 @@ <% end %> - <%= link_to "", remote: true, class: "btn btn-default", id: "edit-report-btn" do %> + <%= link_to "", remote: true, class: "btn btn-secondary", id: "edit-report-btn" do %> <% end %> - <%= link_to "", remote: true, class: "btn btn-default", id: "delete-reports-btn" do %> + <%= link_to "", remote: true, class: "btn btn-secondary", id: "delete-reports-btn" do %> <% end %> @@ -97,9 +97,9 @@
    - + diff --git a/app/views/reports/new.html.erb b/app/views/reports/new.html.erb index 88f669d8a..f7f04750a 100644 --- a/app/views/reports/new.html.erb +++ b/app/views/reports/new.html.erb @@ -50,8 +50,8 @@
    - - + +
    @@ -67,8 +67,8 @@
    - - + +
    diff --git a/app/views/reports/new/_report_navigation.html.erb b/app/views/reports/new/_report_navigation.html.erb index 8b1f39b45..bb43484d7 100644 --- a/app/views/reports/new/_report_navigation.html.erb +++ b/app/views/reports/new/_report_navigation.html.erb @@ -2,7 +2,7 @@
    - <%= link_to "", class: "btn btn-default", remote: true, id: "print-report" do %> + <%= link_to "", class: "btn btn-secondary", remote: true, id: "print-report" do %> <% end %>
    - + <% if @available_repositories && @available_repositories.length > 0 %> <%= f.submit t("general.save"), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: "Results.processResult(event, Results.ResultTypeEnum.FILE);" %>
    <% end %> diff --git a/app/views/result_assets/_new.html.erb b/app/views/result_assets/_new.html.erb index 021f222d4..62f7d08a2 100644 --- a/app/views/result_assets/_new.html.erb +++ b/app/views/result_assets/_new.html.erb @@ -22,10 +22,10 @@
    <%= f.submit t('general.cancel'), - class: 'btn btn-default cancel-new', + class: 'btn btn-secondary cancel-new', onclick: 'DragNDropResults.destroyAll();' %> <%= f.submit t('result_assets.new.create'), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: 'DragNDropResults.processResult(event);', disabled: true, data: { href: my_module_result_assets_path(format: :json) } %> diff --git a/app/views/result_tables/_edit.html.erb b/app/views/result_tables/_edit.html.erb index 0a050296b..c483d4416 100644 --- a/app/views/result_tables/_edit.html.erb +++ b/app/views/result_tables/_edit.html.erb @@ -12,11 +12,11 @@
    - <%= f.submit t("general.save"), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: "Results.processResult(event, Results.ResultTypeEnum.TABLE);" %>
    <% end %> diff --git a/app/views/result_tables/_new.html.erb b/app/views/result_tables/_new.html.erb index dc9b5ab98..529a8f6c3 100644 --- a/app/views/result_tables/_new.html.erb +++ b/app/views/result_tables/_new.html.erb @@ -11,11 +11,11 @@ <% end %>
    - <%= f.submit t("result_tables.new.create"), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: "Results.processResult(event, Results.ResultTypeEnum.TABLE);" %>
    <% end %> diff --git a/app/views/result_texts/_edit.html.erb b/app/views/result_texts/_edit.html.erb index 79c07b696..15350760a 100644 --- a/app/views/result_texts/_edit.html.erb +++ b/app/views/result_texts/_edit.html.erb @@ -14,11 +14,11 @@ last_updated: @result.updated_at.to_i * 1000 }) %> <% end %>
    - <%= f.submit t("general.save"), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: "Results.processResult(event, Results.ResultTypeEnum.TEXT);" %>
    <% end %> diff --git a/app/views/result_texts/_new.html.erb b/app/views/result_texts/_new.html.erb index 79f97aa5e..402654d18 100644 --- a/app/views/result_texts/_new.html.erb +++ b/app/views/result_texts/_new.html.erb @@ -13,11 +13,11 @@ last_updated: @result.updated_at.to_i * 1000 }) %> <% end %>
    - <%= f.submit t("result_texts.new.create"), - class: 'btn btn-success save-result', + class: 'btn btn-primary save-result', onclick: "Results.processResult(event, Results.ResultTypeEnum.TEXT);" %>
    <% end %> diff --git a/app/views/shared/_invite_users_modal.html.erb b/app/views/shared/_invite_users_modal.html.erb index c7dada5c8..8441bab5c 100644 --- a/app/views/shared/_invite_users_modal.html.erb +++ b/app/views/shared/_invite_users_modal.html.erb @@ -115,12 +115,12 @@ invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
    - - <%= link_to(root_path, class: 'navbar-brand', title: t('nav.label.scinote')) do %> - <%= image_tag('/images/scinote_icon.jpg', id: 'logo') %> + <%= image_tag('/images/scinote_icon.svg', id: 'logo') %> <% end %>
    diff --git a/app/views/shared/_secondary_navigation.html.erb b/app/views/shared/_secondary_navigation.html.erb index df101081f..4b8db00ed 100644 --- a/app/views/shared/_secondary_navigation.html.erb +++ b/app/views/shared/_secondary_navigation.html.erb @@ -43,15 +43,11 @@
  • diff --git a/app/views/steps/_edit.html.erb b/app/views/steps/_edit.html.erb index 045839823..5b52de563 100644 --- a/app/views/steps/_edit.html.erb +++ b/app/views/steps/_edit.html.erb @@ -3,10 +3,10 @@

    <%= t("protocols.steps.edit.edit_step_title") %>

    <%= render partial: "empty_step.html.erb", locals: {step: @step, f: f} %>
    - + <%= t("general.cancel")%> - <%= f.submit t("protocols.steps.edit.edit_step"), class: 'btn btn-success step-save', onclick: "processStep(event, true);" %> + <%= f.submit t("protocols.steps.edit.edit_step"), class: 'btn btn-primary step-save', onclick: "processStep(event, true);" %>
    <% end %>
    • diff --git a/app/views/steps/_new.html.erb b/app/views/steps/_new.html.erb index 8aa2b461c..b39734504 100644 --- a/app/views/steps/_new.html.erb +++ b/app/views/steps/_new.html.erb @@ -3,10 +3,10 @@

    <%= t("protocols.steps.new.add_step_title") %>

    <%= render partial: "empty_step.html.erb", locals: {step: @step, f: f} %>
    - - <%= f.submit t("protocols.steps.new.add_step"), class: 'btn btn-success step-save', onclick: "processStep(event, false);" %> + <%= f.submit t("protocols.steps.new.add_step"), class: 'btn btn-primary step-save', onclick: "processStep(event, false);" %>
    <% end %> diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb index 6959e3223..e2f562f63 100644 --- a/app/views/steps/_step.html.erb +++ b/app/views/steps/_step.html.erb @@ -9,7 +9,7 @@
    - @@ -18,7 +18,7 @@
    - @@ -29,25 +29,25 @@ <% if (can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol)) && !(preview) %> " data-remote="true"> " data-remote="true"> " href="<%= edit_step_path(step, format: :json) %>" data-remote="true" > - <%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link", + <%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-light icon-btn", data: {action: "delete-step", confirm: t("protocols.steps.destroy.confirm", step: step.name)}) do %> <% end %> diff --git a/app/views/users/shared/_user_avatars_modal.html.erb b/app/views/users/shared/_user_avatars_modal.html.erb index d1e73dc4f..185aeb8c1 100644 --- a/app/views/users/shared/_user_avatars_modal.html.erb +++ b/app/views/users/shared/_user_avatars_modal.html.erb @@ -32,7 +32,7 @@
    - +
    diff --git a/public/images/scinote_icon.svg b/public/images/scinote_icon.svg new file mode 100644 index 000000000..a50cd9114 --- /dev/null +++ b/public/images/scinote_icon.svg @@ -0,0 +1,5 @@ + + + + +