scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-02 01:45:38 +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}
${$('.ga-side .date-selector.filter-block')[0].dataset.periodSelect}
</div>
<i class="sn-icon sn-icon-close"></i>
<i class="sn-icon sn-icon-close-small"></i>
</div>`).appendTo('.ga-top .ga-tags')
.find('.fa-times').click(() => {
.find('.sn-icon-close-small').click(() => {
$('.date-selector .date.clear').click();
});
}
$.each($('.ga-side .ds-tags'), function(index, tag) {
var newTag = $(tag.outerHTML).appendTo('.ga-top .ga-tags');
newTag.find('.fa-times')
newTag.find('.sn-icon-close-small')
.click(function() {
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) {
let oldLink = '';
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>
${I18n.t('projects.reports.index.previous_docx')})
</a>`;
@ -43,7 +43,7 @@
}
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>
${I18n.t('projects.reports.index.docx')}
</a>`;
@ -55,7 +55,7 @@
if (data.error) {
let oldLink = '';
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>
${I18n.t('projects.reports.index.previous_pdf')})
</a>`;
@ -73,7 +73,7 @@
}
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>
${I18n.t('projects.reports.index.pdf')}
</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');
}
} 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) : ''}" >
<div class="tag-label">
</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'));
@ -758,7 +758,7 @@ var dropdownSelector = (function() {
}
// 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();
deleteTag(selector, container, $(this));
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -13,6 +13,7 @@
align-items: center;
display: flex;
flex-grow: 1;
gap: .25rem;
}
}
@ -113,7 +114,7 @@
.dataTables_length {
height: 2.25rem;
margin-right: 24px;
width: 170px;
width: 180px;
.dropdown-selector-container {
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;
right: 4px;
text-align: center;
top: 4px;
top: -1px;
&.sn-icon-search.simple-dropdown {
color: $brand-focus;
@ -327,7 +327,7 @@
}
}
.sn-icon-close {
.sn-icon-close-small {
display: none;
}
}
@ -421,7 +421,7 @@
.input-field {
background: $color-white;
.ds-tags .sn-icon-close {
.ds-tags .sn-icon-close-small {
display: none;
}
}

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

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

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

@ -4,7 +4,7 @@
}
.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 {
@ -54,18 +54,22 @@
@apply cursor-not-allowed pointer-events-none;
}
.btn.btn-primary {
.btn.btn-primary,
.btn.btn-success {
background-color: var(--sn-blue);
color: var(--sn-white);
}
.btn.btn-primary:hover {
.btn.btn-primary:hover,
.btn.btn-success:hover{
background-color: var(--sn-blue-hover);
color: var(--sn-white);
}
.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);
border: 1px solid var(--sn-light-grey);
color: var(--sn-sleepy-grey);
@ -97,11 +101,11 @@
}
.btn.btn-light.btn-black {
color: var(--sb-black);
color: var(--sn-black);
}
.btn.btn-light.btn-white {
color: var(--sb-white);
color: var(--sn-white);
}
.btn.btn-light.btn-white:hover {

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

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

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

@ -1,6 +1,6 @@
<template>
<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>
</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 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>
</button>
</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') %>
</a>
<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>
</div>
<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">
<h4><%= tag.name %></h4>
</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) %>
<%= 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>
<% 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>
<% 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| %>
<%= 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>
<% end %>
<% end %>
@ -35,15 +35,15 @@
<div class="col-xs-7">
<%= f.text_field :name, hide_label: true %>
</div>
<div class="pull-right">
<div class="col-xs-5 flex items-center gap-2 justify-end">
<%= render partial: 'shared/color_picker_select.erb',
locals: { name: :color, colors: Constants::TAG_COLORS,
classes: "edit-tag-color", styles: "",
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>
<% 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>
<% end %>
</div>

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

@ -26,7 +26,7 @@
</button>
<% 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">
<span class="fas fa-save"></span>
<%= t("repositories.save_record") %>
@ -92,7 +92,7 @@
</div>
<% end %>
<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-action="new">
<span class="sn-icon sn-icon sn-icon-reports">

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

@ -4,8 +4,8 @@
<span>
<label>
<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="fas fa-file-upload new-asset-upload-icon"></span>
<span class="btn btn-light btn-sm new-asset-upload-button">
<span class="sn-icon sn-icon-import new-asset-upload-icon"></span>
<%= t('assets.drag_n_drop.browse_label') %>
</span>
<%= f.file_field :file,