Updated tabs styles

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).
 
-Также при отображении вкладок используется следующие константы и стили:
+Для отображения панели вкладок используется стиль "ruiTabBar", а 
-
+назначить свой стиль можно с помощью свойства "tab-bar-style" (константа TabBarStyle).
-* "ruiTabHeight" - SizeUnit константа задает высоту панели вкладок;
-
-* "ruiTabSpace" - SizeUnit константа задает расстояние между вкладками;
-
-* "ruiTabsPadding" - SizeUnit или BoundsProperty константа задает отступ от внутри панели вкладок;
-
-* "ruiTabsBackgroundColor" - цвет фона панели закладок;
-
-* "ruiTabCloseButton" - стиль кнопки закрытия вкладки.
-
-Вы можете переопределять данные константы и стили для кастимизации панели вкладок
 
 ## AbsoluteLayout
 

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, 
+For displaying the current (selected) tab of type TopTabs, BottomTabs, LeftListTabs and RightListTabs, 
-the style is "ruiActiveTab", and for tabs of type LeftTabs and RightTabs, the style is "ruiActiveVerticalTab".
+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:
+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).
-* "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
 
 ## AbsoluteLayout
 

defaultTheme.rui

@@ -17,11 +17,11 @@ theme {
 		ruiPopupTitleColor = #FF0000FF,
 		ruiPopupTitleTextColor = #FFFFFFFF,
 
-		ruiTabsBackgroundColor = #FFEEEEEE,
+		ruiTabBarBackgroundColor = #FFEEEEEE,
-		ruiInactiveTabColor = #FFD0D0D0,
+		ruiTabColor = #FFD0D0D0,
-		ruiInactiveTabTextColor = #FF202020,
+		ruiTabTextColor = #FF202020,
-		ruiActiveTabColor = #FFFFFFFF,
+		ruiCurrentTabColor = #FFFFFFFF,
-		ruiActiveTabTextColor = #FF000000,
+		ruiCurrentTabTextColor = #FF000000,
 	},
 	colors:dark = _{
 		ruiTextColor = #FFE0E0E0,
@@ -34,11 +34,11 @@ theme {
 		ruiHighlightColor = #FF1A74E8,
 		ruiHighlightTextColor = #FFFFFFFF,
 
-		ruiTabsBackgroundColor = #FF303030,
+		ruiTabBarBackgroundColor = #FF303030,
-		ruiInactiveTabColor = #FF606060,
+		ruiTabColor = #FF606060,
-		ruiInactiveTabTextColor = #FFE0E0E0,
+		ruiTabTextColor = #FFE0E0E0,
-		ruiActiveTabColor = #FF000000,
+		ruiCurrentTabColor = #FF000000,
-		ruiActiveTabTextColor = #FFFFFFFF,
+		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 {
+		ruiTabBar {
-			background-color = @ruiActiveTabColor,
+			background-color = @ruiTabBarBackgroundColor,
-			text-color = @ruiActiveTabTextColor,
+		}
+		ruiCurrentTab {
+			min-height = @ruiTabHeight,
+			background-color = @ruiCurrentTabColor,
+			text-color = @ruiCurrentTabTextColor,
 			padding-left = 4px,
 			padding-right = 4px,
+			margin = @ruiTabMargin,
 			radius = @ruiTabRadius,
 		},
-		ruiInactiveTab {
+		ruiTab {
-			background-color = @ruiInactiveTabColor,
+			min-height = @ruiTabHeight,
-			text-color = @ruiInactiveTabTextColor,
+			background-color = @ruiTabColor,
+			text-color = @ruiTabTextColor,
 			padding-left = 4px,
 			padding-right = 4px,
+			margin = @ruiTabMargin,
 			radius = @ruiTabRadius,
 		},
-		ruiActiveVerticalTab {
+		ruiCurrentVerticalTab {
-			background-color = @ruiActiveTabColor,
+			min-width = @ruiTabHeight,
-			text-color = @ruiActiveTabTextColor,
+			background-color = @ruiCurrentTabColor,
+			text-color = @ruiCurrentTabTextColor,
 			padding-top = 4px,
 			padding-bottom = 4px,
+			margin = @ruiTabMargin,
 			radius = @ruiTabRadius,
 		},
-		ruiInactiveVerticalTab {
+		ruiVerticalTab {
-			background-color = @ruiInactiveTabColor,
+			min-width = @ruiTabHeight,
-			text-color = @ruiInactiveTabTextColor,
+			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 {

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.

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")
+		buffer.WriteString(`<div class="`)
-		rowLayout := false
+		buffer.WriteString(tabsLayout.tabBarStyle())
-		buffer.WriteString(`<div style="display: flex;`)
+		buffer.WriteString(`" style="display: flex;`)
 
 		switch location {
 		case LeftTabs, LeftListTabs, TopTabs:
@@ -708,40 +735,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
 
 		default:
 			buffer.WriteString(`row nowrap; justify-content: flex-start; align-items: stretch;`)
-			if tabsHeight.Type != Auto {
-				buffer.WriteString(` height: `)
-				buffer.WriteString(tabsHeight.cssString(""))
-				buffer.WriteByte(';')
-			}
-			rowLayout = true
-		}
-
-		switch location {
-		case LeftTabs, RightTabs:
-			if tabsHeight.Type != Auto {
-				buffer.WriteString(` width: `)
-				buffer.WriteString(tabsHeight.cssString(""))
-				buffer.WriteByte(';')
-			}
-		}
-
-		var tabsPadding Bounds
-		if value, ok := tabsLayout.session.Constant("ruiTabsPadding"); ok {
-			if tabsPadding.parse(value, tabsLayout.session) {
-				if !tabsPadding.allFieldsAuto() {
-					buffer.WriteByte(' ')
-					buffer.WriteString(Padding)
-					buffer.WriteString(`: `)
-					tabsPadding.writeCSSString(buffer, "0")
-					buffer.WriteByte(';')
-				}
-			}
-		}
-
-		if tabsBackground, ok := tabsLayout.session.Color("ruiTabsBackgroundColor"); ok {
-			buffer.WriteString(` background-color: `)
-			buffer.WriteString(tabsBackground.cssString())
-			buffer.WriteByte(';')
 		}
 
 		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 = `<div style="writing-mode: vertical-lr; transform: rotate(180deg); grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2;">`
@@ -791,7 +768,6 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
 			titleDiv = `<div style="grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 3;">`
 		}
 
-		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="`)