scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-21 07:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

changes upon Antons review

Browse source
This commit is contained in:
Mojca Lorber 2020-01-14 16:46:48 +01:00
parent 9176301b7b
commit 16226640d5
5 changed files with 80 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
app/assets/javascripts/repository_columns/index.js
View file

@ -33,6 +33,8 @@ var RepositoryColumns = (function() {
$(response.html).appendTo($('.repository-show'));
RepositoryDatatable.init('#' + $('.repository-table table').attr('id'));
RepositoryDatatable.redrawTableOnSidebarToggle();
// show manage columns index modal
$(manageModal).find('.back-to-column-modal').trigger('click');
});
}
@ -55,9 +57,6 @@ var RepositoryColumns = (function() {
success: (result) => {
reloadDataTablePartial();
animateSpinner(null, false);
// show manage columns index modal
$manageModal.find('.back-to-column-modal').trigger('click');
HelperModule.flashAlertMsg(result.message, 'success');
},
error: (result) => {
@ -109,9 +108,6 @@ var RepositoryColumns = (function() {
contentType: 'application/json',
success: function(result) {
reloadDataTablePartial();
// show manage columns index modal
$manageModal.find('.back-to-column-modal').trigger('click');
HelperModule.flashAlertMsg(result.data.attributes.message, 'success');
},
error: function(error) {
@ -138,9 +134,6 @@ var RepositoryColumns = (function() {
contentType: 'application/json',
success: function(result) {
reloadDataTablePartial();
// show manage columns index modal
$manageModal.find('.back-to-column-modal').trigger('click');
HelperModule.flashAlertMsg(result.data.attributes.message, 'success');
},
error: function(error) {
@ -187,22 +180,14 @@ var RepositoryColumns = (function() {
function generateColumnNameTooltip(name) {
var maxLength = $(TABLE_ID).data('max-dropdown-length');
if ($.trim(name).length > maxLength) {
return '<div class="modal-tooltip">'
+ truncateLongString(name, maxLength)
+ '<span class="modal-tooltiptext">' + name + '</span></div>';
return `<div class="modal-tooltip">
${truncateLongString(name, maxLength)}
<span class="modal-tooltiptext">${name}</span>
</div>`;
}
return name;
}
function customLiHoverEffect() {
var liEl = $(columnsList).find('li');
liEl.mouseover(function() {
$(this).find('.grippy').addClass('grippy-img');
}).mouseout(function() {
$(this).find('.grippy').removeClass('grippy-img');
});
}
function toggleColumnVisibility() {
var lis = $(columnsList).find('.vis');
lis.on('click', function(event) {
@ -264,55 +249,58 @@ var RepositoryColumns = (function() {
$columnsList.find('li[data-position]').remove();
_.each(TABLE.columns().header(), function(el, index) {
if (index > 1) {
let colId = $(el).attr('id');
let colIndex = $(el).attr('data-column-index');
let visible = TABLE.column(colIndex).visible();
let visClass = (visible) ? 'fa-eye' : 'fa-eye-slash';
let visLi = (visible) ? '' : 'col-invisible';
let visText = $(TABLE_ID).data('columns-visibility-text');
let editLi = ($(el).attr('data-type')) ? 'editable' : '';
let editUrl = $(el).attr('data-edit-column-url');
let destroyUrl = $(el).attr('data-destroy-column-url');
let thederName;
if ($(el).find('.modal-tooltiptext').length > 0) {
thederName = $(el).find('.modal-tooltiptext').text();
} else {
thederName = el.innerText;
}
let listItem = $columnsList.find('.repository-columns-list-template').clone();
let repoId = $(TABLE_ID).data('repository-id');
let colId = $(el).attr('id');
let actionUrl = '/repositories/' + repoId + '/repository_columns/' + colId;
listItem.attr('data-position', colIndex);
listItem.attr('data-id', colId);
listItem.addClass(visLi);
listItem.removeClass('repository-columns-list-template hide');
if ($(el).attr('data-type')) {
listItem.addClass('editable');
listItem.find('.manage-controls').addClass('editable');
listItem.find('[data-action="edit"]').attr('data-modal-url', actionUrl + '/edit');
listItem.find('[data-action="destroy"]').attr('data-modal-url', actionUrl + '/destroy_html');
if (thederName === 'Name') {
visClass = '';
visText = '';
}
listItem.find('.column-type').html(getColumnTypeText(el, colId));
let listItem = `<li class="col-list-el ${visLi} ${editLi}" data-position="${colIndex}" data-id="${colId}">
<i class="grippy"></i>
<span class="vis-controls">
<span class="vis fas ${visClass}" title="${visText}"></span>
</span>
<span class="text">${generateColumnNameTooltip(thederName)}</span>
<span class="column-type pull-right ${editLi}">${getColumnTypeText(el, colId)}</span>
<span class="sci-btn-group manage-controls pull-right ${editLi}">
<button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
data-action="edit"
data-modal-url="${editUrl}">
<span class="fas fa-pencil-alt" title="Edit"></span>
</button>
<button class="btn icon-btn btn-light delete-repo-column manage-repo-column"
data-action="destroy"
data-modal-url="${destroyUrl}">
<span class="fas fa-trash" title="Delete"></span>
</button>
</span>
<br>
</li>`;
listItem.find('.text').html(generateColumnNameTooltip(thederName));
if (thederName !== 'Name') {
listItem.find('.vis').addClass(visClass);
listItem.find('.vis').attr('title', $(TABLE_ID).data('columns-visibility-text'));
}
$columnsList.append(listItem);
}
});
$columnsList.scrollTop(scrollPosition);
toggleColumnVisibility();
customLiHoverEffect();
}
function initSorting() {
var $columnsList = $(columnsList);
$columnsList.sortable({
items: 'li:not(.repository-columns-list-template)',
items: 'li',
scrollSpeed: 10,
axis: 'y',
update: function() {
@ -327,7 +315,6 @@ var RepositoryColumns = (function() {
loadColumnsNames();
}
});
$('.sorting').on('click', RepositoryDatatable.checkAvailableColumns());
}
function initManageColumnModal(button) {

75
app/assets/stylesheets/repository_columns/index.scss
View file

@ -1,4 +1,6 @@
// scss-lint:disable IdSelector
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
@import "constants";
@ -80,20 +82,49 @@
z-index: 99999999;
}
li {
.col-list-el {
background: $color-white;
border-bottom: 1px solid $color-alto;
padding: 10px 10px 10px 0;
vertical-align: middle;
.manage-controls {
display: none;
margin-top: -10px;
}
&:hover {
.editable {
display: inline-block;
}
.column-type.editable {
display: none;
}
.grippy {
background: url(asset-path("custom/grippy.png"));
}
}
&:last-of-type {
border-bottom: 0;
}
&:not(.editable) {
.column-type::before {
@include font-awesome;
content: $font-fas-lock;
padding-right: 4px;
}
}
}
[data-position] {
cursor: -webkit-grab;
cursor: grab;
}
.ui-sortable-helper {
cursor: -webkit-grabbing;
cursor: grabbing;
}
@ -104,33 +135,8 @@
width: 8px;
}
li .grippy-img {
background: url(asset-path('custom/grippy.png'));
}
li:hover span.editable {
display: inline-block !important;
}
.column-type {
color: $color-silver-chalice;
}
li.editable:hover span.column-type {
display: none;
}
li:not(.editable) {
.column-type:before {
content: "\f023";
font-family: "Font Awesome 5 Free";
font-weight: 501;
padding-right: 4px;
}
}
li:last-of-type {
border-bottom: 0;
color: $color-silver-chalice;
}
.col-invisible {
@ -148,7 +154,7 @@
}
&:hover {
color: $color-emperor;
color: $color-volcano;
}
}
@ -161,14 +167,15 @@
}
}
}
.manage-controls {
margin-top: -10px;
}
}
.delete-content {
height: 390px;
padding: 15px 0;
}
#new-repo-column-modal {
float: left;
margin-left: 5px;
}
}

1
app/assets/stylesheets/shared_styles/constants/fonts.scss
View file

@ -15,6 +15,7 @@ $font-size-h6: $font-size-base;
$font-fas-check: "\f00c";
$font-fas-exclamation-triangle: "\f071";
$font-fas-lock: "\f023";
@mixin font-h1 {
font-size: 24px;

2
app/views/repositories/_repository_table.html.erb
View file

@ -33,6 +33,8 @@
class="repository-column"
id="<%= column.id %>"
data-type="<%= column.data_type %>"
data-edit-column-url="<%= edit_repository_repository_column_path(repository, column) %>"
data-destroy-column-url="<%= repository_columns_destroy_html_path(repository, column) %>"
<% column.metadata.each do |k, v| %>
<%= "data-metadata-#{k}=#{v}" %>
<% end %>

19
app/views/repository_columns/_manage_column_modal_index.html.erb
View file

@ -8,25 +8,6 @@
<ul class="list-group repo-columns-list"
id="repository-columns-list"
data-repository-id="<%= @repository.id %>">
<li class="repository-columns-list-template hide">
<i class="grippy"></i>
<span class="vis-controls">
<span class="vis fas" title=""></span>
</span>
<span class="text"></span>
<span class="column-type pull-right"></span>
<span class="sci-btn-group manage-controls pull-right" style="display:none">
<button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
data-action="edit">
<span class="fas fa-pencil-alt" title="Edit"></span>
</button>
<button class="btn icon-btn btn-light delete-repo-column manage-repo-column"
data-action="destroy">
<span class="fas fa-trash" title="Delete"></span>
</button>
</span>
<br>
</li>
</ul>
</div>