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