mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 15:36:22 +08:00
Merge pull request #5594 from aignatov-bio/ai-sci-8558-add-new-buttons-ui
Add new button style [SCI-8558]
This commit is contained in:
commit
85949b33aa
|
@ -102,7 +102,7 @@ var ExperimnetTable = {
|
||||||
$.each(data.columns, (_i, cell) => {
|
$.each(data.columns, (_i, cell) => {
|
||||||
let hidden = '';
|
let hidden = '';
|
||||||
|
|
||||||
if ($(`.table-display-modal .fa-eye-slash[data-column="${cell.column_type}"]`).length === 1) {
|
if ($(`.table-display-modal .sn-icon-visibility-hide[data-column="${cell.column_type}"]`).length === 1) {
|
||||||
hidden = 'hidden';
|
hidden = 'hidden';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -509,30 +509,30 @@ var ExperimnetTable = {
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
initManageColumnsModal: function() {
|
initManageColumnsModal: function() {
|
||||||
$.each($('.table-display-modal .fa-eye-slash'), (_i, column) => {
|
$.each($('.table-display-modal .sn-icon-visibility-hide'), (_i, column) => {
|
||||||
$(column).parent().removeClass('visible');
|
$(column).parent().removeClass('visible');
|
||||||
});
|
});
|
||||||
$('.experiment-table')[0].style
|
$('.experiment-table')[0].style
|
||||||
.setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
|
.setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
|
||||||
|
|
||||||
$('.table-display-modal').on('click', '.column-container .fas', (e) => {
|
$('.table-display-modal').on('click', '.column-container .sn-icon', (e) => {
|
||||||
let icon = $(e.target);
|
let icon = $(e.target);
|
||||||
if (icon.hasClass('fa-eye')) {
|
if (icon.hasClass('sn-icon-visibility-show')) {
|
||||||
$(`.experiment-table .${icon.data('column')}-column`).addClass('hidden');
|
$(`.experiment-table .${icon.data('column')}-column`).addClass('hidden');
|
||||||
icon.removeClass('fa-eye').addClass('fa-eye-slash');
|
icon.removeClass('sn-icon-visibility-show').addClass('sn-icon-visibility-hide');
|
||||||
icon.parent().removeClass('visible');
|
icon.parent().removeClass('visible');
|
||||||
} else {
|
} else {
|
||||||
$(`.experiment-table .${icon.data('column')}-column`).removeClass('hidden');
|
$(`.experiment-table .${icon.data('column')}-column`).removeClass('hidden');
|
||||||
icon.addClass('fa-eye').removeClass('fa-eye-slash');
|
icon.addClass('sn-icon-visibility-show').removeClass('sn-icon-visibility-hide');
|
||||||
icon.parent().addClass('visible');
|
icon.parent().addClass('visible');
|
||||||
}
|
}
|
||||||
|
|
||||||
let visibleColumns = $('.table-display-modal .fa-eye').map((_i, col) => col.dataset.column).toArray();
|
let visibleColumns = $('.table-display-modal .sn-icon-visibility-show').map((_i, col) => col.dataset.column).toArray();
|
||||||
// Update columns on backend - $.post('', { columns: visibleColumns }, () => {});
|
// Update columns on backend - $.post('', { columns: visibleColumns }, () => {});
|
||||||
$.post($('.table-display-modal').data('column-state-url'), { columns: visibleColumns }, () => {});
|
$.post($('.table-display-modal').data('column-state-url'), { columns: visibleColumns }, () => {});
|
||||||
|
|
||||||
$('.experiment-table')[0].style
|
$('.experiment-table')[0].style
|
||||||
.setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
|
.setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
clearRowTaskSelection: function() {
|
clearRowTaskSelection: function() {
|
||||||
|
|
|
@ -12,7 +12,56 @@
|
||||||
@import "constants";
|
@import "constants";
|
||||||
|
|
||||||
@import "bootstrap-sprockets";
|
@import "bootstrap-sprockets";
|
||||||
@import "bootstrap";
|
// Core variables and mixins
|
||||||
|
@import "bootstrap/variables";
|
||||||
|
@import "bootstrap/mixins";
|
||||||
|
|
||||||
|
// Reset and dependencies
|
||||||
|
@import "bootstrap/normalize";
|
||||||
|
@import "bootstrap/print";
|
||||||
|
@import "bootstrap/glyphicons";
|
||||||
|
|
||||||
|
// Core CSS
|
||||||
|
@import "bootstrap/scaffolding";
|
||||||
|
@import "bootstrap/type";
|
||||||
|
@import "bootstrap/code";
|
||||||
|
@import "bootstrap/grid";
|
||||||
|
@import "bootstrap/tables";
|
||||||
|
@import "bootstrap/forms";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@import "bootstrap/component-animations";
|
||||||
|
@import "bootstrap/dropdowns";
|
||||||
|
@import "bootstrap/button-groups";
|
||||||
|
@import "bootstrap/input-groups";
|
||||||
|
@import "bootstrap/navs";
|
||||||
|
@import "bootstrap/navbar";
|
||||||
|
@import "bootstrap/breadcrumbs";
|
||||||
|
@import "bootstrap/pagination";
|
||||||
|
@import "bootstrap/pager";
|
||||||
|
@import "bootstrap/labels";
|
||||||
|
@import "bootstrap/badges";
|
||||||
|
@import "bootstrap/jumbotron";
|
||||||
|
@import "bootstrap/thumbnails";
|
||||||
|
@import "bootstrap/alerts";
|
||||||
|
@import "bootstrap/progress-bars";
|
||||||
|
@import "bootstrap/media";
|
||||||
|
@import "bootstrap/list-group";
|
||||||
|
@import "bootstrap/panels";
|
||||||
|
@import "bootstrap/responsive-embed";
|
||||||
|
@import "bootstrap/wells";
|
||||||
|
@import "bootstrap/close";
|
||||||
|
|
||||||
|
// Components w/ JavaScript
|
||||||
|
@import "bootstrap/modals";
|
||||||
|
@import "bootstrap/tooltip";
|
||||||
|
@import "bootstrap/popovers";
|
||||||
|
@import "bootstrap/carousel";
|
||||||
|
|
||||||
|
// Utility classes
|
||||||
|
@import "bootstrap/utilities";
|
||||||
|
@import "bootstrap/responsive-utilities";
|
||||||
|
|
||||||
@import "bootstrap-datetimepicker";
|
@import "bootstrap-datetimepicker";
|
||||||
@import "bootstrap-colorselector";
|
@import "bootstrap-colorselector";
|
||||||
@import "bootstrap-tagsinput";
|
@import "bootstrap-tagsinput";
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import "tailwind/inputs";
|
@import "tailwind/inputs";
|
||||||
|
@import "tailwind/buttons";
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
|
|
|
@ -86,6 +86,7 @@
|
||||||
|
|
||||||
.quick-start-buttons {
|
.quick-start-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin-right: .25em;
|
margin-right: .25em;
|
||||||
|
|
|
@ -661,6 +661,7 @@ li.module-hover {
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -135,19 +135,6 @@
|
||||||
.sort-menu {
|
.sort-menu {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
#sortMenu {
|
|
||||||
background: $color-white;
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-concrete;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
@include font-button;
|
@include font-button;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
min-height: var(--datatable-pagination-row);
|
height: var(--datatable-pagination-row);
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
|
|
@ -8,7 +8,7 @@ $colors: ("sn-white": "#FFFFFF",
|
||||||
"sn-blue": "#104DA9",
|
"sn-blue": "#104DA9",
|
||||||
"sn-science-blue": "#3B99FD",
|
"sn-science-blue": "#3B99FD",
|
||||||
"sn-super-light-blue": "#F0F8FF",
|
"sn-super-light-blue": "#F0F8FF",
|
||||||
"sn-blue-hover": "#2D5FAA",
|
"sn-blue-hover": "#254981",
|
||||||
"sn-science-blue-hover": "#79B4F3",
|
"sn-science-blue-hover": "#79B4F3",
|
||||||
"sn-alert-green": "#5EC66F",
|
"sn-alert-green": "#5EC66F",
|
||||||
"sn-alert-violet": "#6F2DC1",
|
"sn-alert-violet": "#6F2DC1",
|
||||||
|
@ -25,6 +25,7 @@ $colors: ("sn-white": "#FFFFFF",
|
||||||
"sn-alert-science-blue-disabled": "#9DCCFE",
|
"sn-alert-science-blue-disabled": "#9DCCFE",
|
||||||
"sn-delete-red": "#CE0C24",
|
"sn-delete-red": "#CE0C24",
|
||||||
"sn-delete-red-hover": "#AD0015",
|
"sn-delete-red-hover": "#AD0015",
|
||||||
|
"sn-delete-red-disabled": "#F5D7DB",
|
||||||
"sn-coral": "#FB565B",
|
"sn-coral": "#FB565B",
|
||||||
"sn-background-blue": "#DBE4F2",
|
"sn-background-blue": "#DBE4F2",
|
||||||
"sn-background-green": "#E7F7E9",
|
"sn-background-green": "#E7F7E9",
|
||||||
|
|
|
@ -1,237 +0,0 @@
|
||||||
// scss-lint:disable NestingDepth
|
|
||||||
|
|
||||||
.btn{
|
|
||||||
@include font-button;
|
|
||||||
animation-timing-function: $timing-function-sharp;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: $border-radius-default;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: .25em;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 20px;
|
|
||||||
outline: 0;
|
|
||||||
padding: .5rem;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: .3s;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
box-shadow: none;
|
|
||||||
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,
|
|
||||||
&.active {
|
|
||||||
background: $brand-primary-press;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px $brand-complementary;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-secondary {
|
|
||||||
background: $color-white;
|
|
||||||
border: $border-default;
|
|
||||||
color: $color-volcano;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-concrete;
|
|
||||||
border: $border-secondary;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $color-alto;
|
|
||||||
border: $border-secondary;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px $brand-focus;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-light {
|
|
||||||
background: transparent;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $color-volcano;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-concrete;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $color-alto;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-color: $brand-focus;
|
|
||||||
color: $color-volcano;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-light-link {
|
|
||||||
background: transparent;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $brand-primary;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-concrete;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $brand-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $color-alto;
|
|
||||||
border: $border-transparent;
|
|
||||||
color: $brand-primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px $brand-focus;
|
|
||||||
color: $brand-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-danger {
|
|
||||||
background: $brand-danger;
|
|
||||||
border: $border-danger;
|
|
||||||
color: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $brand-danger-hover;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $brand-danger-press;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px $brand-focus;
|
|
||||||
color: $color-white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-dark-background {
|
|
||||||
background: $color-white;
|
|
||||||
border: $border-default;
|
|
||||||
color: $brand-primary;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $color-concrete;
|
|
||||||
color: $brand-primary-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&.active {
|
|
||||||
background: $color-alto;
|
|
||||||
color: $brand-primary-press;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: 0 0 0 1px $brand-focus;
|
|
||||||
color: $brand-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.icon-btn {
|
|
||||||
padding: 0;
|
|
||||||
width: 36px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-large {
|
|
||||||
font-size: $font-size-h2;
|
|
||||||
height: 3.1em;
|
|
||||||
padding: 1em 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled,
|
|
||||||
&:disabled {
|
|
||||||
color: $color-silver-chalice;
|
|
||||||
cursor: auto;
|
|
||||||
opacity: .5;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
&.btn-primary,
|
|
||||||
&.btn-danger {
|
|
||||||
background: $color-alto;
|
|
||||||
border: $border-tertiary;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border: $border-tertiary;
|
|
||||||
color: $color-silver-chalice;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-secondary,
|
|
||||||
&.btn-light,
|
|
||||||
&.btn-light-link,
|
|
||||||
&.btn-dark-background {
|
|
||||||
background: $color-white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $color-silver-chalice;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sci-btn-group {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
float: left;
|
|
||||||
margin: 2px 4px 2px 0;
|
|
||||||
|
|
||||||
.fas {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-last-child(1) {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
118
app/assets/stylesheets/tailwind/buttons.css
Normal file
118
app/assets/stylesheets/tailwind/buttons.css
Normal file
|
@ -0,0 +1,118 @@
|
||||||
|
@layer components {
|
||||||
|
.sci-btn-group {
|
||||||
|
@apply flex items-center gap-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
@apply inline-flex items-center shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.icon-btn {
|
||||||
|
@apply px-2 ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-lg {
|
||||||
|
@apply py-2.5 px-[1.125rem] text-base leading-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-lg.icon-btn {
|
||||||
|
@apply px-2.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-sm {
|
||||||
|
@apply py-1.5 px-2.5 text-xs leading-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-sm.icon-btn {
|
||||||
|
@apply px-1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-xs {
|
||||||
|
@apply py-0.5 px-2.5 text-xs leading-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-xs.icon-btn {
|
||||||
|
@apply px-0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
@apply no-underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:focus {
|
||||||
|
@apply no-underline outline-none;
|
||||||
|
box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover);
|
||||||
|
color: var(--sn-white);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:disabled,
|
||||||
|
.btn.disabled {
|
||||||
|
@apply cursor-not-allowed pointer-events-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary {
|
||||||
|
background-color: var(--sn-blue);
|
||||||
|
color: var(--sn-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary:hover {
|
||||||
|
background-color: var(--sn-blue-hover);
|
||||||
|
color: var(--sn-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-primary:disabled,
|
||||||
|
.btn.btn-primary.disabled {
|
||||||
|
background-color: var(--sn-light-grey);
|
||||||
|
border: 1px solid var(--sn-light-grey);
|
||||||
|
color: var(--sn-sleepy-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-secondary {
|
||||||
|
background-color: var(--sn-white);
|
||||||
|
border: 1px solid var(--sn-light-grey);
|
||||||
|
color: var(--sn-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-secondary:hover {
|
||||||
|
border: 1px solid var(--sn-blue-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-secondary:disabled,
|
||||||
|
.btn.btn-secondary.disabled {
|
||||||
|
background-color: var(--sn-white);
|
||||||
|
color: var(--sn-sleepy-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--sn-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light.btn-black {
|
||||||
|
color: var(--sb-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light:hover {
|
||||||
|
background-color: var(--sn-super-light-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-light:disabled,
|
||||||
|
.btn.btn-light.disabled {
|
||||||
|
color: var(--sn-sleepy-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-danger {
|
||||||
|
background-color: var(--sn-delete-red);
|
||||||
|
color: var(--sn-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-danger:hover {
|
||||||
|
background-color: var(--sn-delete-red-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-danger:disabled,
|
||||||
|
.btn.btn-danger.disabled {
|
||||||
|
background-color: var(--sn-delete-red-disabled);
|
||||||
|
}
|
||||||
|
}
|
|
@ -15,7 +15,7 @@
|
||||||
></Select>
|
></Select>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user" class="dropdown">
|
<div v-if="user" class="dropdown">
|
||||||
<button class="btn btn-light icon-btn" data-toggle="dropdown">
|
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
|
||||||
<i class="sn-icon sn-icon-help"></i>
|
<i class="sn-icon sn-icon-help"></i>
|
||||||
</button>
|
</button>
|
||||||
<ul v-if="user" class="dropdown-menu dropdown-menu-right">
|
<ul v-if="user" class="dropdown-menu dropdown-menu-right">
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user" class="dropdown">
|
<div v-if="user" class="dropdown">
|
||||||
<button class="btn btn-light icon-btn" data-toggle="dropdown">
|
<button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
|
||||||
<i class="sn-icon sn-icon-settings"></i>
|
<i class="sn-icon sn-icon-settings"></i>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu dropdown-menu-right">
|
<ul class="dropdown-menu dropdown-menu-right">
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user" class="sci--navigation--notificaitons-flyout-container">
|
<div v-if="user" class="sci--navigation--notificaitons-flyout-container">
|
||||||
<button class="btn btn-light icon-btn"
|
<button class="btn btn-light icon-btn btn-black"
|
||||||
:class="{ 'has-unseen': unseenNotificationsCount > 0 }"
|
:class="{ 'has-unseen': unseenNotificationsCount > 0 }"
|
||||||
:data-unseen="unseenNotificationsCount"
|
:data-unseen="unseenNotificationsCount"
|
||||||
data-toggle="dropdown"
|
data-toggle="dropdown"
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
@close="notificationsOpened = false" />
|
@close="notificationsOpened = false" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="user" class="dropdown">
|
<div v-if="user" class="dropdown">
|
||||||
<div class="sci--navigation--top-menu-user btn btn-light icon-btn" data-toggle="dropdown">
|
<div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
|
||||||
<img class="avatar w-6 h-6" :src="user.avatar_url">
|
<img class="avatar w-6 h-6" :src="user.avatar_url">
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
|
<div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
|
||||||
|
|
|
@ -84,6 +84,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</div>
|
||||||
<div class="dropdown sort-menu">
|
<div class="dropdown sort-menu">
|
||||||
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||||
<span><i class="sn-icon sn-icon-sort-down"></i></span>
|
<span><i class="sn-icon sn-icon-sort-down"></i></span>
|
||||||
|
@ -102,7 +103,6 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue