scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-11 06:16:32 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix UI css fixes [SCI-8660]

Browse source
This commit is contained in:
Anton 2023-06-20 15:53:33 +02:00
parent 62411fb77b
commit f675034b7f
22 changed files with 75 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/global_activities/side_pane.js
View file

@ -228,18 +228,18 @@ var globalActivities = (function() {
${dateContainer[0].dataset.periodLabel} ${dateContainer[0].dataset.periodLabel}
${$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect} ${$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect}
</div> </div>
<i class="sn-icon sn-icon-close"></i> <i class="sn-icon sn-icon-close-small"></i>
</div>`).appendTo('.ga-top .ga-tags') </div>`).appendTo('.ga-top .ga-tags')
.find('.fa-times').click(() => { .find('.sn-icon-close-small').click(() => {
$('.date-selector .date.clear').click(); $('.date-selector .date.clear').click();
}); });
} }
$.each($('.ga-side .ds-tags'), function(index, tag) { $.each($('.ga-side .ds-tags'), function(index, tag) {
var newTag = $(tag.outerHTML).appendTo('.ga-top .ga-tags'); var newTag = $(tag.outerHTML).appendTo('.ga-top .ga-tags');
newTag.find('.fa-times') newTag.find('.sn-icon-close-small')
.click(function() { .click(function() {
newTag.addClass('closing'); newTag.addClass('closing');
$(tag).find('.fa-times').click(); $(tag).find('.sn-icon-close-small').click();
}); });
}); });
} }

8
app/assets/javascripts/reports/reports_datatable.js
View file

@ -25,7 +25,7 @@
if (data.error) { if (data.error) {
let oldLink = ''; let oldLink = '';
if (data.preview_url) { if (data.preview_url) {
oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 docx" data-preview-url="${data.preview_url}"> oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 docx hover:no-underline" data-preview-url="${data.preview_url}">
(<i class="fas fa-file-docx"></i> (<i class="fas fa-file-docx"></i>
${I18n.t('projects.reports.index.previous_docx')}) ${I18n.t('projects.reports.index.previous_docx')})
</a>`; </a>`;
@ -43,7 +43,7 @@
} }
if (data.preview_url) { if (data.preview_url) {
return `<a href="#" class="file-preview-link flex items-center gap-1 docx" data-preview-url="${data.preview_url}"> return `<a href="#" class="file-preview-link flex items-center gap-1 docx hover:no-underline" data-preview-url="${data.preview_url}">
<i class="sn-icon sn-icon-file-word"></i> <i class="sn-icon sn-icon-file-word"></i>
${I18n.t('projects.reports.index.docx')} ${I18n.t('projects.reports.index.docx')}
</a>`; </a>`;
@ -55,7 +55,7 @@
if (data.error) { if (data.error) {
let oldLink = ''; let oldLink = '';
if (data.preview_url) { if (data.preview_url) {
oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 pdf" data-preview-url="${data.preview_url}"> oldLink = `<a href="#" class="file-preview-link flex items-center gap-1 pdf hover:no-underline" data-preview-url="${data.preview_url}">
(<i class="fas fa-file-pdf"></i> (<i class="fas fa-file-pdf"></i>
${I18n.t('projects.reports.index.previous_pdf')}) ${I18n.t('projects.reports.index.previous_pdf')})
</a>`; </a>`;
@ -73,7 +73,7 @@
} }
if (data.preview_url) { if (data.preview_url) {
return `<a href="#" class="file-preview-link flex items-center gap-1 pdf" data-preview-url="${data.preview_url}"> return `<a href="#" class="file-preview-link flex items-center gap-1 pdf hover:no-underline" data-preview-url="${data.preview_url}">
<i class="fas fa-file-pdf"></i> <i class="fas fa-file-pdf"></i>
${I18n.t('projects.reports.index.pdf')} ${I18n.t('projects.reports.index.pdf')}
</a>`; </a>`;

6
app/assets/javascripts/sitewide/dropdown_selector.js
View file

@ -286,7 +286,7 @@ var dropdownSelector = (function() {
selectedOption.removeClass('highlight').next().next().addClass('highlight'); selectedOption.removeClass('highlight').next().next().addClass('highlight');
} }
} else if (pressedKey === 8 && e.target.value === '') { // backspace } else if (pressedKey === 8 && e.target.value === '') { // backspace
deleteTag(selector, container, container.find('.ds-tags .sn-icon-close').last()); deleteTag(selector, container, container.find('.ds-tags .sn-icon-close-small').last());
} }
}); });
} }
@ -743,7 +743,7 @@ var dropdownSelector = (function() {
var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" > var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" >
<div class="tag-label"> <div class="tag-label">
</div> </div>
<i class="sn-icon sn-icon-close ${selector.data('config').singleSelect ? 'hidden' : ''}"></i> <i class="sn-icon sn-icon-close-small ${selector.data('config').singleSelect ? 'hidden' : ''}"></i>
</div>`).insertBefore(container.find('.input-field .search-field')); </div>`).insertBefore(container.find('.input-field .search-field'));
@ -758,7 +758,7 @@ var dropdownSelector = (function() {
} }
// Now we need add delete action to tag // Now we need add delete action to tag
tag.find('.sn-icon-close').click(function(e) { tag.find('.sn-icon-close-small').click(function(e) {
e.stopPropagation(); e.stopPropagation();
deleteTag(selector, container, $(this)); deleteTag(selector, container, $(this));
}); });

5
app/assets/stylesheets/access_permissions/access_modal.scss
View file

@ -3,11 +3,6 @@
#user_assignments_modal { #user_assignments_modal {
.btn-role-select { .btn-role-select {
padding: 0 0 0 16px;
&:hover {
background-color: $color-concrete;
}
&:focus { &:focus {
box-shadow: none; box-shadow: none;

2
app/assets/stylesheets/experiment/canvas.scss
View file

@ -40,7 +40,7 @@
.panel-footer { .panel-footer {
.nav > li > a { .nav > li > a {
padding: 6px 15px; padding: 1px 15px;
} }
.btn { .btn {

11
app/assets/stylesheets/global_activities.scss
View file

@ -192,14 +192,13 @@
text-decoration: none; text-decoration: none;
} }
.fas { .sn-icon {
display: inline-block; display: inline-block;
margin-right: 3px; margin-right: 3px;
text-align: center; text-align: center;
width: 10px;
} }
&:not(.collapsed) .fas { &:not(.collapsed) .sn-icon {
@include rotate(90deg); @include rotate(90deg);
} }
} }
@ -237,7 +236,6 @@
margin-left: -35px; margin-left: -35px;
.global-avatar-container { .global-avatar-container {
margin: 0 5px 0 0;
position: relative; position: relative;
top: 10px; top: 10px;
} }
@ -363,14 +361,13 @@
border: 0; border: 0;
cursor: pointer; cursor: pointer;
float: left; float: left;
justify-content: start;
margin: 0; margin: 0;
opacity: .7;
text-align: left; text-align: left;
width: calc(50% - 25px); width: calc(50% - 25px);
&.selected { &.selected {
background: $color-alto; background: var(--sn-super-light-grey);
opacity: 1;
} }
&:nth-child(even) { &:nth-child(even) {

3
app/assets/stylesheets/my_modules/status_flow.scss
View file

@ -49,7 +49,8 @@
.fa-long-arrow-alt-right { .fa-long-arrow-alt-right {
color: $color-silver-chalice; color: $color-silver-chalice;
padding: .5em 0; padding: 1.5em 0;
z-index: 1;
} }
.status-container { .status-container {

8
app/assets/stylesheets/navigation/left_menu.scss
View file

@ -24,8 +24,16 @@
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
.sn-icon-dot-small {
color: var(--sn-grey);
}
&:not([data-active='true']):hover { &:not([data-active='true']):hover {
background-color: var(--sn-super-light-grey); background-color: var(--sn-super-light-grey);
.sn-icon-dot-small {
color: var(--sn-black);
}
} }
.show-submenu { .show-submenu {

6
app/assets/stylesheets/protocols/index.scss
View file

@ -103,7 +103,7 @@
.users-access-cell { .users-access-cell {
.protocol-users-link { .protocol-users-link {
align-items: center; align-items: center;
color: $color-silver-chalice; color: var(--sn-black);
display: flex; display: flex;
&:hover { &:hover {
@ -115,11 +115,11 @@
align-items: center; align-items: center;
border: 2px solid $color-white; border: 2px solid $color-white;
display: flex; display: flex;
height: 32px; height: 28px;
justify-content: center; justify-content: center;
line-height: 28px; line-height: 28px;
margin-right: -.5em; margin-right: -.5em;
width: 32px; width: 28px;
} }
.more-users { .more-users {

1
app/assets/stylesheets/protocols/preview_modal.scss
View file

@ -34,6 +34,7 @@
justify-content: space-between; justify-content: space-between;
.left-section { .left-section {
align-items: center;
column-gap: 32px; column-gap: 32px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

9
app/assets/stylesheets/repositories.scss
View file

@ -143,7 +143,7 @@
.dataTables_length { .dataTables_length {
margin-right: 24px; margin-right: 24px;
width: 170px; width: 180px;
.dropdown-selector-container { .dropdown-selector-container {
width: inherit; width: inherit;
@ -350,7 +350,7 @@
} }
.share-repo-container { .share-repo-container {
padding: 15px 30px; padding: 15px 0 0;
// Main structure css // Main structure css
.header, .header,
@ -366,6 +366,7 @@
.all-teams, .all-teams,
.teams-list { .teams-list {
display: flex; display: flex;
padding: 0 30px;
width: 100%; width: 100%;
} }
@ -408,14 +409,14 @@
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
padding: 5px 0 0; padding: 5px 30px 0;
} }
.all-teams { .all-teams {
align-items: center; align-items: center;
border-bottom: 1px solid $color-gainsboro; border-bottom: 1px solid $color-gainsboro;
margin-left: -10px; margin-left: -10px;
padding: 5px 10px; padding: 5px 40px;
user-select: none; user-select: none;
width: calc(100% + 20px); width: calc(100% + 20px);
} }

2
app/assets/stylesheets/repository/repository_toolbar.scss
View file

@ -85,7 +85,9 @@
} }
.toolbar-left-block { .toolbar-left-block {
align-items: center;
display: flex; display: flex;
gap: .25rem;
>* { >* {
margin-left: .25em; margin-left: .25em;

8
app/assets/stylesheets/shared/datatable.scss
View file

@ -13,6 +13,7 @@
align-items: center; align-items: center;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
gap: .25rem;
} }
} }
@ -113,7 +114,7 @@
.dataTables_length { .dataTables_length {
height: 2.25rem; height: 2.25rem;
margin-right: 24px; margin-right: 24px;
width: 170px; width: 180px;
.dropdown-selector-container { .dropdown-selector-container {
width: inherit; width: inherit;
@ -184,3 +185,8 @@
} }
} }
} }
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
align-items: center;
display: flex;
}

6
app/assets/stylesheets/shared/dropdown_selector.scss
View file

@ -41,7 +41,7 @@
position: absolute; position: absolute;
right: 4px; right: 4px;
text-align: center; text-align: center;
top: 4px; top: -1px;
&.sn-icon-search.simple-dropdown { &.sn-icon-search.simple-dropdown {
color: $brand-focus; color: $brand-focus;
@ -327,7 +327,7 @@
} }
} }
.sn-icon-close { .sn-icon-close-small {
display: none; display: none;
} }
} }
@ -421,7 +421,7 @@
.input-field { .input-field {
background: $color-white; background: $color-white;
.ds-tags .sn-icon-close { .ds-tags .sn-icon-close-small {
display: none; display: none;
} }
} }

3
app/assets/stylesheets/steps.scss
View file

@ -37,8 +37,9 @@
.step-panel-collapse-link { .step-panel-collapse-link {
padding-left: 5px; padding-left: 5px;
&:not(.collapsed) .fas { &:not(.collapsed) .sn-icon {
@include rotate(90deg); @include rotate(90deg);
display: inline-block;
} }
} }

16
app/assets/stylesheets/tailwind/buttons.css
View file

@ -4,7 +4,7 @@
} }
.btn { .btn {
@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; @apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
} }
.btn.icon-btn { .btn.icon-btn {
@ -54,18 +54,22 @@
@apply cursor-not-allowed pointer-events-none; @apply cursor-not-allowed pointer-events-none;
} }
.btn.btn-primary { .btn.btn-primary,
.btn.btn-success {
background-color: var(--sn-blue); background-color: var(--sn-blue);
color: var(--sn-white); color: var(--sn-white);
} }
.btn.btn-primary:hover { .btn.btn-primary:hover,
.btn.btn-success:hover{
background-color: var(--sn-blue-hover); background-color: var(--sn-blue-hover);
color: var(--sn-white); color: var(--sn-white);
} }
.btn.btn-primary:disabled, .btn.btn-primary:disabled,
.btn.btn-primary.disabled { .btn.btn-primary.disabled,
.btn.btn-success:disabled,
.btn.btn-success.disabled {
background-color: var(--sn-light-grey); background-color: var(--sn-light-grey);
border: 1px solid var(--sn-light-grey); border: 1px solid var(--sn-light-grey);
color: var(--sn-sleepy-grey); color: var(--sn-sleepy-grey);
@ -97,11 +101,11 @@
} }
.btn.btn-light.btn-black { .btn.btn-light.btn-black {
color: var(--sb-black); color: var(--sn-black);
} }
.btn.btn-light.btn-white { .btn.btn-light.btn-white {
color: var(--sb-white); color: var(--sn-white);
} }
.btn.btn-light.btn-white:hover { .btn.btn-light.btn-white:hover {

2
app/assets/stylesheets/themes/scinote.scss
View file

@ -568,6 +568,8 @@ mark,.mark {
float: right; float: right;
.pagination { .pagination {
align-items: center;
display: flex;
margin: 0; margin: 0;
} }
} }

4
app/javascript/vue/repository_search/container.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="flex items-center mr-3 flex-nowrap"> <div class="flex items-center mr-3 flex-nowrap">
<button v-if="!searchOpened" class="btn btn-light btn-black icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch"> <button v-if="!searchOpened" class="btn btn-light icon-btn" :title="i18n.t('repositories.show.search_button_tooltip')" @click="openSearch">
<i class="sn-icon sn-icon-search"></i> <i class="sn-icon sn-icon-search"></i>
</button> </button>
<div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex"> <div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex">
@ -27,7 +27,7 @@
<i class='sn-icon sn-icon-barcode barcode-scanner'></i> <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
</div> </div>
</div> </div>
<button v-if="!barcodeSearchOpened" class="btn btn-light btn-black icon-btn ml-2" :title="i18n.t('repositories.show.ean_search_button_tooltip')" @click="openBarcodeSearch"> <button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" :title="i18n.t('repositories.show.ean_search_button_tooltip')" @click="openBarcodeSearch">
<i class='sn-icon sn-icon-barcode barcode-scanner'></i> <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
</button> </button>
</div> </div>

2
app/views/global_activities/_top_pane.html.erb
View file

@ -7,7 +7,7 @@
<i class="sn-icon sn-icon-down"></i><%= t('activities.index.expand_all') %> <i class="sn-icon sn-icon-down"></i><%= t('activities.index.expand_all') %>
</a> </a>
<a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false"> <a id="global-activities-colapse-all" class="hide-actions btn btn-light" href="#" data-turbolinks="false">
<i class="sn-icon sn-icon-open-show"></i><%= t('activities.index.collapse_all') %> <i class="sn-icon sn-icon-up"></i><%= t('activities.index.collapse_all') %>
</a> </a>
</div> </div>
<div class="ga-search-container"> <div class="ga-search-container">

14
app/views/my_module_tags/_index_edit.html.erb
View file

@ -11,17 +11,17 @@
<div class="col-xs-6 col-lg-8"> <div class="col-xs-6 col-lg-8">
<h4><%= tag.name %></h4> <h4><%= tag.name %></h4>
</div> </div>
<div class="ml-auto flex items-center pr-1.5" data-view-mode="active"> <div class="ml-auto flex gap-2 items-center pr-1.5" data-view-mode="active">
<% if can_manage_my_module?(@my_module) %> <% if can_manage_my_module?(@my_module) %>
<%= link_to "", remote: true, class: 'btn btn-light btn-sm edit-tag-link btn-white', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %> <%= link_to "", remote: true, class: 'btn btn-light btn-sm icon-btn edit-tag-link btn-white', title: t("experiments.canvas.modal_manage_tags.edit_tag") do %>
<span class="sn-icon sn-icon-edit"></span> <span class="sn-icon sn-icon-edit"></span>
<% end %> <% end %>
<%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-light remove-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name), data: {tag_id: tag.id} do %> <%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-light icon-btn remove-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name), data: {tag_id: tag.id} do %>
<span class="sn-icon sn-icon-close"></span> <span class="sn-icon sn-icon-close"></span>
<% end %> <% end %>
<%= bootstrap_form_for tag, remote: true, url: project_tag_path(@my_module.experiment.project, tag, format: :json), data: {tag_id: tag.id}, method: :delete, html: { class: "delete-tag-form"} do |f| %> <%= bootstrap_form_for tag, remote: true, url: project_tag_path(@my_module.experiment.project, tag, format: :json), data: {tag_id: tag.id}, method: :delete, html: { class: "delete-tag-form"} do |f| %>
<%= hidden_field_tag :my_module_id, @my_module.id %> <%= hidden_field_tag :my_module_id, @my_module.id %>
<%= f.button class: 'btn btn-light delete-tag-link btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.delete_tag"), data: { confirm: t("experiments.canvas.modal_manage_tags.delete_tag_confirmation") } do %> <%= f.button class: 'btn btn-light delete-tag-link icon-btn btn-sm btn-white', title: t("experiments.canvas.modal_manage_tags.delete_tag"), data: { confirm: t("experiments.canvas.modal_manage_tags.delete_tag_confirmation") } do %>
<span class="sn-icon sn-icon-delete"></span> <span class="sn-icon sn-icon-delete"></span>
<% end %> <% end %>
<% end %> <% end %>
@ -35,15 +35,15 @@
<div class="col-xs-7"> <div class="col-xs-7">
<%= f.text_field :name, hide_label: true %> <%= f.text_field :name, hide_label: true %>
</div> </div>
<div class="pull-right"> <div class="col-xs-5 flex items-center gap-2 justify-end">
<%= render partial: 'shared/color_picker_select.erb', <%= render partial: 'shared/color_picker_select.erb',
locals: { name: :color, colors: Constants::TAG_COLORS, locals: { name: :color, colors: Constants::TAG_COLORS,
classes: "edit-tag-color", styles: "", classes: "edit-tag-color", styles: "",
object_name: :tag} %> object_name: :tag} %>
<%= f.button class: "btn btn-light save-tag-link", title: t("experiments.canvas.modal_manage_tags.save_tag") do %> <%= f.button class: "btn btn-light btn-sm btn-white icon-btn save-tag-link", title: t("experiments.canvas.modal_manage_tags.save_tag") do %>
<span class="sn-icon sn-icon-check"></span> <span class="sn-icon sn-icon-check"></span>
<% end %> <% end %>
<%= link_to "", remote: true, class: 'btn btn-light cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %> <%= link_to "", remote: true, class: 'btn btn-light btn-sm icon-btn btn-white cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %>
<span class="sn-icon sn-icon-close"></span> <span class="sn-icon sn-icon-close"></span>
<% end %> <% end %>
</div> </div>

4
app/views/repositories/_toolbar_buttons.html.erb
View file

@ -26,7 +26,7 @@
</button> </button>
<% end %> <% end %>
<span id="saveCancel" class="flex items-center gap-3" data-toggle="buttons" style="display:none"> <span id="saveCancel" class="flex items-center gap-2" data-toggle="buttons" style="display:none">
<button type="button" class="btn btn-primary 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> <span class="fas fa-save"></span>
<%= t("repositories.save_record") %> <%= t("repositories.save_record") %>
@ -92,7 +92,7 @@
</div> </div>
<% end %> <% end %>
<div class="repo-datatables-buttons"> <div class="repo-datatables-buttons">
<button class="btn btn-light btn-black icon-btn manage-repo-column-index" title="<%= t("libraries.manange_modal_column.button_tooltip") %>" <button class="btn btn-light icon-btn manage-repo-column-index" title="<%= t("libraries.manange_modal_column.button_tooltip") %>"
data-modal-url="<%= repository_repository_columns_path(@repository) %>" data-modal-url="<%= repository_repository_columns_path(@repository) %>"
data-action="new"> data-action="new">
<span class="sn-icon sn-icon sn-icon-reports"> <span class="sn-icon sn-icon sn-icon-reports">

4
app/views/result_assets/_new.html.erb
View file

@ -4,8 +4,8 @@
<span> <span>
<label> <label>
<h2 class="inline-block font-normal"><%= t('assets.drag_n_drop.label_html') %></h2> <h2 class="inline-block font-normal"><%= t('assets.drag_n_drop.label_html') %></h2>
<span class="btn btn-secondary new-asset-upload-button"> <span class="btn btn-light btn-sm new-asset-upload-button">
<span class="fas fa-file-upload new-asset-upload-icon"></span> <span class="sn-icon sn-icon-import new-asset-upload-icon"></span>
<%= t('assets.drag_n_drop.browse_label') %> <%= t('assets.drag_n_drop.browse_label') %>
</span> </span>
<%= f.file_field :file, <%= f.file_field :file,