scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-04 19:05:37 +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 ` return `
<div class="status-item-container loading"> <div class="status-item-container loading">
<div class="status-item-icon"></div> <div class="status-item-icon"></div>
<input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')} <input placeholder=${I18n.t('libraries.manange_modal_column.name_placeholder')}
class="status-item-field" class="status-item-field"
type="text"/> type="text"/>
<span class="status-item-icon-trash fas fa-trash"></span> <span class="status-item-icon-trash fas fa-trash"></span>
</div> </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>`; </div>`;
} }
@ -19,6 +26,8 @@ var RepositoryStatusColumnType = (function() {
var $manageModal = $(manageModal); var $manageModal = $(manageModal);
var addStatusOptionBtn = '.add-status'; var addStatusOptionBtn = '.add-status';
var deleteStatusOptionBtn = '.status-item-icon-trash'; var deleteStatusOptionBtn = '.status-item-icon-trash';
var icon = '.status-item-icon';
var emojis = '.emojis-picker>span';
$manageModal.off('click', addStatusOptionBtn).on('click', addStatusOptionBtn, function() { $manageModal.off('click', addStatusOptionBtn).on('click', addStatusOptionBtn, function() {
var newStatusRow = $(statusTemplate()).insertBefore($(this)); var newStatusRow = $(statusTemplate()).insertBefore($(this));
@ -32,15 +41,38 @@ var RepositoryStatusColumnType = (function() {
}); });
$manageModal.off('click', deleteStatusOptionBtn).on('click', deleteStatusOptionBtn, 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() { setTimeout(function() {
statusRow.addClass('loading'); $statusRow.addClass('loading');
statusRow.css('height', '0px'); $statusRow.css('height', '0px');
}, 0); }, 0);
setTimeout(function() { setTimeout(function() {
statusRow.remove(); if (isNewRow) {
$statusRow.remove();
} else {
$statusRow.attr('data-removed', 'true');
$statusRow.removeClass('loading');
}
$emojis.remove();
}, 300); }, 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 { return {

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

@ -322,6 +322,7 @@
.status-item-container { .status-item-container {
align-items: center; align-items: center;
display: flex; display: flex;
height: 34px;
margin-bottom: 5px; margin-bottom: 5px;
transition: .3s; transition: .3s;
@ -332,6 +333,10 @@
display: none; display: none;
} }
} }
&[data-removed="true"] {
display: none;
}
} }
.status-item-field { .status-item-field {
@ -394,3 +399,11 @@
padding-left: 5px; 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') %> <%= t('libraries.manange_modal_column.status_type.status_options_label') %>
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<%# fields_for column.repository_status_items do |item| %> <% column.repository_status_items.each do |item| %>
<!-- <div class="field">--> <div class="status-item-container" data-id="<%= item.id %>">
<%#= item.text_field :status %> <div class="status-item-icon"><%= item.icon %></div>
<!-- </div>--> <input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
<%# end %> class="status-item-field"
type="text"
<%#= form_for column, url: '#' do |form| %> value="<%= item.status %>"/>
<span class="status-item-icon-trash fas fa-trash"></span>
<%#= form.fields_for :repository_status_items do |item| %> </div>
<%#= item.text_field :status %> <div class="emojis-picker">
<%# end %> <span data-emoji-code="128540">&#128540;</span>
<span data-emoji-code="128520">&#128520;</span>
<%# end %> <span data-emoji-code="128526">&#128526;</span>
<span data-emoji-code="128531">&#128531;</span>
<% column.repository_status_items.each do |item| %> <span data-emoji-code="128535">&#128535;</span>
<div class="status-item-container"> <span data-emoji-code="128536">&#128536;</span>
<div class="status-item-icon"><%= item.icon %></div> </div>
<input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>" <% end %>
class="status-item-field" <div class="add-status">
type="text" <span class="fas fa-plus"></span>
value="<%= item.status %>"/> <span class="add-status-label"><%= t('libraries.manange_modal_column.status_type.add_status_label') %></span>
<span class="status-item-icon-trash fas fa-trash"></span> </div>
</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> </div>