mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +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:
aignatov-bio
GitHub
commit
85949b33aa
|
|
@ -102,7 +102,7 @@ var ExperimnetTable = {
|
|||
$.each(data.columns, (_i, cell) => {
|
||||
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';
|
||||
}
|
||||
|
||||
|
|
@ -509,30 +509,30 @@ var ExperimnetTable = {
|
|||
return null;
|
||||
},
|
||||
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');
|
||||
});
|
||||
$('.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);
|
||||
if (icon.hasClass('fa-eye')) {
|
||||
if (icon.hasClass('sn-icon-visibility-show')) {
|
||||
$(`.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');
|
||||
} else {
|
||||
$(`.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');
|
||||
}
|
||||
|
||||
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 }, () => {});
|
||||
$.post($('.table-display-modal').data('column-state-url'), { columns: visibleColumns }, () => {});
|
||||
|
||||
$('.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() {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,56 @@
|
|||
@import "constants";
|
||||
|
||||
@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-colorselector";
|
||||
@import "bootstrap-tagsinput";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "tailwind/inputs";
|
||||
@import "tailwind/buttons";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
|
|
|||
|
|
@ -86,6 +86,7 @@
|
|||
|
||||
.quick-start-buttons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
margin-right: .25em;
|
||||
|
|
|
|||
|
|
@ -661,6 +661,7 @@ li.module-hover {
|
|||
|
||||
.right {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,19 +135,6 @@
|
|||
.sort-menu {
|
||||
display: inline-block;
|
||||
|
||||
#sortMenu {
|
||||
background: $color-white;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include font-button;
|
||||
min-width: 200px;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-height: var(--datatable-pagination-row);
|
||||
height: var(--datatable-pagination-row);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $colors: ("sn-white": "#FFFFFF",
|
|||
"sn-blue": "#104DA9",
|
||||
"sn-science-blue": "#3B99FD",
|
||||
"sn-super-light-blue": "#F0F8FF",
|
||||
"sn-blue-hover": "#2D5FAA",
|
||||
"sn-blue-hover": "#254981",
|
||||
"sn-science-blue-hover": "#79B4F3",
|
||||
"sn-alert-green": "#5EC66F",
|
||||
"sn-alert-violet": "#6F2DC1",
|
||||
|
|
@ -25,6 +25,7 @@ $colors: ("sn-white": "#FFFFFF",
|
|||
"sn-alert-science-blue-disabled": "#9DCCFE",
|
||||
"sn-delete-red": "#CE0C24",
|
||||
"sn-delete-red-hover": "#AD0015",
|
||||
"sn-delete-red-disabled": "#F5D7DB",
|
||||
"sn-coral": "#FB565B",
|
||||
"sn-background-blue": "#DBE4F2",
|
||||
"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>
|
||||
</div>
|
||||
<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>
|
||||
</button>
|
||||
<ul v-if="user" class="dropdown-menu dropdown-menu-right">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<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 }"
|
||||
:data-unseen="unseenNotificationsCount"
|
||||
data-toggle="dropdown"
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
@close="notificationsOpened = false" />
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
|
||||
|
|
|
|||
|
|
@ -84,24 +84,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<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">
|
||||
<span><i class="sn-icon sn-icon-sort-down"></i></span>
|
||||
</button>
|
||||
<ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
|
||||
<% end %>
|
||||
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>"
|
||||
data-sort="<%= sort %>" >
|
||||
<%= t("general.sort.#{sort}_html") %>
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
<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">
|
||||
<span><i class="sn-icon sn-icon-sort-down"></i></span>
|
||||
</button>
|
||||
<ul id="sortMenuDropdown" class="dropdown-menu sort-projects-menu dropdown-menu-right" aria-labelledby="sortMenu">
|
||||
<% %w(archived_new archived_old new old atoz ztoa id_asc id_desc).each_with_index do |sort, i| %>
|
||||
<% if i.even? && i.positive? %>
|
||||
<li class="divider" <%= i == 2 ? 'data-view-mode=archived' : '' %>></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
|
||||
<a class="<%= 'selected' if @current_sort == sort %>"
|
||||
data-sort="<%= sort %>" >
|
||||
<%= t("general.sort.#{sort}_html") %>
|
||||
</a>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue