Change review buttons to icons to make space for text (#20934) (#20978)

The layout on the review code view was broken depending on length of the text. Change all three buttons to icons with tooltip to make more space for these long texts.

Fixes: #20922

diff --git a/public/img/svg/gitea-join.svg b/public/img/svg/gitea-join.svg
new file mode 100644 (file)
index 0000000..678b937
--- /dev/null
+++ b/public/img/svg/gitea-join.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg gitea-join" width="16" height="16" aria-hidden="true"><path d="M14 10.9V8.75h1.25a.75.75 0 0 0 0-1.5H14V5.1a.25.25 0 0 0-.43-.17l-2.9 2.9a.25.25 0 0 0 0 .35l2.9 2.9a.25.25 0 0 0 .43-.18ZM.75 8.75a.75.75 0 0 1 0-1.5H2V5.1a.25.25 0 0 1 .43-.17l2.9 2.9a.25.25 0 0 1 0 .35l-2.9 2.9A.25.25 0 0 1 2 10.9V8.75Zm6.5-6.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 6a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 6Zm-.75 2.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 12a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 12Zm-.75 2.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0z"/></svg>
\ No newline at end of file

diff --git a/public/img/svg/gitea-split.svg b/public/img/svg/gitea-split.svg
new file mode 100644 (file)
index 0000000..f819255
--- /dev/null
+++ b/public/img/svg/gitea-split.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" class="svg gitea-split" width="16" height="16" aria-hidden="true"><path d="M7.25 14.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 12a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 12Zm-.75-3.75a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 6a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 6Zm-.75-3.75a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zm4.1 6.5a.75.75 0 0 1 0-1.5h1.25V5.1a.25.25 0 0 1 .43-.17l2.9 2.9a.25.25 0 0 1 0 .35l-2.9 2.9a.25.25 0 0 1-.43-.18V8.75ZM3.4 10.9V8.75h1.25a.75.75 0 0 0 0-1.5H3.4V5.1a.25.25 0 0 0-.43-.17l-2.9 2.9a.25.25 0 0 0 0 .35l2.9 2.9a.25.25 0 0 0 .43-.18z"/></svg>
\ No newline at end of file

diff --git a/public/img/svg/gitea-whitespace.svg b/public/img/svg/gitea-whitespace.svg
new file mode 100644 (file)
index 0000000..6b34f33
--- /dev/null
+++ b/public/img/svg/gitea-whitespace.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 15 15" class="svg gitea-whitespace" width="16" height="16" aria-hidden="true"><path d="m2.5 7.5.35.35a.5.5 0 0 0 0-.7l-.35.35ZM3 4h12V3H3v1Zm4 4h8V7H7v1Zm-4 4h12v-1H3v1ZM.85 9.85l2-2-.7-.7-2 2 .7.7Zm2-2.7-2-2-.7.7 2 2 .7-.7Z"/></svg>
\ No newline at end of file

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index fdc6db2f1a53e7c46d97a3b9a87ade7027529f9d..2fbc5b0e10f368606e92bc26901653b035e4df1a 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -13,14 +13,14 @@
        <h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
 {{else}}
        <div>
-               <div class="diff-detail-box diff-box sticky df sb ac">
+               <div class="diff-detail-box diff-box sticky df sb ac fw">
                        <div class="diff-detail-stats df ac">
                                {{svg "octicon-diff" 16 "mr-2"}}{{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
                        </div>
                        <div class="diff-detail-actions df ac">
                                {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
                                        <progress id="viewed-files-summary" class="mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
-                                       <label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-2" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
+                                       <label for="viewed-files-summary" id="viewed-files-summary-label" class="mr-3" data-text-changed-template="{{.i18n.Tr "repo.pulls.viewed_files_label"}}">
                                                {{.i18n.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
                                        </label>
                                {{end}}

diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index e4110b50ed0229bc989ac38ef3d196ba719459fc..44361c8f7324f548bad3f53236d80921410bfc8d 100644 (file)
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -1,5 +1,5 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
-       <div class="ui tiny green button btn-review">
+       <div class="ui tiny green button btn-review ml-2 mr-0">
                {{.i18n.Tr "repo.diff.review"}}
                <span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
                {{svg "octicon-triangle-down" 14 "dropdown icon"}}

diff --git a/templates/repo/diff/options_dropdown.tmpl b/templates/repo/diff/options_dropdown.tmpl
index a6ac49210f64e9b48cfa9b3dd8fff7632144c00c..bd852dd630344c62d34fcace136a5cac4b6b7270 100644 (file)
--- a/templates/repo/diff/options_dropdown.tmpl
+++ b/templates/repo/diff/options_dropdown.tmpl
@@ -1,6 +1,5 @@
-<div class="ui dropdown tiny basic button">
-       {{.i18n.Tr "repo.diff.options_button"}}
-       {{svg "octicon-triangle-down" 14 "dropdown icon"}}
+<div class="ui dropdown tiny basic button icon-button tooltip" data-content="{{.i18n.Tr "repo.diff.options_button"}}">
+       {{svg "octicon-kebab-horizontal"}}
        <div class="menu">
                <a class="item tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
                {{if .Issue.Index}}

diff --git a/templates/repo/diff/whitespace_dropdown.tmpl b/templates/repo/diff/whitespace_dropdown.tmpl
index 7ea4238d6d28062e0ec5e96ec558559f06ec586a..95062d87d3e7e86285508b60b7a61f3ed8ac8e4e 100644 (file)
--- a/templates/repo/diff/whitespace_dropdown.tmpl
+++ b/templates/repo/diff/whitespace_dropdown.tmpl
@@ -1,5 +1,5 @@
-<div class="ui dropdown tiny basic button">
-       {{.i18n.Tr "repo.diff.whitespace_button"}}
+<div class="ui dropdown tiny basic button icon-button tooltip" data-content="{{.i18n.Tr "repo.diff.whitespace_button"}}">
+       {{svg "gitea-whitespace"}}
        {{svg "octicon-triangle-down" 14 "dropdown icon"}}
        <div class="menu">
                <a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all">
@@ -20,4 +20,4 @@
                </a>
        </div>
 </div>
-<a class="ui tiny basic toggle button" href="?style={{if .IsSplitStyle}}unified{{else}}split{{end}}&whitespace={{$.WhitespaceBehavior}}">{{ if .IsSplitStyle }}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}</a>
+<a class="ui tiny basic toggle button icon-button tooltip" href="?style={{if .IsSplitStyle}}unified{{else}}split{{end}}&whitespace={{$.WhitespaceBehavior}}" data-content="{{if .IsSplitStyle}}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}">{{if .IsSplitStyle}}{{svg "gitea-join"}}{{else}}{{svg "gitea-split"}}{{end}}</a>

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index cfaa2e3c4d881c323979a5f17495687e964a3ae2..eeb0fe35ecf1593aab7f26134e4bf1cf10a99e11 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -299,6 +299,12 @@ a.commit-statuses-trigger {
   &:extend(.unselectable);
 }
 
+/* try to match button with no icons in height */
+.icon-button {
+  padding-top: 7.42px !important;
+  padding-bottom: 7.42px !important;
+}
+
 .ui.breadcrumb a:hover {
   text-decoration: underline !important;
 }

diff --git a/web_src/svg/gitea-join.svg b/web_src/svg/gitea-join.svg
new file mode 100644 (file)
index 0000000..04c3e92
--- /dev/null
+++ b/web_src/svg/gitea-join.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14 10.9V8.75h1.25a.75.75 0 0 0 0-1.5H14V5.1a.25.25 0 0 0-.43-.17l-2.9 2.9a.25.25 0 0 0 0 .35l2.9 2.9a.25.25 0 0 0 .43-.18ZM.75 8.75a.75.75 0 0 1 0-1.5H2V5.1a.25.25 0 0 1 .43-.17l2.9 2.9a.25.25 0 0 1 0 .35l-2.9 2.9A.25.25 0 0 1 2 10.9V8.75Zm6.5-6.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 6a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 6Zm-.75 2.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 12a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 12Zm-.75 2.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0z"/></svg>
\ No newline at end of file

diff --git a/web_src/svg/gitea-split.svg b/web_src/svg/gitea-split.svg
new file mode 100644 (file)
index 0000000..e5686b2
--- /dev/null
+++ b/web_src/svg/gitea-split.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M7.25 14.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 12a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 12ZM7.25 8.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM8 6a.75.75 0 0 1-.75-.75v-.5a.75.75 0 0 1 1.5 0v.5A.75.75 0 0 1 8 6ZM7.25 2.25a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-1.5 0zM11.35 8.75a.75.75 0 0 1 0-1.5h1.25V5.1a.25.25 0 0 1 .43-.17l2.9 2.9a.25.25 0 0 1 0 .35l-2.9 2.9a.25.25 0 0 1-.43-.18V8.75ZM3.4 10.9V8.75h1.25a.75.75 0 0 0 0-1.5H3.4V5.1a.25.25 0 0 0-.43-.17l-2.9 2.9a.25.25 0 0 0 0 .35l2.9 2.9a.25.25 0 0 0 .43-.18z"/></svg>
\ No newline at end of file

diff --git a/web_src/svg/gitea-whitespace.svg b/web_src/svg/gitea-whitespace.svg
new file mode 100644 (file)
index 0000000..1588c04
--- /dev/null
+++ b/web_src/svg/gitea-whitespace.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path d="m2.5 7.5.35.35a.5.5 0 0 0 0-.7l-.35.35ZM3 4h12V3H3v1Zm4 4h8V7H7v1Zm-4 4h12v-1H3v1ZM.85 9.85l2-2-.7-.7-2 2 .7.7Zm2-2.7-2-2-.7.7 2 2 .7-.7Z"/></svg>
\ No newline at end of file