WIP: Overflow menu

go-gitea · Feb 25, 2024 · c6f082d · c6f082d
1 parent f9207b0
commit c6f082d
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 59 deletions.
diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
@@ -1,5 +1,5 @@
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 			{{svg "octicon-repo"}} {{ctx.Locale.Tr "explore.repos"}}
 		</a>

diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
@@ -7,8 +7,8 @@
 			data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
 			data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
 		>
-			<div class="ui secondary pointing tabular top attached borderless menu new-menu">
-				<div class="new-menu-inner">
+			<div class="ui secondary pointing tabular top attached borderless menu overflow-menu">
+				<div class="overflow-menu-items">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
 					<a class="item" data-tab="diff-swipe-{{.file.Index}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
@@ -126,9 +126,9 @@
 		{{if .IsGenerated}}<div class="fork-flag">{{ctx.Locale.Tr "repo.generated_from"}} <a href="{{(.TemplateRepo ctx).Link}}">{{(.TemplateRepo ctx).FullName}}</a></div>{{end}}
 	</div>
 {{end}}
-	<div class="ui container secondary pointing tabular top attached borderless menu new-menu navbar">
+	<div class="ui container secondary pointing tabular top attached borderless menu overflow-menu navbar">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
-			<div class="new-menu-inner">
+			<div class="overflow-menu-items">
 				{{if .Permission.CanRead $.UnitTypeCode}}
 				<a class="{{if .PageIsViewCode}}active {{end}}item" href="{{.RepoLink}}{{if and (ne .BranchName .Repository.DefaultBranch) (not $.PageIsWiki)}}/src/{{.BranchNameSubURL}}{{end}}">
 					{{svg "octicon-code"}} {{ctx.Locale.Tr "repo.code"}}
@@ -219,7 +219,7 @@
 				{{end}}
 			</div>
 		{{else if .Permission.IsAdmin}}
-			<div class="new-menu-inner">
+			<div class="overflow-menu-items">
 				<a class="{{if .PageIsRepoSettings}}active {{end}} item" href="{{.RepoLink}}/settings">
 					{{svg "octicon-tools"}} {{ctx.Locale.Tr "repo.settings"}}
 				</a>

diff --git a/templates/user/auth/link_account.tmpl b/templates/user/auth/link_account.tmpl
@@ -1,7 +1,7 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content user link-account">
-	<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-		<div class="new-menu-inner">
+	<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+		<div class="overflow-menu-items">
 			<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
 			{{if not .AllowOnlyInternalRegistration}}
 				<a class="item {{if not .user_exists}}active{{end}}"

diff --git a/templates/user/auth/signin_navbar.tmpl b/templates/user/auth/signin_navbar.tmpl
@@ -1,6 +1,6 @@
 {{if or .EnableOpenIDSignIn .EnableSSPI}}
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsLogin}}active {{end}}item" rel="nofollow" href="{{AppSubUrl}}/user/login">
 			{{ctx.Locale.Tr "auth.login_userpass"}}
 		</a>

diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,5 +1,5 @@
-<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
-	<div class="new-menu-inner">
+<div class="ui secondary pointing tabular top attached borderless menu overflow-menu navbar">
+	<div class="overflow-menu-items">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{ctx.Locale.Tr "auth.openid_connect_title"}}
 		</a>

diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -240,7 +240,7 @@ a.label,
 }
 
 .page-content .header-wrapper,
-.page-content .new-menu {
+.page-content .overflow-menu {
   margin-top: -15px !important;
   padding-top: 15px !important;
 }
@@ -1331,59 +1331,21 @@ strong.attention-caution, span.attention-caution {
   }
 }
 
-.ui.menu.new-menu {
+.ui.menu.overflow-menu {
   margin-bottom: 15px;
   background: var(--color-header-wrapper);
   border-bottom: 1px solid var(--color-secondary) !important;
-  overflow: auto;
 }
 
-.ui.menu.new-menu .new-menu-inner {
+.ui.menu.overflow-menu .overflow-menu-items {
   display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  overflow-x: auto;
   width: 100%;
-  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
-  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
 }
 
-.ui.menu.new-menu .item {
+.ui.menu.overflow-menu .overflow-menu-items .item {
   margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
-@media (max-width: 767.98px) {
-  .ui.menu.new-menu .item {
-    width: auto !important;
-  }
-}
-
-.ui.menu.new-menu .item:first-child {
-  margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
-}
-
-.ui.menu.new-menu .item:last-child {
-  padding-right: 30px !important;
-  margin-right: auto;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar {
-  height: 6px;
-  display: none;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar-track {
-  background: none !important;
-}
-
-.ui.menu.new-menu::-webkit-scrollbar-thumb {
-  box-shadow: none !important;
-}
-
-.ui.menu.new-menu:hover::-webkit-scrollbar {
-  display: block;
-}
-
 .repos-search {
   padding-bottom: 0 !important;
 }

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -2778,12 +2778,12 @@ tbody.commit-list {
   border-left: 1px solid var(--color-secondary);
 }
 
-.repository .ui.menu.new-menu {
+.repository .ui.menu.overflow-menu {
   background: none !important;
 }
 
 @media (max-width: 1200px) {
-  .repository .ui.menu.new-menu::after {
+  .repository .ui.menu.overflow-menu::after {
     background: none !important;
   }
 }

diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css
@@ -74,13 +74,13 @@
   background-color: var(--color-header-wrapper);
 }
 
-.repository .header-wrapper .new-menu {
+.repository .header-wrapper .overflow-menu {
   padding-top: 0 !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
-.repository .header-wrapper .new-menu .item {
+.repository .header-wrapper .overflow-menu .item {
   margin-left: 0 !important;
   margin-right: 0 !important;
 }

diff --git a/web_src/js/behaviours/overflow-menu.js b/web_src/js/behaviours/overflow-menu.js
@@ -0,0 +1,40 @@
+import {throttle} from 'throttle-debounce';
+import {isHorizontallyOverflown, createElementFromHTML} from '../utils/dom.js';
+import {svg} from '../svg.js';
+import $ from 'jquery';
+
+const update = throttle(100, (menu) => {
+  const isOverflown = isHorizontallyOverflown(menu);
+  if (isOverflown) {
+    const overflownItems = [];
+    const {right: menuRight} = menu.getBoundingClientRect();
+    for (const item of menu.querySelectorAll('.overflow-menu-items .item')) {
+      const {right: itemRight} = item.getBoundingClientRect();
+      if (itemRight >= menuRight) {
+        overflownItems.push(item.cloneNode(true));
+        item.remove();
+      }
+    }
+    if (overflownItems.length) {
+      menu.querySelector('.overflow-menu')?.remove();
+      menu.append(createElementFromHTML(`
+        <div class="ui dropdown overflow-menu gt-px-2">
+          <div class="text">${svg('octicon-kebab-horizontal')}</div>
+          <div class="menu">${overflownItems.map((item) => item.outerHTML).join('')}</div>
+        </div>
+      `));
+      $(menu).dropdown();
+    }
+  }
+});
+
+export function initOverflowMenu() {
+  for (const el of document.querySelectorAll('.overflow-menu')) {
+    update(el);
+    (new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        update(entry.target);
+      }
+    })).observe(el);
+  }
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
@@ -88,6 +88,7 @@ import {initRepoCodeFrequency} from './features/code-frequency.js';
 import {initRepoRecentCommits} from './features/recent-commits.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
 import {initDirAuto} from './modules/dirauto.js';
+import {initOverflowMenu} from './behaviours/overflow-menu.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -189,4 +190,5 @@ onDomReady(() => {
   initRepoDiffView();
   initPdfViewer();
   initScopedAccessTokenCategories();
+  initOverflowMenu();
 });
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
@@ -243,3 +243,14 @@ export function isElemVisible(element) {
 
   return Boolean(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
+
+export function isHorizontallyOverflown(el) {
+  return (el.scrollWidth ?? 0) - (el.clientWidth ?? 0) > 1;
+}
+
+// create DOM element from HTML string
+export function createElementFromHTML(str) {
+  const div = document.createElement('div');
+  div.innerHTML = str.trim();
+  return div.firstChild;
+}