feat: use the flexbox layout

Author: lc-soft

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

@@ -1,34 +1,37 @@
-
 .c-frame-tab__spinner {
   width: 16px;
   height: 16px;
+  flex: 0 0 auto;
   color: $primary;
   font-size: 16px;
   display: none;
-  margin-top: 2px;
+  margin-top: ($browser-tabbar-line-height - 16px) / 2;
 }
 
 .c-frame-tab__icon {
   width: 16px;
+  flex: 0 0 auto;
   line-height: 16px;
   font-size: 16px;
   margin-top: ($browser-tabbar-line-height - 16px) / 2;
 }
 
 .c-frame-tab__text {
-  margin-left: 8px;
+  flex: 1 1 auto;
+  height: $browser-tabbar-line-height;
+  line-height: $browser-tabbar-line-height;
+  margin: 0 8px 0 8px;
 }
 
 .c-frame-tab__close {
-  top: 10px;
-  right: 8px;
+  flex: 0 0 auto;
   width: 18px;
   height: 18px;
   font-size: 14px;
   line-height: 18px;
   text-align: center;
-  position: absolute;
   border-radius: 8px;
+  margin: 2px 0 0 auto;
 
   &:hover {
     background-color: $navbar-btn-bg-hover;
@@ -59,19 +62,17 @@
 
 .c-frame-tab {
   width: 100%;
-  min-width: 140px;
-  max-width: 15%;
+  min-width: 60px;
+  max-width: 25%;
   position: relative;
   margin-right: -1px;
-  line-height: $browser-tabbar-line-height;
-  padding: 8px 32px 8px 8px;
+  padding: 8px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-  display: inline-block;
 
   &.loading {
     .c-frame-tab__spinner {
-      display: inline-block;
+      display: block;
     }
 
     .c-frame-tab__icon {

src/ui/stylesheets/components/_navbar.scss

@@ -1,9 +1,11 @@
 .c-navbar {
+  display: flex;
   padding: 5px 8px;
   border-bottom: 1px solid $border-color;
 }
 
 .c-navbar__btn {
+  flex: 0 0 auto;
   height: 28px;
   min-width: 28px;
   line-height: 28px;
@@ -33,6 +35,7 @@
   border: 0;
   border-radius: 14px;
   background-color: $navbar-input-bg;
+  flex: 1 1 auto;
 
   &:hover {
     background-color: $navbar-input-bg-hover;

src/ui/stylesheets/views/_browser.scss

@@ -1,8 +1,13 @@
 .v-browser {
-
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 
 .v-browser__tabbar {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-start;
   background-color: $browser-tabbar-bg;
   padding: 8px 8px 0 8px;
 }
@@ -15,6 +20,7 @@
   margin-left: 10px;
   text-align: center;
   margin-top: 4px;
+  flex: 0 0 auto;
 
   &:hover {
     background-color: $browser-btn-add-tab-bg-hover;

src/ui/stylesheets/views/_frame.scss

@@ -1,2 +1,17 @@
 .v-frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+}
+
+.v-frame__navbar {
+  flex: 0 0 auto;
+}
+
+.v-frame__client {
+  flex: 1 1 auto;
+}
+
+.v-frame__content {
+  min-height: 100%;
 }

src/ui/stylesheets/views/_help.scss

@@ -1,5 +1,6 @@
 .v-help {
   background-color: #f8f9fa;
+  min-height: 100%;
 
   .v-help__title {
     margin-top: 24px;

src/ui/views/frame.c

@@ -5,6 +5,7 @@
 #include <LCUI/timer.h>
 #include <LCUI/gui/widget.h>
 #include <LCUI/gui/widget/textedit.h>
+#include <LCUI/gui/widget/scrollbar.h>
 #include "frame.h"
 #include "router.h"
 
@@ -19,6 +20,9 @@ typedef struct FrameViewRec_ {
 	LCUI_Widget btn_home;
 	LCUI_Widget input;
 	LCUI_Widget content;
+	LCUI_Widget client;
+	LCUI_Widget vscrollbar;
+	LCUI_Widget hscrollbar;
 } FrameViewRec, *FrameView;
 
 static size_t frame_id_count = 0;
@@ -105,19 +109,30 @@ static void FrameView_OnInit(LCUI_Widget w)
 	self->btn_refresh = LCUIWidget_New("icon");
 	self->input = LCUIWidget_New("textedit");
 	self->content = LCUIWidget_New("router-view");
+	self->client = LCUIWidget_New(NULL);
+	self->vscrollbar = LCUIWidget_New("scrollbar");
+	//self->hscrollbar = LCUIWidget_New("scrollbar");
+	//ScrollBar_BindTarget(self->hscrollbar, self->content);
+	ScrollBar_BindTarget(self->vscrollbar, self->content);
+	//ScrollBar_SetDirection(self->hscrollbar, SBD_HORIZONTAL);
 	Widget_SetAttribute(w, "router", router_name);
 	Widget_AddClass(w, "v-frame");
-	Widget_AddClass(self->navbar, "c-navbar");
+	Widget_AddClass(self->navbar, "c-navbar v-frame__navbar");
 	Widget_AddClass(self->btn_back, "c-navbar__btn");
 	Widget_AddClass(self->btn_forward, "c-navbar__btn");
 	Widget_AddClass(self->btn_home, "c-navbar__btn");
 	Widget_AddClass(self->btn_refresh, "c-navbar__btn");
 	Widget_AddClass(self->input, "c-navbar__input");
+	Widget_AddClass(self->content, "v-frame__content");
+	Widget_AddClass(self->client, "v-frame__client");
 	Widget_Append(self->navbar, self->btn_back);
 	Widget_Append(self->navbar, self->btn_forward);
 	Widget_Append(self->navbar, self->btn_refresh);
 	Widget_Append(self->navbar, self->btn_home);
 	Widget_Append(self->navbar, self->input);
+	Widget_Append(self->client, self->content);
+	Widget_Append(self->client, self->vscrollbar);
+	//Widget_Append(self->client, self->hscrollbar);
 	Icon_SetName(self->btn_back, "arrow-left");
 	Icon_SetName(self->btn_forward, "arrow-right");
 	Icon_SetName(self->btn_refresh, "refresh");
@@ -129,7 +144,7 @@ static void FrameView_OnInit(LCUI_Widget w)
 	Widget_BindEvent(self->btn_home, "click", FrameView_OnBtnHomeClick,
 			 self, NULL);
 	Widget_Append(w, self->navbar);
-	Widget_Append(w, self->content);
+	Widget_Append(w, self->client);
 	FrameView_OnRouteUpdate(w, router_get_current_route(self->router),
 				NULL);
 }