From c82807a713b1c69f7781b0c6b8079d9df5e174c2 Mon Sep 17 00:00:00 2001
From: FuXiaoHei <fuxiaohei@hexiaz.com>
Date: Mon, 19 May 2014 23:47:11 +0800
Subject: [PATCH] add issue label attach-detach ui
---
public/css/gogs.css | 48 ++++++++++++++++++++++++++++++++++++---
public/js/app.js | 12 ++++++++++
templates/issue/view.tmpl | 29 +++++++++++++++++++++++
3 files changed, 86 insertions(+), 3 deletions(-)
diff --git a/public/css/gogs.css b/public/css/gogs.css
index bfca9d83ee..e3d423a3dc 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1502,7 +1502,7 @@ html, body {
min-width: 160px;
}
-#issue .issue-bar .assignee .dropdown-menu, #issue .issue-bar .milestone .dropdown-menu {
+#issue .issue-bar .assignee .dropdown-menu, #issue .issue-bar .milestone .dropdown-menu, #issue .issue-bar .labels .dropdown-menu {
padding: 0;
margin: 0;
}
@@ -1549,9 +1549,9 @@ html, body {
line-height: 30px;
}
-#issue .issue-bar .assignee .action, #issue .issue-bar .milestone .action {
+#issue .issue-bar .assignee .action, #issue .issue-bar .milestone .action, #issue .issue-bar .labels .action {
position: relative;
- margin-top: -8px;
+ margin-top: -6px;
}
#issue .issue-bar .milestone .completion {
@@ -1575,6 +1575,48 @@ html, body {
margin-right: 12px;
}
+#issue .issue-bar .labels .label-item {
+ padding: 2px 12px 4px 12px;
+ border-radius: 2px;
+ text-shadow: 0 0 2px #444;
+}
+
+#issue .issue-bar .labels .label-white {
+ color: #FFF;
+}
+
+#issue .issue-bar .labels .label-black {
+ color: #444;
+}
+
+#issue .issue-bar .labels .dropdown-menu ul {
+ margin: 0;
+ width: 180px;
+}
+
+#issue .issue-bar .labels .dropdown-menu li {
+ line-height: 30px;
+ padding-left: 12px;
+ border-bottom: 1px solid #DDD;
+}
+
+#issue .issue-bar .labels .dropdown-menu li:hover {
+ background-color: #e8f0ff;
+ cursor: pointer;
+}
+
+#issue .issue-bar .labels .color {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ vertical-align: text-top;
+ margin-right: 6px;
+}
+
+#issue .issue-bar .labels .no-checked .color {
+ margin-left: 26px;
+}
+
/* wrapper and footer */
#wrapper {
diff --git a/public/js/app.js b/public/js/app.js
index 53948578b9..e88dadc2e0 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -650,6 +650,18 @@ function initIssue() {
$(this).parent().remove();
return false;
});
+ $('.issue-bar .labels .dropdown-menu').on('click', 'li', function (e) {
+ var url = $('.issue-bar .labels').data("ajax");
+ var id = $(this).data('id');
+ var check = $(this).hasClass("checked");
+ $.post(url, {id: id, action: check ? 'detach' : "attach"}, function (json) {
+ if (json.ok) {
+ window.location.reload();
+ }
+ });
+ e.stopPropagation();
+ return false;
+ })
}
function initRelease() {
diff --git a/templates/issue/view.tmpl b/templates/issue/view.tmpl
index 18ec5faf0e..17365e66d1 100644
--- a/templates/issue/view.tmpl
+++ b/templates/issue/view.tmpl
@@ -100,6 +100,35 @@
</div>
<div class="issue-bar col-md-2">
+ <div class="labels" data-ajax="{url}">
+ <div class="pull-right action">
+ <button class="btn btn-default btn-sm" data-toggle="dropdown">
+ <i class="fa fa-tags"></i>
+ <span class="caret"></span>
+ </button>
+ <div class="dropdown-menu dropdown-menu-right no">
+ <ul class="list-unstyled">
+ <li class="checked" data-id="1">
+ <span class="check pull-left"><i class="fa fa-check"></i></span>
+ <span class="color" style="background-color: #f59e00"></span>
+ <span class="name">bug</span>
+ </li>
+ <li class="no-checked" data-id="2">
+ <span class="color" style="background-color: #f59e00"></span>
+ <span class="name">bug</span>
+ </li>
+ <li class="no-checked" data-id="3">
+ <span class="color" style="background-color: #f59e00"></span>
+ <span class="name">bug</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <h4>Labels</h4>
+ <p id="label-1" class="label-item label-white" style="background-color: #e75316"><strong>bug</strong></p>
+ <p id="label-2" class="label-item label-white" style="background-color: #e8f0ff"><strong>bug</strong></p>
+ <p>Not yet</p>
+ </div>
<div class="milestone" data-milestone="{{.Milestone.Id}}" data-ajax="{{.Issue.Index}}/milestone">
<div class="pull-right action">
<button class="btn btn-default btn-sm" data-toggle="dropdown">