feat: add tab divider

Author: lc-soft

src/ui/components/frame-tab.c

@@ -9,6 +9,8 @@ typedef struct FrameTabRec_ {
 	LCUI_Widget spinner;
 	LCUI_Widget text;
 	LCUI_Widget close;
+	LCUI_Widget left_divider;
+	LCUI_Widget right_divider;
 } FrameTabRec, *FrameTab;
 
 static LCUI_WidgetPrototype frame_tab_proto;
@@ -30,16 +32,22 @@ static void FrameTab_OnInit(LCUI_Widget w)
 	self->spinner = LCUIWidget_New("spinner");
 	self->text = LCUIWidget_New("textview");
 	self->close = LCUIWidget_New("icon");
+	self->left_divider = LCUIWidget_New(NULL);
+	self->right_divider = LCUIWidget_New(NULL);
 	Icon_SetName(self->icon, "earth");
 	Icon_SetName(self->close, "close");
 	Widget_AddClass(self->icon, "c-frame-tab__icon");
 	Widget_AddClass(self->spinner, "c-frame-tab__spinner");
 	Widget_AddClass(self->text, "c-frame-tab__text");
 	Widget_AddClass(self->close, "c-frame-tab__close");
+	Widget_AddClass(self->left_divider, "c-frame-tab__left-divider");
+	Widget_AddClass(self->right_divider, "c-frame-tab__right-divider");
 	Widget_Append(w, self->icon);
 	Widget_Append(w, self->spinner);
 	Widget_Append(w, self->text);
 	Widget_Append(w, self->close);
+	Widget_Append(w, self->left_divider);
+	Widget_Append(w, self->right_divider);
 	Widget_AddClass(w, "c-frame-tab");
 	Widget_BindEvent(self->close, "click", FrameTab_OnClose, w, NULL);
 }

src/ui/stylesheets/_variables.scss

@@ -78,6 +78,13 @@ $secondary-text-color: #5f6368;
 $green: #28a745;
 
 $browser-tabbar-bg: $gray-300;
+$browser-btn-add-tab-bg-hover: $gray-400;
+$browser-btn-add-tab-bg-active: $gray-500;
+$browser-tabbar-line-height: 20px;
+
+$frame-tab-bg-hover: $gray-200;
+$frame-tab-divier-color: $gray-600;
+
 $navbar-btn-bg-hover: $gray-300;
 $navbar-btn-bg-active: $gray-400;
 $border-color: $gray-200;

src/ui/stylesheets/components/_frame-tab.scss

@@ -38,11 +38,31 @@
   }
 }
 
+.c-frame-tab__left-divider,
+.c-frame-tab__right-divider {
+  top: 8px;
+  width: 1px;
+  height: $browser-tabbar-line-height;
+  position: absolute;
+  background-color: $frame-tab-divier-color;
+}
+
+.c-frame-tab__left-divider {
+  left: 0;
+  display: none;
+}
+
+.c-frame-tab__right-divider {
+  right: 0;
+}
+
 .c-frame-tab {
   width: 100%;
   min-width: 140px;
   max-width: 15%;
-  line-height: 20px;
+  position: relative;
+  margin-right: -1px;
+  line-height: $browser-tabbar-line-height;
   padding: 8px 32px 8px 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
@@ -58,8 +78,30 @@
     }
   }
 
+  &:first-child {
+    .c-frame-tab__left-divider {
+      display: none;
+    }
+  }
+
+  &:last-child {
+    .c-frame-tab__left-divider {
+      display: block;
+    }
+  }
+
+  &:hover,
+  &.active {
+    z-index: 1;
+
+    .c-frame-tab__left-divider,
+    .c-frame-tab__right-divider {
+      display: none;
+    }
+  }
+
   &:hover {
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: $frame-tab-bg-hover;
   }
 
   &.active {

src/ui/stylesheets/components/_navbar.scss

@@ -1,10 +1,10 @@
 .c-navbar {
-  padding: 8px 5px;
+  padding: 5px 8px;
   border-bottom: 1px solid $border-color;
 }
 
 .c-navbar__btn {
-  height: 30px;
+  height: 28px;
   min-width: 28px;
   line-height: 28px;
   margin-right: 5px;