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

Add simple emoji picker

Browse source
This commit is contained in:
Urban Rotnik 2019-11-07 14:37:01 +01:00
parent 621f7da37b
commit b9d50263c4
3 changed files with 76 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
app/assets/javascripts/repository_columns/columns_initializers/status_column_type.js
View file

@ -7,11 +7,18 @@ var RepositoryStatusColumnType = (function() {
return `
<div class="status-item-container loading">
<div class="status-item-icon"></div>
<input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
class="status-item-field"
type="text"/>
<span class="status-item-icon-trash fas fa-trash"></span>
</div>
<input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
class="status-item-field"
type="text"/>
<span class="status-item-icon-trash fas fa-trash"></span>
</div>
<div class="emojis-picker">
<span data-emoji-code="128540">&#128540;</span>
<span data-emoji-code="128520">&#128520;</span>
<span data-emoji-code="128526">&#128526;</span>
<span data-emoji-code="128531">&#128531;</span>
<span data-emoji-code="128535">&#128535;</span>
<span data-emoji-code="128536">&#128536;</span>
</div>`;
}
@ -19,6 +26,8 @@ var RepositoryStatusColumnType = (function() {
var $manageModal = $(manageModal);
var addStatusOptionBtn = '.add-status';
var deleteStatusOptionBtn = '.status-item-icon-trash';
var icon = '.status-item-icon';
var emojis = '.emojis-picker>span';
$manageModal.off('click', addStatusOptionBtn).on('click', addStatusOptionBtn, function() {
var newStatusRow = $(statusTemplate()).insertBefore($(this));
@ -32,15 +41,38 @@ var RepositoryStatusColumnType = (function() {
});
$manageModal.off('click', deleteStatusOptionBtn).on('click', deleteStatusOptionBtn, function() {
var statusRow = $(this).parent();
// if existing item is deleted, flag it as deleted
// if new item is deleted, remove it from HTML
var $statusRow = $(this).parent();
var $emojis = $statusRow.next('.emojis-picker');
var isNewRow = $statusRow.data('id') == null;
setTimeout(function() {
statusRow.addClass('loading');
statusRow.css('height', '0px');
$statusRow.addClass('loading');
$statusRow.css('height', '0px');
}, 0);
setTimeout(function() {
statusRow.remove();
if (isNewRow) {
$statusRow.remove();
} else {
$statusRow.attr('data-removed', 'true');
$statusRow.removeClass('loading');
}
$emojis.remove();
}, 300);
});
$manageModal.off('click', icon).on('click', icon, function() {
var $emojiPicker = $(this).parent().next('.emojis-picker');
$emojiPicker.show();
});
$manageModal.off('click', emojis).on('click', emojis, function() {
var $clickedEmoji = $(this);
$clickedEmoji.parent().hide();
$clickedEmoji.parent().prev().find('.status-item-icon').html($clickedEmoji.html());
});
}
return {

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

@ -322,6 +322,7 @@
.status-item-container {
align-items: center;
display: flex;
height: 34px;
margin-bottom: 5px;
transition: .3s;
@ -332,6 +333,10 @@
display: none;
}
}
&[data-removed="true"] {
display: none;
}
}
.status-item-field {
@ -394,3 +399,11 @@
padding-left: 5px;
}
}
.emojis-picker {
border: 1px solid $color-gainsboro;
display: none;
font-size: 30px;
height: 40px;
width: 211px;
}

49
app/views/repository_columns/manage_column_partials/_status.html.erb
View file

@ -3,32 +3,27 @@
<%= t('libraries.manange_modal_column.status_type.status_options_label') %>
</label>
<div class="col-sm-9">
<%# fields_for column.repository_status_items do |item| %>
<!-- <div class="field">-->
<%#= item.text_field :status %>
<!-- </div>-->
<%# end %>
<%#= form_for column, url: '#' do |form| %>
<%#= form.fields_for :repository_status_items do |item| %>
<%#= item.text_field :status %>
<%# end %>
<%# end %>
<% column.repository_status_items.each do |item| %>
<div class="status-item-container">
<div class="status-item-icon"><%= item.icon %></div>
<input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
class="status-item-field"
type="text"
value="<%= item.status %>"/>
<span class="status-item-icon-trash fas fa-trash"></span>
</div>
<% end %>
<div class="add-status">
<span class="fas fa-plus"></span>
<span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
<% column.repository_status_items.each do |item| %>
<div class="status-item-container" data-id="<%= item.id %>">
<div class="status-item-icon"><%= item.icon %></div>
<input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
class="status-item-field"
type="text"
value="<%= item.status %>"/>
<span class="status-item-icon-trash fas fa-trash"></span>
</div>
<div class="emojis-picker">
<span data-emoji-code="128540">&#128540;</span>
<span data-emoji-code="128520">&#128520;</span>
<span data-emoji-code="128526">&#128526;</span>
<span data-emoji-code="128531">&#128531;</span>
<span data-emoji-code="128535">&#128535;</span>
<span data-emoji-code="128536">&#128536;</span>
</div>
<% end %>
<div class="add-status">
<span class="fas fa-plus"></span>
<span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
</div>
</div>
</div>