From 4447a20f872776123c42d5b8ca987c114fb4b80b Mon Sep 17 00:00:00 2001
From: Unknwon <u@gogs.io>
Date: Fri, 24 Jul 2015 04:50:05 +0800
Subject: UI: issues - finish basic frame

---
 templates/repo/issue/list.tmpl     | 203 +++++++++++++++----------------------
 templates/repo/issue/list_old.tmpl | 120 ++++++++++++++++++++++
 templates/repo/issue/navbar.tmpl   |   7 ++
 3 files changed, 211 insertions(+), 119 deletions(-)
 create mode 100644 templates/repo/issue/list_old.tmpl
 create mode 100644 templates/repo/issue/navbar.tmpl

(limited to 'templates/repo/issue')

diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 8c267382..6f16a6c7 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -1,120 +1,85 @@
-{{template "base/head_old" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
-    <div id="issue">
-        <div class="col-md-3 filters">
-            <div class="filter-list">
-                <ul class="list-unstyled">
-                    <li><a href="{{.RepoLink}}/issues?state={{.State}}"{{if eq .ViewType "all"}} class="active"{{end}}>All Issues <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=assigned&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=created_by&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
-                    <li><a href="{{.RepoLink}}/issues?type=mentioned&state={{.State}}"{{if eq .ViewType "mentioned"}} class="active"{{end}}>Mentioning you <strong class="pull-right">{{.IssueStats.MentionCount}}</strong></a></li>
-                </ul>
-            </div>
-            <div class="label-filter">
-                <h4>Label</h4>
-                <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
-                    {{range .Labels}}
-                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
-                        <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
-                            <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
-                            <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
-                            <span class="name">{{.Name}}</span>
-                        </a>
-                        <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
-                    </li>
-                    {{end}}
-                    {{if or .IsRepositoryOwner .IsAdmin}}
-                    <li class="label-change-li" style="display: none">
-                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
-                            {{.CsrfTokenHtml}}
-                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
-                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
-                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
-                                <span class="input-group-addon"><i></i></span>
-                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
-                            </div>
-                            <div class="form-group text-right">
-                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
-                                <button class="btn btn-default btn-sm">Save</button>
-                            </div>
-                        </form>
-                    </li>
-                    {{end}}
-                </ul>
-                {{if or .IsRepositoryOwner .IsAdmin}}
-                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
-                <hr/>
-                <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
-                    {{.CsrfTokenHtml}}
-                    <h5><strong>New Label</strong></h5>
-                    <div class="input-group label-color-picker form-group">
-                        <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
-                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
-                        <span class="input-group-addon"><i></i></span>
-                    </div>
-                    <div class="form-group text-right">
-                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
-                        <button class="btn btn-default btn-sm">Create</button>
-                    </div>
-                </form>
-                {{end}}
-            </div>
-        </div>
-        <div class="col-md-9">
-            {{template "base/alert" .}}
-            <div class="filter-option">
-                <div class="btn-group">
-                    <a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">{{.IssueStats.OpenCount}} Open</a>
-                    <a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">{{.IssueStats.ClosedCount}} Closed</a>
-                </div>
-            </div>
-            <div class="issues list-group">
-                {{range .Issues}}{{if .Poster}}
-                <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
-                    <span class="number pull-right">#{{.Index}}</span>
-                    <h5 class="title">
-                        <a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
-                        <span class="labels">
-                            {{range .Labels}}
-                            <span class="label" style="background-color: {{.Color}}">{{.Name}}</span>
-                            {{end}}
-                        </span>
-                    </h5>
-                    <p class="info">
-                        <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
-                        <a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
-                        <span class="time">{{TimeSince .Created $.Lang}}</span>
-                        <span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
-                    </p>
-                </div>
-                {{end}}{{end}}
-            </div>
-            </div>
-        </div>
-    </div>
+{{template "base/head" .}}
+<div class="repository">
+	{{template "repo/header" .}}
+	<div class="ui middle page grid body">
+		<div class="navbar">
+			{{template "repo/issue/navbar" .}}
+			<div class="ui right floated secondary menu">
+				<a class="ui green button" href="{{$.RepoLink}}/issues/new">{{.i18n.Tr "repo.issues.new"}}</a>
+			</div>
+		</div>
+		<div class="ui divider"></div>
+		<div class="ui left">
+			<div class="ui tiny buttons">
+			  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">
+			  	<i class="octicon octicon-issue-opened"></i>
+			  	{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
+			  </a>
+			  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">
+			  	<i class="octicon octicon-issue-closed"></i>
+			  	{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
+			  </a>
+			</div>
+		</div>
+		<div class="ui right floated secondary filter menu">
+			<div class="ui {{if not .Labels}}disabled{{end}} pointing dropdown item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_label"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	{{range .Labels}}
+        	<a class="item" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{.Id}}"><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
+          {{end}}
+				</div>
+			</div>
+			<div class="ui {{if not .Milestones}}disabled{{end}} pointing dropdown item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_milestone"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	{{range .Milestones}}
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.Name}}</a>
+          {{end}}
+				</div>
+			</div>
+			<div class="ui {{if not .Assignees}}disabled{{end}} pointing dropdown item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_assignee"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	{{range .Assignees}}
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.Name}}</a>
+          {{end}}
+				</div>
+			</div>
+			<div class="ui pointing dropdown type item">
+				<span class="text">
+					{{.i18n.Tr "repo.issues.filter_type"}}
+					<i class="dropdown icon"></i>
+				</span>
+        <div class="menu">
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}</a>
+        	<a class="item" href="{{$.RepoLink}}/issues">{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}</a>
+				</div>
+			</div>
+		</div>
+
+		<div class="issue list">
+			{{range .Issues}}
+			{{ $timeStr:= TimeSince .Created $.Lang }}
+      <li class="item">
+      	<div class="ui black label">#{{.Id}}</div>
+      	<a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+        <p class="desc">{{$.i18n.Tr "repo.issues.opened_by" $timeStr .Poster.Name|Str2html}}</p>
+      	{{if .NumComments}}<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>{{end}}
+      </li>
+      {{end}}
+		</div>
+	</div>
 </div>
-<script src="{{AppSubUrl}}/js/bootstrap-colorpicker.min.js"></script>
-<script>
-    $(function(){
-        $('.label-color-picker').colorpicker({
-            input: $('#label-color-ipt')
-        }).on('changeColor', function (ev) {
-            var $ipt = $('#label-color-ipt2');
-            if ($ipt.val().length != 4) {
-                $ipt.val(ev.color.toHex());
-            }
-        });
-        $('.label-change-color-picker').colorpicker({
-            input:$('#label-color-change-ipt')
-        }).on('changeColor', function (ev) {
-            var $ipt = $('#label-color-change-ipt2');
-            if ($ipt.val().length != 4) {
-                $ipt.val(ev.color.toHex());
-            }
-        });
-    });
-</script>
-{{template "base/footer_old" .}}
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/repo/issue/list_old.tmpl b/templates/repo/issue/list_old.tmpl
new file mode 100644
index 00000000..8c267382
--- /dev/null
+++ b/templates/repo/issue/list_old.tmpl
@@ -0,0 +1,120 @@
+{{template "base/head_old" .}}
+{{template "base/navbar" .}}
+{{template "repo/nav" .}}
+{{template "repo/toolbar" .}}
+<div id="body" class="container">
+    <div id="issue">
+        <div class="col-md-3 filters">
+            <div class="filter-list">
+                <ul class="list-unstyled">
+                    <li><a href="{{.RepoLink}}/issues?state={{.State}}"{{if eq .ViewType "all"}} class="active"{{end}}>All Issues <strong class="pull-right">{{.IssueStats.AllCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=assigned&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=created_by&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
+                    <li><a href="{{.RepoLink}}/issues?type=mentioned&state={{.State}}"{{if eq .ViewType "mentioned"}} class="active"{{end}}>Mentioning you <strong class="pull-right">{{.IssueStats.MentionCount}}</strong></a></li>
+                </ul>
+            </div>
+            <div class="label-filter">
+                <h4>Label</h4>
+                <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
+                    {{range .Labels}}
+                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
+                        <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
+                            <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
+                            <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
+                            <span class="name">{{.Name}}</span>
+                        </a>
+                        <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
+                    </li>
+                    {{end}}
+                    {{if or .IsRepositoryOwner .IsAdmin}}
+                    <li class="label-change-li" style="display: none">
+                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
+                            {{.CsrfTokenHtml}}
+                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
+                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
+                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
+                                <span class="input-group-addon"><i></i></span>
+                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
+                            </div>
+                            <div class="form-group text-right">
+                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
+                                <button class="btn btn-default btn-sm">Save</button>
+                            </div>
+                        </form>
+                    </li>
+                    {{end}}
+                </ul>
+                {{if or .IsRepositoryOwner .IsAdmin}}
+                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
+                <hr/>
+                <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
+                    {{.CsrfTokenHtml}}
+                    <h5><strong>New Label</strong></h5>
+                    <div class="input-group label-color-picker form-group">
+                        <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
+                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
+                        <span class="input-group-addon"><i></i></span>
+                    </div>
+                    <div class="form-group text-right">
+                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
+                        <button class="btn btn-default btn-sm">Create</button>
+                    </div>
+                </form>
+                {{end}}
+            </div>
+        </div>
+        <div class="col-md-9">
+            {{template "base/alert" .}}
+            <div class="filter-option">
+                <div class="btn-group">
+                    <a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">{{.IssueStats.OpenCount}} Open</a>
+                    <a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">{{.IssueStats.ClosedCount}} Closed</a>
+                </div>
+            </div>
+            <div class="issues list-group">
+                {{range .Issues}}{{if .Poster}}
+                <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
+                    <span class="number pull-right">#{{.Index}}</span>
+                    <h5 class="title">
+                        <a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+                        <span class="labels">
+                            {{range .Labels}}
+                            <span class="label" style="background-color: {{.Color}}">{{.Name}}</span>
+                            {{end}}
+                        </span>
+                    </h5>
+                    <p class="info">
+                        <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
+                        <a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
+                        <span class="time">{{TimeSince .Created $.Lang}}</span>
+                        <span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
+                    </p>
+                </div>
+                {{end}}{{end}}
+            </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="{{AppSubUrl}}/js/bootstrap-colorpicker.min.js"></script>
+<script>
+    $(function(){
+        $('.label-color-picker').colorpicker({
+            input: $('#label-color-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
+        });
+        $('.label-change-color-picker').colorpicker({
+            input:$('#label-color-change-ipt')
+        }).on('changeColor', function (ev) {
+            var $ipt = $('#label-color-change-ipt2');
+            if ($ipt.val().length != 4) {
+                $ipt.val(ev.color.toHex());
+            }
+        });
+    });
+</script>
+{{template "base/footer_old" .}}
diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
new file mode 100644
index 00000000..e4a58f77
--- /dev/null
+++ b/templates/repo/issue/navbar.tmpl
@@ -0,0 +1,7 @@
+<div class="ui left">
+	<div class="ui compact menu">
+	  <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">{{.i18n.Tr "repo.issues"}}</a>
+	  <a class="item" href="{{.RepoLink}}/labels">{{.i18n.Tr "repo.labels"}}</a>
+	  <a class="item" href="{{.RepoLink}}/milestones">{{.i18n.Tr "repo.milestones"}}</a>
+	</div>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3