Display current stopwatch in navbar (#14122)

* add notification about running stopwatch to header

* serialize seconds, duration in stopwatches api

* ajax update stopwatch

i should get my testenv working locally...

* new variant: hover dialog

* noscript compatibility

* js: live-update stopwatch time

* js live update robustness

templates/base/head_navbar.tmpl

@@ -67,6 +67,44 @@
 		</div>
 	{{else if .IsSigned}}
 		<div class="right stackable menu">
+			{{$issueURL := Printf "%s/%s/issues/%d" AppSubUrl .ActiveStopwatch.RepoSlug .ActiveStopwatch.IssueIndex}}
+			<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{$issueURL}}">
+				<span class="text">
+					<span class="fitted item">
+						{{svg "octicon-stopwatch"}}
+						<span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span>
+					</span>
+					<span class="sr-mobile-only">{{.i18n.Tr "active_stopwatch"}}</span>
+				</span>
+			</a>
+			<div class="ui popup very wide">
+				<div class="df ac">
+					<a class="stopwatch-link df ac" href="{{$issueURL}}">
+						{{svg "octicon-issue-opened"}}
+						<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
+						<span class="ui label blue stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
+							{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
+						</span>
+					</a>
+					<form class="stopwatch-commit" method="POST" action="{{$issueURL}}/times/stopwatch/toggle">
+						{{.CsrfTokenHtml}}
+						<button
+							class="ui button mini compact basic icon fitted poping up"
+							data-content="{{.i18n.Tr "repo.issues.stop_tracking"}}"
+							data-position="top right" data-variation="small inverted"
+						>{{svg "octicon-square-fill"}}</button>
+					</form>
+					<form class="stopwatch-cancel" method="POST" action="{{$issueURL}}/times/stopwatch/cancel">
+						{{.CsrfTokenHtml}}
+						<button
+							class="ui button mini compact basic icon fitted poping up"
+							data-content="{{.i18n.Tr "repo.issues.cancel_tracking"}}"
+							data-position="top right" data-variation="small inverted"
+						>{{svg "octicon-trashcan"}}</button>
+					</form>
+				</div>
+			</div>
+
 			<a href="{{AppSubUrl}}/notifications" class="item poping up" data-content='{{.i18n.Tr "notifications"}}' data-variation="tiny inverted">
 				<span class="text">
 					<span class="fitted">{{svg "octicon-bell"}}</span>

templates/repo/issue/new_form.tmpl

@@ -1,4 +1,4 @@
-<form class="ui comment form stackable grid" action="{{.Link}}" method="post">
+<form class="ui comment form stackable grid" id="new-issue" action="{{.Link}}" method="post">
 	{{.CsrfTokenHtml}}
 	{{if .Flash}}
 		<div class="sixteen wide column">

templates/swagger/v1_json.tmpl

@@ -15473,6 +15473,10 @@
           "format": "date-time",
           "x-go-name": "Created"
         },
+        "duration": {
+          "type": "string",
+          "x-go-name": "Duration"
+        },
         "issue_index": {
           "type": "integer",
           "format": "int64",
@@ -15489,6 +15493,11 @@
         "repo_owner_name": {
           "type": "string",
           "x-go-name": "RepoOwnerName"
+        },
+        "seconds": {
+          "type": "integer",
+          "format": "int64",
+          "x-go-name": "Seconds"
         }
       },
       "x-go-package": "code.gitea.io/gitea/modules/structs"