Improve dependency UI (#4503)

options/locale/locale_en-US.ini

@@ -794,6 +794,7 @@ issues.dependency.pr_no_dependencies = This pull request currently doesn't have
 issues.dependency.add = Add dependency...
 issues.dependency.cancel = Cancel
 issues.dependency.remove = Remove
+issues.dependency.remove_info = Remove this dependency
 issues.dependency.added_dependency = `<a href="%[1]s">%[2]s</a> added a new dependency %[3]s`
 issues.dependency.removed_dependency = `<a href="%[1]s">%[2]s</a> removed a dependency %[3]s`
 issues.dependency.issue_closing_blockedby = Closing this pull request is blocked by the following issues

public/less/_base.less

@@ -156,6 +156,10 @@ pre, code {
         z-index: 10;
     }
 
+    &.transparent.label {
+        background-color: transparent;
+    }
+
     &.menu,
     &.vertical.menu,
     &.segment {

public/less/_repository.less

@@ -743,6 +743,14 @@
                 margin-right: 5px;
             }
         }
+
+        .ui.depending {
+            .item.is-closed {
+                .title {
+                    text-decoration: line-through;
+                }
+            }
+        }
     }
     .comment.form {
         .ui.comments {

templates/repo/issue/view_content/sidebar.tmpl

@@ -254,40 +254,14 @@
 			<div class="ui divider"></div>
 
 			<div class="ui depending">
+				{{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}}
 					<span class="text"><strong>{{.i18n.Tr "repo.issues.dependency.title"}}</strong></span>
 					<br>
-				{{if .BlockedByDependencies}}
+					<p>{{if .Issue.IsPull}}
-					<span class="text" data-tooltip="{{if .Issue.IsPull}}
+							{{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}}
-						{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}
 						{{else}}
-						{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}
+							{{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}}
-					{{end}}" data-inverted="">
+						{{end}}</p>
-					{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}:
-					</span>
-					<div class="ui relaxed divided list">
-						{{range .BlockedByDependencies}}
-							<div class="item">
-								<div class="right floated content">
-									{{if $.CanCreateIssueDependencies}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.ID}}, 'blockedBy');">
-											<i class="delete icon text red"></i>
-										</a>
-									{{end}}
-									{{if .IsClosed}}
-										<div class="ui red mini label">
-											<i class="octicon octicon-issue-closed"></i>
-										</div>
-									{{else}}
-										<div class="ui green mini label">
-											<i class="octicon octicon-issue-opened"></i>
-										</div>
-									{{end}}
-								</div>
-								<div class="ui black label">#{{.Index}}</div>
-								<a class="title has-emoji" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title}}</a>
-							</div>
-						{{end}}
-					</div>
 				{{end}}
 
 				{{if .BlockingDependencies}}
@@ -296,40 +270,50 @@
 						{{else}}
 							{{.i18n.Tr "repo.issues.dependency.issue_close_blocks"}}
 						{{end}}" data-inverted="">
-					{{.i18n.Tr "repo.issues.dependency.blocks_short"}}:
+					<strong>{{.i18n.Tr "repo.issues.dependency.blocks_short"}}</strong>
 					</span>
 					<div class="ui relaxed divided list">
 						{{range .BlockingDependencies}}
-							<div class="item">
+							<div class="item{{if .IsClosed}} is-closed{{end}}">
-								<div class="right floated content">
+								<div class="ui black label">#{{.Index}}</div>
+								<a class="title has-emoji" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title}}</a>
+								<div class="ui transparent label right floated">
 									{{if $.CanCreateIssueDependencies}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.ID}}, 'blocking');">
+										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.ID}}, 'blocking');"
+										   data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red"></i>
 										</a>
 									{{end}}
-									{{if .IsClosed}}
-										<div class="ui red tiny label">
-											<i class="octicon octicon-issue-closed"></i>
 								</div>
-									{{else}}
-										<div class="ui green mini label">
-											<i class="octicon octicon-issue-opened"></i>
-										</div>
-									{{end}}
-								</div>
-								<div class="ui black label">#{{.Index}}</div>
-								<a class="title has-emoji" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title}}</a>
 							</div>
 						{{end}}
 					</div>
 				{{end}}
 
-				{{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}}
+				{{if .BlockedByDependencies}}
-					<p>{{if .Issue.IsPull}}
+					<span class="text" data-tooltip="{{if .Issue.IsPull}}
-							{{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}}
+						{{.i18n.Tr "repo.issues.dependency.issue_closing_blockedby"}}
 					{{else}}
-							{{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}}
+						{{.i18n.Tr "repo.issues.dependency.pr_closing_blockedby"}}
-						{{end}}</p>
+					{{end}}" data-inverted="">
+					<strong>{{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}</strong>
+					</span>
+					<div class="ui relaxed divided list">
+						{{range .BlockedByDependencies}}
+							<div class="item{{if .IsClosed}} is-closed{{end}}">
+								<div class="ui black label">#{{.Index}}</div>
+								<a class="title has-emoji" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Title}}</a>
+								<div class="ui transparent label right floated">
+									{{if $.CanCreateIssueDependencies}}
+										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.ID}}, 'blockedBy');"
+										   data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
+											<i class="delete icon text red"></i>
+										</a>
+									{{end}}
+								</div>
+							</div>
+						{{end}}
+					</div>
 				{{end}}
 
 				{{if .CanCreateIssueDependencies}}