mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-03-03 19:24:48 +08:00
Merge pull request #5614 from aignatov-bio/ai-sci-8658-css-fixes
UX fixes [SCI-8658][SCI-8667][SCI-8668][SCI-8669][SCI-8672][SCI-8660][SCI-8662]
This commit is contained in:
aignatov-bio
GitHub
commit
e4076c931a
21 changed files with 86 additions and 66 deletions
|
|
@ -6,11 +6,11 @@ var DasboardCalendarWidget = (function() {
|
|||
return `<script id="calendar-template" type="text/template">
|
||||
<div class="controls">
|
||||
<div class="clndr-previous-button">
|
||||
<div class="btn btn-light icon-btn"><i class="sn-icon sn-icon-double-navigate-before"></i></div>
|
||||
<div class="btn btn-light icon-btn"><i class="sn-icon sn-icon-left"></i></div>
|
||||
</div>
|
||||
<div class="clndr-title"><%= month %> <%= year %></div>
|
||||
<div class="clndr-next-button">
|
||||
<div class="btn btn-light icon-btn"><i class="sn-icon sn-icon sn-icon-double-navigate-after"></i></div>
|
||||
<div class="btn btn-light icon-btn"><i class="sn-icon sn-icon sn-icon-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="days-container">
|
||||
|
|
|
|||
|
|
@ -247,14 +247,14 @@ var RepositoryColumns = (function() {
|
|||
|
||||
if (column.header.id !== 'row-name') {
|
||||
if (column.visible()) {
|
||||
self.addClass('fa-eye-slash');
|
||||
self.removeClass('fa-eye');
|
||||
self.addClass('sn-icon-visibility-hide');
|
||||
self.removeClass('sn-icon-visibility-show');
|
||||
li.addClass('col-invisible');
|
||||
column.visible(false);
|
||||
TABLE.setColumnSearchable(column.index(), false);
|
||||
} else {
|
||||
self.addClass('fa-eye');
|
||||
self.removeClass('fa-eye-slash');
|
||||
self.addClass('sn-icon-visibility-show');
|
||||
self.removeClass('sn-icon-visibility-hide');
|
||||
li.removeClass('col-invisible');
|
||||
column.visible(true);
|
||||
TABLE.setColumnSearchable(column.index(), true);
|
||||
|
|
@ -321,7 +321,9 @@ var RepositoryColumns = (function() {
|
|||
<span class="vis sn-icon ${visClass}" title="${visText}"></span>
|
||||
</span>
|
||||
<span class="text">${generateColumnNameTooltip(thederName)}</span>
|
||||
<span class="column-type pull-right">${getColumnTypeText(el, colId)}</span>
|
||||
<span class="column-type pull-right">${
|
||||
getColumnTypeText(el, colId) || '<i class="sn-icon sn-icon-locked-task"></i>'
|
||||
}</span>
|
||||
<span class="sci-btn-group manage-controls pull-right" data-view-mode="active">
|
||||
<button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
|
||||
data-action="edit"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
function initShowPassword() {
|
||||
$('.fas.fa-eye.show-password').remove();
|
||||
$('.sn-icon.sn-icon-visibility-show.show-password').remove();
|
||||
$.each($('input[type="password"]'), function(i, e) {
|
||||
$(`<i class="sn-icon sn-icon-visibility-show show-password"
|
||||
style="
|
||||
|
|
@ -17,11 +17,11 @@ $(document).on('turbolinks:load', function() {
|
|||
|
||||
$(document).on('click', '.show-password', function() {
|
||||
let $icon = $(this);
|
||||
if ($icon.hasClass('fa-eye')) {
|
||||
$icon.removeClass('fa-eye').addClass('fa-eye-slash');
|
||||
if ($icon.hasClass('sn-icon-visibility-show')) {
|
||||
$icon.removeClass('sn-icon-visibility-show').addClass('sn-icon-visibility-hide');
|
||||
$icon.parent().find('input[type=password]').attr('type', 'text');
|
||||
} else {
|
||||
$icon.removeClass('fa-eye-slash').addClass('fa-eye');
|
||||
$icon.removeClass('sn-icon-visibility-hide').addClass('sn-icon-visibility-show');
|
||||
$icon.parent().find('input[type=text]').attr('type', 'password');
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
}
|
||||
|
||||
.actions-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding-left: 10px;
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
justify-content: space-between;
|
||||
|
||||
.toolbar-left-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
|
|
|
|||
|
|
@ -137,32 +137,32 @@
|
|||
}
|
||||
|
||||
&.previous {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
&::before {
|
||||
@include font-awesome;
|
||||
content: $font-fas-angle-left;
|
||||
left: 0;
|
||||
line-height: 36px;
|
||||
padding: 0 8px;
|
||||
position: absolute;
|
||||
@include font-sn-icon;
|
||||
content: $sn-icon-left;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 23px;
|
||||
min-height: unset;
|
||||
padding-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
&::before {
|
||||
@include font-awesome;
|
||||
content: $font-fas-angle-right;
|
||||
line-height: 36px;
|
||||
padding: 0 8px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
&::after {
|
||||
@include font-sn-icon;
|
||||
content: $sn-icon-right;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-right: 23px;
|
||||
min-height: unset;
|
||||
padding-right: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -169,7 +169,10 @@
|
|||
}
|
||||
|
||||
.breadcrumb.breadcrumb-repository {
|
||||
align-items: center;
|
||||
background-color: $color-concrete;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -424,13 +427,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.barcode-scanner {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
.search-field {
|
||||
padding-right: 32px;
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
padding: 1px 8px;
|
||||
position: relative;
|
||||
|
||||
.fas.fa-pencil-alt {
|
||||
.sn-icon.sn-icon-edit {
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -166,14 +166,6 @@
|
|||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.editable) {
|
||||
.column-type::before {
|
||||
@include font-awesome;
|
||||
content: $font-fas-lock;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-position] {
|
||||
|
|
@ -218,8 +210,8 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
|
||||
&:not(.fa-eye):not(.fa-eye-slash) {
|
||||
padding-right: 15px;
|
||||
&:not(.sn-icon-visibility-show):not(.sn-icon-visibility-hide) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,6 +84,15 @@
|
|||
.pagination-info,
|
||||
.pagination-actions {
|
||||
flex-grow: 1;
|
||||
|
||||
.pagination,
|
||||
.dataTables_paginate {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-end;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
|
|
@ -102,6 +111,7 @@
|
|||
}
|
||||
|
||||
.dataTables_length {
|
||||
height: 2.25rem;
|
||||
margin-right: 24px;
|
||||
width: 170px;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ $font-fas-exclamation-circle: "\f06a";
|
|||
$font-fas-caret-up: "\f0d8";
|
||||
$font-fas-plus: "\f02b";
|
||||
|
||||
$sn-icon-left: "\e932";
|
||||
$sn-icon-right: "\e931";
|
||||
|
||||
.sn-icon {
|
||||
font-size: 24px !important;
|
||||
vertical-align: middle;
|
||||
|
|
@ -68,6 +71,11 @@ $font-fas-plus: "\f02b";
|
|||
font-weight: 501;
|
||||
}
|
||||
|
||||
@mixin font-sn-icon {
|
||||
font-family: "SN-icon-font";
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
@apply relative 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 {
|
||||
|
|
|
|||
|
|
@ -568,7 +568,7 @@ mark,.mark {
|
|||
float: right;
|
||||
|
||||
.pagination {
|
||||
margin: 2px 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -71,6 +71,13 @@
|
|||
.tinymce-cancel-button.tox-mbtn {
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.fas {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@
|
|||
if (!newTeam) return;
|
||||
|
||||
$.post(this.teamSwitchUrl, {team_id: team}, (result) => {
|
||||
this.currentTeam = result.currentTeam
|
||||
this.currentTeam = result.current_team
|
||||
dropdownSelector.selectValues('#sciNavigationTeamSelector', this.currentTeam);
|
||||
$('body').attr('data-current-team-id', this.currentTeam);
|
||||
window.open(this.rootUrl, '_self')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex items-center mr-3 flex-nowrap">
|
||||
<button v-if="!searchOpened" class="btn btn-light icon-btn" @click="openSearch">
|
||||
<button v-if="!searchOpened" class="btn btn-light btn-black icon-btn" @click="openSearch">
|
||||
<i class="sn-icon sn-icon-search"></i>
|
||||
</button>
|
||||
<div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<i class='sn-icon sn-icon-barcode barcode-scanner'></i>
|
||||
</div>
|
||||
</div>
|
||||
<button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" @click="openBarcodeSearch">
|
||||
<button v-if="!barcodeSearchOpened" class="btn btn-light btn-black icon-btn ml-2" @click="openBarcodeSearch">
|
||||
<i class='sn-icon sn-icon-barcode barcode-scanner'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ module Toolbars
|
|||
{
|
||||
name: 'share',
|
||||
label: I18n.t('repositories.index.share_inventory'),
|
||||
icon: 'sn-icon sn-icon-user-menu-plus',
|
||||
icon: 'sn-icon sn-icon-shared',
|
||||
button_class: 'share-repository-button',
|
||||
path: team_repository_share_modal_path(@current_team, repository_id: @repository),
|
||||
type: 'remote-modal'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
|
||||
<div class="actions-container">
|
||||
<div class="filter-container dropdown">
|
||||
<div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></div>
|
||||
<div class="btn btn-light btn-sm icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></div>
|
||||
<div class="dropdown-menu current-tasks-filters" role="menu" data-team-id="<%= current_team.id %>">
|
||||
<div class="header">
|
||||
<div class="title"><%= t("dashboard.current_tasks.filter.title") %></div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
|
||||
method: :put,
|
||||
remote: true,
|
||||
class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' } prevent-shrink",
|
||||
class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' } prevent-shrink justify-start",
|
||||
form_class: 'change-my-modules-view-type-form',
|
||||
params: { experiment: { view_type: 'table', id: @experiment.id } }) do %>
|
||||
<span class="<%= 'text-light' if action_name == 'table' %>">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
|
||||
method: :put,
|
||||
remote: true,
|
||||
class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'} prevent-shrink",
|
||||
class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'} prevent-shrink justify-start",
|
||||
form_class: 'change-my-modules-view-type-form',
|
||||
params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
|
||||
<span class="<%= 'text-light' if action_name == 'module_archive' %>">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<%= button_to(view_type_experiment_path(@experiment),
|
||||
method: :put,
|
||||
remote: true,
|
||||
class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' } prevent-shrink",
|
||||
class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' } prevent-shrink justify-start",
|
||||
form_class: 'change-my-modules-view-type-form',
|
||||
params: { experiment: { view_type: 'table', id: @experiment.id } }) do %>
|
||||
<span class="<%= 'text-light' if action_name == 'table' %>">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<%= button_to(view_type_experiment_path(@experiment),
|
||||
method: :put,
|
||||
remote: true,
|
||||
class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'} prevent-shrink",
|
||||
class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'} prevent-shrink justify-start",
|
||||
form_class: 'change-my-modules-view-type-form',
|
||||
params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
|
||||
<span class="<%= 'text-light' if action_name == 'canvas' %>">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</li>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<%= render partial: 'shared/state_view_switch', locals: {
|
||||
disabled: false,
|
||||
switchable: true,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<% end %>
|
||||
|
||||
<span id="saveCancel" data-toggle="buttons" style="display:none">
|
||||
<button type="button" class="btn btn-success prevent-shrink" id="saveRecord" data-view-mode="active">
|
||||
<button type="button" class="btn btn-primary prevent-shrink" id="saveRecord" data-view-mode="active">
|
||||
<span class="fas fa-save"></span>
|
||||
<%= t("repositories.save_record") %>
|
||||
</button>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</div>
|
||||
<% end %>
|
||||
<div class="repo-datatables-buttons">
|
||||
<button class="btn btn-light manage-repo-column-index"
|
||||
<button class="btn btn-light btn-black icon-btn manage-repo-column-index"
|
||||
data-modal-url="<%= repository_repository_columns_path(@repository) %>"
|
||||
data-action="new">
|
||||
<span class="sn-icon sn-icon sn-icon-reports">
|
||||
|
|
|
|||
19
vendor/assets/stylesheets/datatables.css
vendored
19
vendor/assets/stylesheets/datatables.css
vendored
|
|
@ -102,24 +102,27 @@ table.dataTable thead .sorting_asc:after,
|
|||
table.dataTable thead .sorting_desc:after,
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
table.dataTable thead .sorting_desc_disabled:after {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
font-family: 'Glyphicons Halflings';
|
||||
bottom: 12px;
|
||||
display: inline-block;
|
||||
font-family: 'SN-icon-font' !important;
|
||||
font-size: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
}
|
||||
table.dataTable thead .sorting:after {
|
||||
opacity: 0.2;
|
||||
content: "\e150";
|
||||
content: "\e915";
|
||||
/* sort */
|
||||
}
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: "\e155";
|
||||
content: "\e916";
|
||||
/* sort-by-attributes */
|
||||
}
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: "\e156";
|
||||
content: "\e917";
|
||||
/* sort-by-attributes-alt */
|
||||
}
|
||||
table.dataTable thead .sorting_asc_disabled:after,
|
||||
|
|
|
|||
Loading…
Reference in a new issue