Skip to content

Commit

Permalink
css: Change view buttons to icons
Browse files Browse the repository at this point in the history
  • Loading branch information
doortts committed Aug 11, 2017
1 parent 6406d3d commit f268a3e
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 111 deletions.
3 changes: 3 additions & 0 deletions app/assets/stylesheets/less/_common.less
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,13 @@ input[type=number]::-webkit-outer-spin-button {
.mb20 { margin-bottom:20px; }
.mr20 { margin-right:20px; }
.ml5 { margin-left:5px; }
.ml6 { margin-left:6px; }
.mr6 { margin-right:6px; }
.mr5 { margin-right:5px; }
.mt5 { margin-top:5px; }
.mt4 { margin-top:4px; }
.mr3 { margin-right:3px; }
.pb4 { padding-bottom: 4px}

.margin-top-20 { margin-top:20px; }
.margin-left-20 { margin-left: 20px; }
Expand Down
34 changes: 29 additions & 5 deletions app/assets/stylesheets/less/_page.less
Original file line number Diff line number Diff line change
Expand Up @@ -3228,9 +3228,32 @@ div.markdown-preview {
}
}
}

.board-actrow {
margin:20px 0;
overflow:auto;
padding-right: 15px;
button.icon {
line-height: 30px;
font-size: 22px;
color: lightgray;
.yobicon-lang {
font-size: 20px;
}
&.disabled {
color: #eee !important;
}
&:hover {
color: #51aacc;
opacity: 1;
}
.yobicon-hearts {
font-size: 16px;
}
}
.pt5px {
padding-top: 5px;
}
}

.labels-wrap {
Expand Down Expand Up @@ -3894,7 +3917,7 @@ label.issue-item-row {
.heart {
display:inline-block;
color:#ddd;
font-size:11px;
font-size: 17px;
margin-right:2px;
vertical-align:middle;
}
Expand Down Expand Up @@ -3961,18 +3984,19 @@ label.issue-item-row {
li {
float:left;
margin-right:3px;
line-height:30px;
padding-bottom: 5px;

&:last-of-type {
margin-right:0;
line-height:30px;
}
}

.usf-group {
display:inline-block;
width:30px; height:30px;

img { width:30px; height:30px; }
}
.avatar-wrap {
margin-right: 0 !important;
}
}
.voters-dialog {
Expand Down
30 changes: 11 additions & 19 deletions app/views/board/partial_comments.scala.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,19 @@
@**
/**
* Yobi, Project Hosting SW
* Yona, 21st Century Project Hosting SW
*
* Copyright 2013 NAVER Corp.
* http://yobi.io
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@

@(project:Project, post:Posting)

@import org.apache.commons.lang3.StringUtils
@import utils.TemplateHelper._
@import utils.AccessControl._
@import utils.JodaDateUtil
@import play.libs.Json.toJson
@import utils.Markdown
@import controllers.api.IssueApi

@isAuthorComment(commentId: String) = @{
if(commentId == UserApp.currentUser().loginId) {"author"}
Expand Down Expand Up @@ -57,11 +45,15 @@
<a href="#[email protected]" class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">@utils.TemplateHelper.agoOrDateString(comment.createdDate)</a>
</span>
<span class="act-row pull-right">
@if(StringUtils.isNotBlank(IssueApi.TRANSLATION_API)){
<button type="button" class="icon btn-transparent ml10 comment-translate" data-toggle="tooltip" data-comment-id="@comment.id" title="@Messages("button.translation")"><i class="yobicon-lang"></i></button>
}

@if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.READ)) {
<button type="button" class="btn-transparent mr10" data-toggle="comment-edit" data-comment-id="@comment.id" title="@Messages("common.comment.edit")"><i class="yobicon-edit-2"></i></button>
<button type="button" class="btn-transparent ml10" data-toggle="comment-edit" data-comment-id="@comment.id" title="@Messages("common.comment.edit")"><i class="yobicon-edit-2"></i></button>
}
@if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)) {
<button type="button" class="btn-transparent" data-toggle="comment-delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)" title="@Messages("common.comment.delete")"><i class="yobicon-trash"></i></button>
<button type="button" class="btn-transparent ml6" data-toggle="comment-delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)" title="@Messages("common.comment.delete")"><i class="yobicon-trash"></i></button>
}
</span>
</div>
Expand Down
26 changes: 8 additions & 18 deletions app/views/board/view.scala.html
Original file line number Diff line number Diff line change
Expand Up @@ -95,22 +95,22 @@
}
</button>
}
@Html(showWatchers(post))
</div>
</div>

@if(StringUtils.isNotBlank(IssueApi.TRANSLATION_API)){
<button class="ybtn" id="translate">@Messages("button.translation")</button>
}
<a href="@urlToPostings" class="ybtn" data-button="historyBack"><i class="yobicon-angle-left"></i> @Messages("button.list")</a>
@if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.DELETE)) {
<a href="#deleteConfirm" data-toggle="modal" class="ybtn ybtn-danger">@Messages("button.delete")</a>
<button type="button" id="translate" class="icon btn-transparent-with-fontsize-lineheight ml10" data-toggle="tooltip" title="@Messages("button.translation")"><i class="yobicon-lang"></i></button>
}

@if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.UPDATE)) {
<a href="@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)" class="ybtn">@Messages("button.edit")</a>
<button type="button" class="icon btn-transparent-with-fontsize-lineheight ml10 pt5px" data-toggle="tooltip" title="@Messages("button.edit")" onclick="window.location='@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)'"><i class="yobicon-edit-2"></i></button>
} else {
<a href="@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)" class="ybtn">@Messages("button.show.original")</a>
<a href="@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)"><button type="button" class="icon btn-transparent-with-fontsize-lineheight ml10 pt5px" data-toggle="tooltip" title="@Messages("button.show.original")"><i class="yobicon-edit-2"></i></button></a>
}

@if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.DELETE)) {
<a href="#deleteConfirm" data-toggle="modal">
<button type="button" class="icon btn-transparent-with-fontsize-lineheight ml6" data-toggle='tooltip' title="@Messages("button.delete")"><i class="yobicon-trash"></i></button></a>
}
</div>
<div class="watcher-list"></div>
Expand Down Expand Up @@ -182,7 +182,6 @@ <h3>@Messages("issue.delete")</h3>
<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.css")">
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.caret.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.WatcherList.js")"></script>
<script type="text/javascript">
$(document).ready(function(){
$yobi.loadModule("board.View", {
Expand Down Expand Up @@ -222,15 +221,6 @@ <h3>@Messages("issue.delete")</h3>
// detect comment which contains mention at me
$(".comment-body:contains('@UserApp.currentUser().loginId')").closest(".comment").addClass("mentioned");

// Watcher List
var watcherApiUrl = "@api.routes.WatcherApi.getWatchers(project.owner, project.name, post.getNumber)?type=posts";
$("#watch-button").on('click', function () {
setTimeout(function () {
watcherListApi(watcherApiUrl, "@routes.UserApp.userInfo(UserApp.currentUser().loginId)");
}, 1000);
});
watcherListApi(watcherApiUrl);

$('#translate').one('click', function (e) {
var data = {
owner: "@project.owner",
Expand Down
16 changes: 8 additions & 8 deletions app/views/issue/partial_comments.scala.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* Copyright Yona & Yobi Authors & NAVER Corp.
* https://yona.io
**@
@import org.apache.commons.lang3.StringUtils
@(project:Project, issue:Issue)

@import org.apache.commons.lang3.StringUtils
@import utils.TemplateHelper._
@import utils.AccessControl._
@import utils.JodaDateUtil
Expand Down Expand Up @@ -106,7 +106,7 @@
@partial_voter_list("voters-" + issueComment.id, issueComment.voters)
} else {
@for(voter <- issueComment.voters){
<a href="@userInfo(voter.loginId)" class="avatar-wrap smaller" data-toggle="tooltip" data-placement="top" title="@voter.name" style="margin-right:3px;">
<a href="@userInfo(voter.loginId)" class="avatar-wrap smaller" data-toggle="tooltip" data-placement="top" title="@voter.name">
<img src="@User.findByLoginId(voter.loginId).avatarUrl">
</a>
}
Expand All @@ -128,16 +128,16 @@
}
}

@if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.READ)) {
<button type="button" class="btn-transparent-with-fontsize-lineheight ml10" data-toggle="comment-edit" data-comment-id="@comment.id" title="@Messages("common.comment.edit")"><i class="yobicon-edit-2"></i></button>
@if(StringUtils.isNotBlank(IssueApi.TRANSLATION_API)){
<button type="button" class="icon btn-transparent-with-fontsize-lineheight ml10 comment-translate" data-toggle="tooltip" data-comment-id="@comment.id" title="@Messages("button.translation")"><i class="yobicon-lang"></i></button>
}

@if(StringUtils.isNotBlank(IssueApi.TRANSLATION_API)){
<button type="button" class="btn-transparent-with-fontsize-lineheight ml10 comment-translate" data-toggle="tooltip" data-comment-id="@comment.id" title="@Messages("button.translation")"><i class="yobicon-lang"></i><</button>
@if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.READ)) {
<button type="button" class="btn-transparent-with-fontsize-lineheight ml10" data-toggle="comment-edit" data-comment-id="@comment.id" title="@Messages("common.comment.edit")"><i class="yobicon-edit-2"></i></button>
}

@if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)) {
<button type="button" class="btn-transparent-with-fontsize-lineheight ml10" data-toggle="comment-delete" data-request-uri="@routes.IssueApp.deleteComment(project.owner, project.name, issue.getNumber, comment.id)" title="@Messages("common.comment.delete")"><i class="yobicon-trash"></i></button>
<button type="button" class="btn-transparent-with-fontsize-lineheight ml6" data-toggle="comment-delete" data-request-uri="@routes.IssueApp.deleteComment(project.owner, project.name, issue.getNumber, comment.id)" title="@Messages("common.comment.delete")"><i class="yobicon-trash"></i></button>
}
</span>
</div>
Expand Down
24 changes: 5 additions & 19 deletions app/views/issue/partial_voters.scala.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,8 @@
@**
* Yobi, Project Hosting SW
* Yona, 21st Century Project Hosting SW
*
* Copyright 2014 NAVER Corp.
* http://yobi.io
*
* @author Jihan Kim
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* Copyright Yona & Yobi Authors & NAVER Corp. & NAVER LABS Corp.
* https://yona.io
**@
@(issue:models.Issue, numOfAvatars:Int = 3, numOfNames:Int = 5)

Expand All @@ -25,12 +11,12 @@
<div class="voter-list-wrap">
<ul class="voter-list">
@if(issue.isVotedBy(UserApp.currentUser)){
<li>@Html(getUserAvatar(UserApp.currentUser, "medium"))</li>
<li>@Html(getUserAvatar(UserApp.currentUser, "smaller"))</li>
}

@defining(VoteApp.getVotersExceptCurrentUser(issue.voters)) { issueVoters =>
@for(voter <- VoteApp.getVotersForAvatar(issueVoters, numOfAvatars)) {
<li>@Html(getUserAvatar(voter, "medium"))</li>
<li>@Html(getUserAvatar(voter, "smaller"))</li>
}
@if(issueVoters.size > numOfAvatars) {
<li data-toggle="tooltip" data-html="true"
Expand Down
35 changes: 12 additions & 23 deletions app/views/issue/view.scala.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
}
}

@VOTER_AVATAR_SHOW_LIMIT = @{ 5 }

@showChildIssues(parentIssueId: Long) = {
@defining(Issue.findByParentIssueIdAndState(parentIssueId, State.OPEN)) { openChildIssues =>
@defining(Issue.findByParentIssueIdAndState(parentIssueId, State.CLOSED)) { closedChildIssues =>
Expand Down Expand Up @@ -170,15 +172,13 @@
<a href="@urlToVote" class="ybtn @if(issue.isVotedBy(UserApp.currentUser)){ybtn-watching}" title="@getVoteButtonTitle"
data-request-method="post" data-toggle="tooltip">
<span class="heart"><i class="yobicon-hearts"></i></span>
<span class="desc">@Messages("issue.vote")</span>
@if(issue.voters.size > 0) {
<strong class="count">@issue.voters.size</strong>
}
</a>
} else {
<span class="ybtn ybtn-disabled" style="color:#777;" data-toggle="tooltip" title="@Messages("user.login.alert")" data-login="required">
<span class="heart"><i class="yobicon-hearts"></i></span>
<span class="desc">@Messages("issue.vote")</span>
@if(issue.voters.size > 0) {
<strong class="count">@issue.voters.size</strong>
}
Expand All @@ -189,26 +189,25 @@
@partial_voters(issue, 3)
}
</div>
@Html(showWatchers(issue))
</div>
</div>

@if(StringUtils.isNotBlank(IssueApi.TRANSLATION_API)){
<button class="ybtn" id="translate">@Messages("button.translation")</button>
<button type="button" id="translate" class="icon btn-transparent-with-fontsize-lineheight ml10" data-toggle="tooltip" title="@Messages("button.translation")"><i class="yobicon-lang"></i></button>
}

@if(isAllowed(UserApp.currentUser(), issue.asResource(), Operation.UPDATE)) {
<button type="button" class="icon btn-transparent-with-fontsize-lineheight ml10 pt5px" data-toggle="tooltip" title="@Messages("button.edit")" onclick="window.location='@routes.IssueApp.editIssueForm(project.owner, project.name, issue.getNumber)'"><i class="yobicon-edit-2"></i></button>
} else {
<a href="@routes.IssueApp.editIssueForm(project.owner, project.name, issue.getNumber)"><button type="button" class="icon btn-transparent-with-fontsize-lineheight ml10 pt5px" data-toggle="tooltip" title="@Messages("button.show.original")"><i class="yobicon-edit-2"></i></button></a>
}
<a href="@urlToIssues" class="ybtn" data-button="historyBack"><i class="yobicon-angle-left"></i> @Messages("button.list")</a>
@if(issue.canBeDeleted) {
@if(isAllowed(UserApp.currentUser(), issue.asResource(), Operation.DELETE)) {
<a href="#deleteConfirm" data-toggle="modal" class="ybtn ybtn-danger">@Messages("button.delete")</a>
<a href="#deleteConfirm" data-toggle="modal">
<button type="button" class="icon btn-transparent-with-fontsize-lineheight ml6" data-toggle='tooltip' title="@Messages("button.delete")"><i class="yobicon-trash"></i></button></a>
}
} else {
<button class="ybtn ybtn-disabled" data-toggle="tooltip" data-placement="top" title="@Messages("issue.can.not.be.deleted")">@Messages("button.delete")</button>
}

@if(isAllowed(UserApp.currentUser(), issue.asResource(), Operation.UPDATE)) {
<a href="@routes.IssueApp.editIssueForm(project.owner, project.name, issue.getNumber)" class="ybtn">@Messages("button.edit")</a>
} else {
<a href="@routes.IssueApp.editIssueForm(project.owner, project.name, issue.getNumber)" class="ybtn">@Messages("button.show.original")</a>
<button type="button" class="icon disabled btn-transparent-with-fontsize-lineheight ml6" data-toggle='popover' data-trigger="hover" data-placement="top" data-content="@Messages("issue.can.not.be.deleted")"><i class="yobicon-trash"></i></button>
}
</div>
<div class="watcher-list"></div>
Expand Down Expand Up @@ -403,7 +402,6 @@ <h3>@Messages("issue.delete")</h3>
<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.css")">
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.caret.min.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/lib/atjs/jquery.atwho.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yobi.WatcherList.js")"></script>
<script type="text/javascript" src="@routes.Assets.at("javascripts/service/yona.issue.Assginee.js")"></script>
<script type="text/javascript">
$(function(){
Expand Down Expand Up @@ -439,15 +437,6 @@ <h3>@Messages("issue.delete")</h3>

// detect comment which contains mention at me
$(".comment-body:contains('@UserApp.currentUser().loginId')").closest(".comment").addClass("mentioned");

// Watcher List
var watcherApiUrl = "@api.routes.WatcherApi.getWatchers(project.owner, project.name, issue.getNumber)?type=issues";
$("#watch-button").on('click', function () {
setTimeout(function () {
watcherListApi(watcherApiUrl, "@routes.UserApp.userInfo(UserApp.currentUser().loginId)");
}, 1000);
});
watcherListApi(watcherApiUrl);
});
</script>
<script>
Expand Down
Loading

0 comments on commit f268a3e

Please sign in to comment.