From 3e93ea4bb9249f34561007ee5fcb40d174f1d5f0 Mon Sep 17 00:00:00 2001 From: anoshenko Date: Sun, 21 Nov 2021 17:53:52 +0300 Subject: [PATCH] Updated tabs styles --- README-ru.md | 19 ++------- README.md | 21 +++------- defaultTheme.rui | 61 ++++++++++++++++------------ propertyNames.go | 6 --- tabsLayout.go | 101 +++++++++++++++++------------------------------ 5 files changed, 81 insertions(+), 127 deletions(-) diff --git a/README-ru.md b/README-ru.md index 17cfc1c..3abf73b 100644 --- a/README-ru.md +++ b/README-ru.md @@ -2488,26 +2488,15 @@ Cвойства "tab-close-button" может быть задано как дл Что позволяет легко реализовать вкладки с помощью ListView. Именно в этом случаи и применяется значение HiddenTabs. При отображении текущей (выбранной) вкладки типа TopTabs, BottomTabs, LeftListTabs и RightListTabs используется -стиль "ruiActiveTab", а для вкладки типа LeftTabs и RightTabs используется стиль "ruiActiveVerticalTab". +стиль "ruiCurrentTab", а для вкладки типа LeftTabs и RightTabs используется стиль "ruiCurrentVerticalTab". Если вы хотите кастомизировать отображение вкладок, то вы можите либо переопределить данные стили, либо назначить свой стиль с помощью свойства "current-tab-style" (константа CurrentTabStyle). -Соответственно, для неактивной вкладки используются стили "ruiInactiveTab" и "ruiInactiveVerticalTab", а +Соответственно, для неактивной вкладки используются стили "ruiTab" и "ruiVerticalTab", а назначить свой стиль можно с помощью свойства "tab-style" (константа TabStyle). -Также при отображении вкладок используется следующие константы и стили: - -* "ruiTabHeight" - SizeUnit константа задает высоту панели вкладок; - -* "ruiTabSpace" - SizeUnit константа задает расстояние между вкладками; - -* "ruiTabsPadding" - SizeUnit или BoundsProperty константа задает отступ от внутри панели вкладок; - -* "ruiTabsBackgroundColor" - цвет фона панели закладок; - -* "ruiTabCloseButton" - стиль кнопки закрытия вкладки. - -Вы можете переопределять данные константы и стили для кастимизации панели вкладок +Для отображения панели вкладок используется стиль "ruiTabBar", а +назначить свой стиль можно с помощью свойства "tab-bar-style" (константа TabBarStyle). ## AbsoluteLayout diff --git a/README.md b/README.md index 3da9303..9ee43b5 100644 --- a/README.md +++ b/README.md @@ -2455,27 +2455,16 @@ the "tabs" integer property (the Tabs constant). This property can take on the f Why do I need the value HiddenTabs. The point is that TabsLayout implements the ListAdapter interface. Which makes it easy to implement tabs with a ListView. This is where the HiddenTabs value comes in. -When displaying the current (selected) tabs of type TopTabs, BottomTabs, LeftListTabs and RightListTabs, -the style is "ruiActiveTab", and for tabs of type LeftTabs and RightTabs, the style is "ruiActiveVerticalTab". +For displaying the current (selected) tab of type TopTabs, BottomTabs, LeftListTabs and RightListTabs, +the "ruiCurrentTab" style is used, and for tab of type LeftTabs and RightTabs, the "ruiCurrentVerticalTab" style is used. If you want to customize the display of tabs, you can either override these styles, or assign your own style using the "current-tab-style" property (constant CurrentTabStyle). -Accordingly, for an inactive tab, the "ruiInactiveTab" and "ruiInactiveVerticalTab" styles are used, +Accordingly, for an inactive tab, the "ruiTab" and "ruiVerticalTab" styles are used, and you can assign your own style using the "tab-style" property (constant TabStyle). -Also, when displaying tabs, the following constants and styles are used: - -* "ruiTabHeight" - the SizeUnit constant sets the height of the tab bar; - -* "ruiTabSpace" - the SizeUnit constant sets the distance between tabs; - -* "ruiTabsPadding" - the SizeUnit or BoundsProperty constant sets the indentation from the inside of the tab bar; - -* "ruiTabsBackgroundColor" - background color of the tabs bar; - -* "ruiTabCloseButton" - style of the button for closing the tab. - -You can override these constants and styles to customize the tab bar +The "ruiTabBar" style is used to display the tab bar, and you can assign your own style +using the "tab-bar-style" property (constant TabBarStyle). ## AbsoluteLayout diff --git a/defaultTheme.rui b/defaultTheme.rui index a790841..2f3acfb 100644 --- a/defaultTheme.rui +++ b/defaultTheme.rui @@ -17,11 +17,11 @@ theme { ruiPopupTitleColor = #FF0000FF, ruiPopupTitleTextColor = #FFFFFFFF, - ruiTabsBackgroundColor = #FFEEEEEE, - ruiInactiveTabColor = #FFD0D0D0, - ruiInactiveTabTextColor = #FF202020, - ruiActiveTabColor = #FFFFFFFF, - ruiActiveTabTextColor = #FF000000, + ruiTabBarBackgroundColor = #FFEEEEEE, + ruiTabColor = #FFD0D0D0, + ruiTabTextColor = #FF202020, + ruiCurrentTabColor = #FFFFFFFF, + ruiCurrentTabTextColor = #FF000000, }, colors:dark = _{ ruiTextColor = #FFE0E0E0, @@ -34,11 +34,11 @@ theme { ruiHighlightColor = #FF1A74E8, ruiHighlightTextColor = #FFFFFFFF, - ruiTabsBackgroundColor = #FF303030, - ruiInactiveTabColor = #FF606060, - ruiInactiveTabTextColor = #FFE0E0E0, - ruiActiveTabColor = #FF000000, - ruiActiveTabTextColor = #FFFFFFFF, + ruiTabBarBackgroundColor = #FF303030, + ruiTabColor = #FF606060, + ruiTabTextColor = #FFE0E0E0, + ruiCurrentTabColor = #FF000000, + ruiCurrentTabTextColor = #FFFFFFFF, }, constants = _{ ruiButtonHorizontalPadding = 16px, @@ -53,9 +53,9 @@ theme { ruiPopupTitleHeight = 32px, ruiPopupTitlePadding = 8px, ruiPopupButtonGap = 4px, - ruiTabSpace = 2px, + ruiTabMargin = 1px, ruiTabHeight = 32px, - ruiTabsPadding = 2px, + ruiTabBarPadding = 2px, ruiTabRadius = 2px, }, constants:touch = _{ @@ -118,32 +118,43 @@ theme { background-color=@ruiHighlightColor, text-color=@ruiHighlightTextColor, }, - ruiActiveTab { - background-color = @ruiActiveTabColor, - text-color = @ruiActiveTabTextColor, + ruiTabBar { + background-color = @ruiTabBarBackgroundColor, + } + ruiCurrentTab { + min-height = @ruiTabHeight, + background-color = @ruiCurrentTabColor, + text-color = @ruiCurrentTabTextColor, padding-left = 4px, padding-right = 4px, + margin = @ruiTabMargin, radius = @ruiTabRadius, }, - ruiInactiveTab { - background-color = @ruiInactiveTabColor, - text-color = @ruiInactiveTabTextColor, + ruiTab { + min-height = @ruiTabHeight, + background-color = @ruiTabColor, + text-color = @ruiTabTextColor, padding-left = 4px, padding-right = 4px, + margin = @ruiTabMargin, radius = @ruiTabRadius, }, - ruiActiveVerticalTab { - background-color = @ruiActiveTabColor, - text-color = @ruiActiveTabTextColor, + ruiCurrentVerticalTab { + min-width = @ruiTabHeight, + background-color = @ruiCurrentTabColor, + text-color = @ruiCurrentTabTextColor, padding-top = 4px, padding-bottom = 4px, + margin = @ruiTabMargin, radius = @ruiTabRadius, }, - ruiInactiveVerticalTab { - background-color = @ruiInactiveTabColor, - text-color = @ruiInactiveTabTextColor, + ruiVerticalTab { + min-width = @ruiTabHeight, + background-color = @ruiTabColor, + text-color = @ruiTabTextColor, padding-top = 4px, padding-bottom = 4px, + margin = @ruiTabMargin, radius = @ruiTabRadius, }, ruiTabCloseButton { @@ -155,7 +166,7 @@ theme { text-size = 16px, }, ruiTabCloseButton:hover { - background-color = @ruiTabsBackgroundColor, + background-color = @ruiTabBarBackgroundColor, radius = 3px, }, ruiPopup { diff --git a/propertyNames.go b/propertyNames.go index e4891ad..7e97a88 100644 --- a/propertyNames.go +++ b/propertyNames.go @@ -395,12 +395,6 @@ const ( Anchor = "anchor" // Gap is the constant for the "gap" property tag. Gap = "gap" - // Tabs is the constant for the "tabs" property tag. - Tabs = "tabs" - // TabStyle is the constant for the "tab-style" property tag. - TabStyle = "tab-style" - // CurrentTabStyle is the constant for the "current-tab-style" property tag. - CurrentTabStyle = "current-tab-style" // Text is the constant for the "text" property tag. Text = "text" // VerticalAlign is the constant for the "vertical-align" property tag. diff --git a/tabsLayout.go b/tabsLayout.go index af8ab94..479aaf2 100644 --- a/tabsLayout.go +++ b/tabsLayout.go @@ -27,6 +27,26 @@ const ( // The main listener format: func(TabsLayout, int), where the second argument is the index of the tab. TabCloseEvent = "tab-close-event" + // Tabs is the constant for the "tabs" property tag. + // The "tabs" is the int property that sets where the tabs are located. + // Valid values: TopTabs (0), BottomTabs (1), LeftTabs (2), RightTabs (3), LeftListTabs (4), RightListTabs (5), and HiddenTabs (6). + Tabs = "tabs" + + // TabBarStyle is the constant for the "tab-bar-style" property tag. + // The "tab-bar-style" is the string property that sets the style for the display of the tab bar. + // The default value is "ruiTabBar". + TabBarStyle = "tab-bar-style" + + // TabStyle is the constant for the "tab-style" property tag. + // The "tab-style" is the string property that sets the style for the display of the tab. + // The default value is "ruiTab" or "ruiVerticalTab". + TabStyle = "tab-style" + + // CurrentTabStyle is the constant for the "current-tab-style" property tag. + // The "current-tab-style" is the string property that sets the style for the display of the current (selected) tab. + // The default value is "ruiCurrentTab" or "ruiCurrentVerticalTab". + CurrentTabStyle = "current-tab-style" + // TopTabs - tabs of TabsLayout are on the top TopTabs = 0 // BottomTabs - tabs of TabsLayout are on the bottom @@ -463,15 +483,22 @@ func (tabsLayout *tabsLayoutData) tabsLocation() int { return tabs } +func (tabsLayout *tabsLayoutData) tabBarStyle() string { + if style, ok := stringProperty(tabsLayout, TabBarStyle, tabsLayout.session); ok { + return style + } + return "ruiTabBar" +} + func (tabsLayout *tabsLayoutData) inactiveTabStyle() string { if style, ok := stringProperty(tabsLayout, TabStyle, tabsLayout.session); ok { return style } switch tabsLayout.tabsLocation() { case LeftTabs, RightTabs: - return "ruiInactiveVerticalTab" + return "ruiVerticalTab" } - return "ruiInactiveTab" + return "ruiTab" } func (tabsLayout *tabsLayoutData) activeTabStyle() string { @@ -480,9 +507,9 @@ func (tabsLayout *tabsLayoutData) activeTabStyle() string { } switch tabsLayout.tabsLocation() { case LeftTabs, RightTabs: - return "ruiActiveVerticalTab" + return "ruiCurrentVerticalTab" } - return "ruiActiveTab" + return "ruiCurrentTab" } func (tabsLayout *tabsLayoutData) ListSize() int { @@ -685,10 +712,10 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde tabsLayoutID := tabsLayout.htmlID() if location != HiddenTabs { - tabsHeight, _ := sizeConstant(tabsLayout.session, "ruiTabHeight") - tabsSpace, _ := sizeConstant(tabsLayout.session, "ruiTabSpace") - rowLayout := false - buffer.WriteString(`
`) @@ -752,34 +745,18 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde notTranslate := GetNotTranslate(tabsLayout, "") closeButton, _ := boolProperty(tabsLayout, TabCloseButton, tabsLayout.session) - tabMargin := "" - if tabsSpace.Type != Auto && tabsSpace.Value > 0 { - if rowLayout { - tabMargin = ` margin-right: ` + tabsSpace.cssString("") + ";" - } else { - tabMargin = ` margin-bottom: ` + tabsSpace.cssString("") + ";" - } - } - var tabStyle, titleDiv string switch location { case LeftTabs, RightTabs: tabStyle = `display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; grid-row-gap: 8px;` case LeftListTabs, RightListTabs: - tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: start; justify-items: center; grid-column-gap: 8px;` + tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; grid-column-gap: 8px;` default: tabStyle = `display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; grid-column-gap: 8px;` } - switch location { - case LeftListTabs, RightListTabs: - if tabsHeight.Type != Auto { - tabStyle += ` height: ` + tabsHeight.cssString("") + ";" - } - } - switch location { case LeftTabs: titleDiv = `
` @@ -791,7 +768,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde titleDiv = `
` } - last := len(tabsLayout.views) - 1 for n, view := range tabsLayout.views { icon, _ := stringProperty(view, Icon, tabsLayout.session) title, _ := stringProperty(view, Title, tabsLayout.session) @@ -819,11 +795,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde buffer.WriteString(strconv.Itoa(n)) buffer.WriteString(`, event)" style="`) buffer.WriteString(tabStyle) - - if n != last { - buffer.WriteString(tabMargin) - } - buffer.WriteString(`" data-container="`) buffer.WriteString(tabsLayoutID) buffer.WriteString(`" data-view="`)