From 40676ee56c32b1cd4b1f7ea00ed0504742e2748e Mon Sep 17 00:00:00 2001 From: xiange Date: Sun, 17 Mar 2024 20:17:10 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20optimize=20ribbon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chili-ui/src/ribbon/ribbon.module.css | 96 ++++++++++--------- packages/chili-ui/src/ribbon/ribbon.ts | 47 ++++----- public/iconfont.js | 2 +- 3 files changed, 78 insertions(+), 67 deletions(-) diff --git a/packages/chili-ui/src/ribbon/ribbon.module.css b/packages/chili-ui/src/ribbon/ribbon.module.css index 234daaef..9fb3786b 100644 --- a/packages/chili-ui/src/ribbon/ribbon.module.css +++ b/packages/chili-ui/src/ribbon/ribbon.module.css @@ -4,11 +4,17 @@ width: 100%; } +.split { + width: 1px; + height: 14px; + margin: 0px 8px; + background-color: rgba(128, 128, 128, 0.45); +} + .titleBar { display: flex; flex-direction: row; align-items: center; - overflow: hidden; margin: 2px 4px; .left { @@ -43,44 +49,15 @@ text-wrap: nowrap; } } - - & .quickCommands { - display: flex; - flex-direction: row; - margin-left: 6px; - - svg { - width: 16px; - height: 16px; - padding: 6px; - border-radius: 4px; - margin: 0px 4px; - - &:hover { - background-color: rgba(128, 128, 128, 0.25); - } - } - } } .center { display: flex; flex-direction: row; align-items: center; - margin-left: 16px; - flex: 1 1 auto; - - .new { - width: 18px; - height: 18px; - margin-left: 2px; - padding: 6px; - border-radius: 6px; - - &:hover { - background-color: rgba(128, 128, 128, 0.25); - } - } + margin: auto; + flex: 0 1 auto; + overflow: auto; .views { display: flex; @@ -88,6 +65,7 @@ align-items: center; border-radius: 8px; padding: 2px 0px; + overflow: hidden; .tab { display: flex; @@ -114,6 +92,8 @@ margin-left: 8px; text-wrap: nowrap; user-select: none; + text-decoration: dashed; + overflow: hidden; .split { padding: 0px 4px; @@ -141,6 +121,18 @@ background-color: var(--panel-background-color); } } + + .new { + width: 16px; + height: 16px; + margin-left: 2px; + padding: 6px; + border-radius: 6px; + + &:hover { + background-color: rgba(128, 128, 128, 0.25); + } + } } .right { @@ -166,24 +158,42 @@ .ribbonTitlePanel { display: flex; flex-direction: row; - align-items: first baseline; - flex: auto; - font-size: 13px; - margin: 2px 4px; + align-items: center; + margin: 0px 4px; + flex: 0 0 auto; - .startup { - padding: 4px 12px; + .home { + width: 14px; + height: 14px; + padding: 6px; + border-radius: 4px; + margin: 0px 4px; &:hover { - font-weight: bold; - color: white; - background-color: var(--primary-color); + background-color: rgba(128, 128, 128, 0.25); + } + } + + & .quickCommands { + display: flex; + flex-direction: row; + + svg { + width: 14px; + height: 14px; + padding: 6px; + border-radius: 4px; + margin: 0px 6px; + + &:hover { + background-color: rgba(128, 128, 128, 0.25); + } } } .tabHeader { color: var(--titlebar-forground-color); - padding: 4px 12px; + padding: 5px 15px; &:hover { font-weight: bold; diff --git a/packages/chili-ui/src/ribbon/ribbon.ts b/packages/chili-ui/src/ribbon/ribbon.ts index d35f0d36..35c604de 100644 --- a/packages/chili-ui/src/ribbon/ribbon.ts +++ b/packages/chili-ui/src/ribbon/ribbon.ts @@ -125,11 +125,35 @@ export class Ribbon extends HTMLElement { }), span({ textContent: "Chili3D 2024 - dev" }), ), + ), + div( + { className: style.ribbonTitlePanel }, + svg({ + className: style.home, + icon: "icon-home", + onclick: () => PubSub.default.pub("displayHome", true), + }), items({ className: style.quickCommands, sources: dataContent.quickCommands, template: (command: CommandKeys) => QuickButton(command as any), }), + span({ className: style.split }), + items({ + sources: dataContent.ribbonTabs, + template: (tab: RibbonTabData) => { + const converter = new ActivedRibbonTabConverter( + tab, + style.tabHeader, + style.activedTab, + ); + return label({ + className: new Binding(dataContent, "activeTab", converter), + textContent: localize(tab.tabName), + onclick: () => (dataContent.activeTab = tab), + }); + }, + }), ), div( { @@ -194,29 +218,6 @@ export class Ribbon extends HTMLElement { ), ), ), - div( - { className: style.ribbonTitlePanel }, - label({ - textContent: localize("ribbon.tab.file"), - className: style.startup, - onclick: () => PubSub.default.pub("displayHome", true), - }), - items({ - sources: dataContent.ribbonTabs, - template: (tab: RibbonTabData) => { - const converter = new ActivedRibbonTabConverter( - tab, - style.tabHeader, - style.activedTab, - ); - return label({ - className: new Binding(dataContent, "activeTab", converter), - textContent: localize(tab.tabName), - onclick: () => (dataContent.activeTab = tab), - }); - }, - }), - ), items({ className: style.tabContentPanel, sources: dataContent.ribbonTabs, diff --git a/public/iconfont.js b/public/iconfont.js index bcc3496d..5ed27d01 100644 --- a/public/iconfont.js +++ b/public/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_3585225='',function(v){var h=(h=document.getElementsByTagName("script"))[h.length-1],l=h.getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var a,z,t,i,m,o=function(h,l){l.parentNode.insertBefore(h,l)};if(l&&!v.__iconfont__svg__cssinject__){v.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(h){console&&console.log(h)}}a=function(){var h,l=document.createElement("div");l.innerHTML=v._iconfont_svg_string_3585225,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(h=document.body).firstChild?o(l,h.firstChild):h.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),a()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(t=a,i=v.document,m=!1,p(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,c())})}function c(){m||(m=!0,t())}function p(){try{i.documentElement.doScroll("left")}catch(h){return void setTimeout(p,50)}c()}}(window); \ No newline at end of file +window._iconfont_svg_string_3585225='',function(v){var h=(h=document.getElementsByTagName("script"))[h.length-1],l=h.getAttribute("data-injectcss"),h=h.getAttribute("data-disable-injectsvg");if(!h){var a,z,t,i,m,o=function(h,l){l.parentNode.insertBefore(h,l)};if(l&&!v.__iconfont__svg__cssinject__){v.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(h){console&&console.log(h)}}a=function(){var h,l=document.createElement("div");l.innerHTML=v._iconfont_svg_string_3585225,(l=l.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",l=l,(h=document.body).firstChild?o(l,h.firstChild):h.appendChild(l))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(z=function(){document.removeEventListener("DOMContentLoaded",z,!1),a()},document.addEventListener("DOMContentLoaded",z,!1)):document.attachEvent&&(t=a,i=v.document,m=!1,p(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,c())})}function c(){m||(m=!0,t())}function p(){try{i.documentElement.doScroll("left")}catch(h){return void setTimeout(p,50)}c()}}(window); \ No newline at end of file