Phil Hughes
parent
f7da99aef7
commit
5e145918b4
7 changed files with 142 additions and 151 deletions
|
|
@ -1,6 +1,6 @@
|
|||
class @AwardsHandler
|
||||
constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
|
||||
$(".add-award").click (event) =>
|
||||
$(".js-add-award").click (event) =>
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
|
||||
|
|
@ -11,18 +11,28 @@ class @AwardsHandler
|
|||
if $(".emoji-menu").is(":visible")
|
||||
$(".emoji-menu").hide()
|
||||
|
||||
$(".awards").off "click"
|
||||
$(".awards").on "click", ".js-emoji-btn", @handleClick
|
||||
|
||||
@renderFrequentlyUsedBlock()
|
||||
@setupSearch()
|
||||
|
||||
handleClick: (e) ->
|
||||
e.preventDefault()
|
||||
emoji = $(this).find(".icon").data "emoji"
|
||||
awards_handler.addAward emoji
|
||||
|
||||
showEmojiMenu: ->
|
||||
if $(".emoji-menu").length
|
||||
$(".emoji-menu").show()
|
||||
$("#emoji_search").focus()
|
||||
else
|
||||
$.get "/emojis", (response) ->
|
||||
$(".add-award").after response
|
||||
$('.js-add-award').addClass "is-loading"
|
||||
$.get "/emojis", (response) =>
|
||||
$('.js-add-award').removeClass "is-loading"
|
||||
$(".js-award-holder").append response
|
||||
$(".emoji-menu").show()
|
||||
$("#emoji_search").focus()
|
||||
@setupSearch()
|
||||
|
||||
addAward: (emoji) ->
|
||||
emoji = @normilizeEmojiName(emoji)
|
||||
|
|
@ -39,7 +49,7 @@ class @AwardsHandler
|
|||
if @isActive(emoji)
|
||||
@decrementCounter(emoji)
|
||||
else
|
||||
counter = @findEmojiIcon(emoji).siblings(".counter")
|
||||
counter = @findEmojiIcon(emoji).siblings(".js-counter")
|
||||
counter.text(parseInt(counter.text()) + 1)
|
||||
counter.parent().addClass("active")
|
||||
@addMeToAuthorList(emoji)
|
||||
|
|
@ -53,7 +63,7 @@ class @AwardsHandler
|
|||
@findEmojiIcon(emoji).parent().hasClass("active")
|
||||
|
||||
decrementCounter: (emoji) ->
|
||||
counter = @findEmojiIcon(emoji).siblings(".counter")
|
||||
counter = @findEmojiIcon(emoji).siblings(".js-counter")
|
||||
emojiIcon = counter.parent()
|
||||
if parseInt(counter.text()) > 1
|
||||
counter.text(parseInt(counter.text()) - 1)
|
||||
|
|
@ -98,14 +108,13 @@ class @AwardsHandler
|
|||
emojiCssClass = @resolveNameToCssClass(emoji)
|
||||
|
||||
nodes = []
|
||||
nodes.push("<div class='award active' title='me'>")
|
||||
nodes.push("<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>")
|
||||
nodes.push("<div class='counter'>1</div>")
|
||||
nodes.push("</div>")
|
||||
nodes.push "<button class='btn award-control js-emoji-btn has_tooltip active' title='me'>"
|
||||
nodes.push "<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>"
|
||||
nodes.push "<span class='award-control-text js-counter'>1</span>"
|
||||
nodes.push "</button>"
|
||||
|
||||
emoji_node = $(nodes.join("\n")).insertBefore(".awards-controls").find(".emoji-icon").data("emoji", emoji)
|
||||
|
||||
$(".award").tooltip()
|
||||
emoji_node = $(nodes.join("\n")).insertBefore(".js-award-holder").find(".emoji-icon").data("emoji", emoji)
|
||||
$('.award-control').tooltip()
|
||||
|
||||
resolveNameToCssClass: (emoji) ->
|
||||
emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
|
||||
|
|
@ -128,7 +137,7 @@ class @AwardsHandler
|
|||
callback.call()
|
||||
|
||||
findEmojiIcon: (emoji) ->
|
||||
$(".award [data-emoji='#{emoji}']")
|
||||
$(".awards > .js-emoji-btn [data-emoji='#{emoji}']")
|
||||
|
||||
scrollToAwards: ->
|
||||
$('body, html').animate({
|
||||
|
|
|
|||
|
|
@ -157,3 +157,7 @@
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.content-block-small {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,125 +1,112 @@
|
|||
.awards {
|
||||
@include clearfix;
|
||||
line-height: 34px;
|
||||
|
||||
.emoji-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 7px 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.award {
|
||||
@include border-radius(5px);
|
||||
.emoji-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
min-width: 160px;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #F1F2F4;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
|
||||
border: 1px solid;
|
||||
padding: 0px 10px;
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
border-color: $border-color;
|
||||
cursor: pointer;
|
||||
.emoji-menu-content {
|
||||
padding: $gl-padding;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
|
||||
&:hover {
|
||||
background-color: #dce0e5;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $border-gray-light;
|
||||
background-color: $gray-light;
|
||||
|
||||
&:hover {
|
||||
background-color: #dce0e5;
|
||||
}
|
||||
|
||||
.counter {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.counter {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.awards-controls {
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
|
||||
.add-award {
|
||||
font-size: 24px;
|
||||
color: $gl-gray;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
|
||||
&:hover,
|
||||
&:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-menu{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
box-shadow: 0 6px 12px rgba(0,0,0,.175);
|
||||
|
||||
.emoji-menu-content {
|
||||
padding: $gl-padding;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow-y: scroll;
|
||||
|
||||
h5 {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin-left: -20px;
|
||||
margin-bottom: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
input.emoji-search{
|
||||
background: image-url("icon-search.png") 240px no-repeat;
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
list-decorate: none;
|
||||
@include border-radius(5px);
|
||||
|
||||
&:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
input.emoji-search{
|
||||
background-image: url("data:image/png;base64,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");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 5px center;
|
||||
background-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-menu-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.emoji-menu-list-item {
|
||||
padding: 3px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.emoji-menu-btn {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.emoji-icon {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.award-menu-holder {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.award-control {
|
||||
margin-right: 5px;
|
||||
line-height: 20px;
|
||||
outline: 0;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: #ededed;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
.award-control-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.award-control-icon-loading {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon,
|
||||
.award-control-icon {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.award-control-icon-loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.award-control-icon {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
.emoji-menu-content
|
||||
= text_field_tag :emoji_search, "", class: "emoji-search search-input form-control"
|
||||
- AwardEmoji.emoji_by_category.each do |category, emojis|
|
||||
%h5= AwardEmoji::CATEGORIES[category]
|
||||
%ul
|
||||
%h5.emoji-menu-title
|
||||
= AwardEmoji::CATEGORIES[category]
|
||||
%ul.clearfix.emoji-menu-list
|
||||
- emojis.each do |emoji|
|
||||
%li
|
||||
= emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
|
||||
%li.pull-left.text-center.emoji-menu-list-item
|
||||
%button.emoji-menu-btn.text-center.js-emoji-btn{type: "button"}
|
||||
= emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
.merge-requests
|
||||
= render 'merge_requests'
|
||||
|
||||
.content-block
|
||||
.content-block.content-block-small
|
||||
= render 'votes/votes_block', votable: @issue
|
||||
|
||||
.row
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
.tab-content
|
||||
#notes.notes.tab-pane.voting_notes
|
||||
.content-block.oneline-block
|
||||
.content-block.content-block-small.oneline-block
|
||||
= render 'votes/votes_block', votable: @merge_request
|
||||
|
||||
.row
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
.awards.votes-block
|
||||
- awards_sort(votable.notes.awards.grouped_awards).each do |emoji, notes|
|
||||
.award{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user)}
|
||||
%button.btn.award-control.js-emoji-btn.has_tooltip{class: (note_active_class(notes, current_user)), title: emoji_author_list(notes, current_user), data: {placement: "top"}}
|
||||
= emoji_icon(emoji)
|
||||
.counter
|
||||
%span.award-control-text.js-counter
|
||||
= notes.count
|
||||
|
||||
- if current_user
|
||||
.awards-controls
|
||||
%a.add-award{"href" => "#"}
|
||||
= icon('smile-o')
|
||||
%div.award-menu-holder.js-award-holder
|
||||
%a.btn.award-control.js-add-award{"href" => "#"}
|
||||
= icon('smile-o', {class: "award-control-icon"})
|
||||
= icon('spinner spin', {class: "award-control-icon award-control-icon-loading"})
|
||||
%span.award-control-text
|
||||
Add
|
||||
|
||||
- if current_user
|
||||
:javascript
|
||||
|
|
@ -23,17 +26,3 @@
|
|||
noteable_id,
|
||||
aliases
|
||||
);
|
||||
|
||||
$(".awards").on("click", ".emoji-menu-content li", function(e) {
|
||||
var emoji = $(this).find(".emoji-icon").data("emoji");
|
||||
awards_handler.addAward(emoji);
|
||||
});
|
||||
|
||||
$(".awards").on("click", ".award", function(e) {
|
||||
var emoji = $(this).find(".icon").data("emoji");
|
||||
awards_handler.addAward(emoji);
|
||||
});
|
||||
|
||||
$(".award").tooltip();
|
||||
|
||||
$(".emoji-menu-content").niceScroll({cursorwidth: "7px", autohidemode: false});
|
||||
|
|
|
|||
Loading…
Reference in a new issue