mbk-lab
/
rui_orig
mirror of https://github.com/anoshenko/rui.git
2
0
Fork 1
Code Issues Projects Releases Wiki Activity

Updated TabsLayout

This commit is contained in:
anoshenko 2021-11-21 18:16:22 +03:00
parent 3e93ea4bb9
commit 8a2fd03fac
3 changed files with 54 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app_scripts.js
View File

@ -303,18 +303,25 @@ function tabClickEvent(layoutId, tabNumber, event) {
sendMessage("tabClick{session=" + sessionID + ",id=" + layoutId + ",number=" + tabNumber + "}"); sendMessage("tabClick{session=" + sessionID + ",id=" + layoutId + ",number=" + tabNumber + "}");
} }
function tabKeyClickEvent(layoutId, tabNumber, event) {
if (enterOrSpaceKeyClickEvent(event)) {
tabClickEvent(layoutId, tabNumber, event)
}
}
function tabCloseClickEvent(layoutId, tabNumber, event) { function tabCloseClickEvent(layoutId, tabNumber, event) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
sendMessage("tabCloseClick{session=" + sessionID + ",id=" + layoutId + ",number=" + tabNumber + "}"); sendMessage("tabCloseClick{session=" + sessionID + ",id=" + layoutId + ",number=" + tabNumber + "}");
} }
function tabKeyClickEvent(layoutId, tabNumber, event) { function tabCloseKeyClickEvent(layoutId, tabNumber, event) {
if (enterOrSpaceKeyClickEvent(event)) { if (enterOrSpaceKeyClickEvent(event)) {
tabClickEvent(layoutId, tabNumber, event) tabCloseClickEvent(layoutId, tabNumber, event)
} }
} }
function keyEvent(element, event, tag) { function keyEvent(element, event, tag) {
event.stopPropagation(); event.stopPropagation();

39
defaultTheme.rui
View File

@ -126,37 +126,73 @@ theme {
background-color = @ruiCurrentTabColor, background-color = @ruiCurrentTabColor,
text-color = @ruiCurrentTabTextColor, text-color = @ruiCurrentTabTextColor,
padding-left = 4px, padding-left = 4px,
padding-top = 2px,
padding-right = 4px, padding-right = 4px,
padding-bottom = 2px,
margin = @ruiTabMargin, margin = @ruiTabMargin,
radius = @ruiTabRadius, radius = @ruiTabRadius,
}, },
ruiCurrentTab:focus {
padding-left = 2px,
padding-top = 0px,
padding-right = 2px,
padding-bottom = 0px,
border = _{style = solid, color = @ruiHighlightColor, width = 2px },
},
ruiTab { ruiTab {
min-height = @ruiTabHeight, min-height = @ruiTabHeight,
background-color = @ruiTabColor, background-color = @ruiTabColor,
text-color = @ruiTabTextColor, text-color = @ruiTabTextColor,
padding-left = 4px, padding-left = 4px,
padding-top = 2px,
padding-right = 4px, padding-right = 4px,
padding-bottom = 2px,
margin = @ruiTabMargin, margin = @ruiTabMargin,
radius = @ruiTabRadius, radius = @ruiTabRadius,
}, },
ruiTab:focus {
padding-left = 2px,
padding-top = 0px,
padding-right = 2px,
padding-bottom = 0px,
border = _{style = solid, color = @ruiHighlightColor, width = 2px },
},
ruiCurrentVerticalTab { ruiCurrentVerticalTab {
min-width = @ruiTabHeight, min-width = @ruiTabHeight,
background-color = @ruiCurrentTabColor, background-color = @ruiCurrentTabColor,
text-color = @ruiCurrentTabTextColor, text-color = @ruiCurrentTabTextColor,
padding-left = 2px,
padding-top = 4px, padding-top = 4px,
padding-right = 2px,
padding-bottom = 4px, padding-bottom = 4px,
margin = @ruiTabMargin, margin = @ruiTabMargin,
radius = @ruiTabRadius, radius = @ruiTabRadius,
}, },
ruiCurrentVerticalTab:focus {
padding-left = 0px,
padding-top = 2px,
padding-right = 0px,
padding-bottom = 2px,
border = _{style = solid, color = @ruiHighlightColor, width = 2px },
},
ruiVerticalTab { ruiVerticalTab {
min-width = @ruiTabHeight, min-width = @ruiTabHeight,
background-color = @ruiTabColor, background-color = @ruiTabColor,
text-color = @ruiTabTextColor, text-color = @ruiTabTextColor,
padding-left = 2px,
padding-top = 4px, padding-top = 4px,
padding-right = 2px,
padding-bottom = 4px, padding-bottom = 4px,
margin = @ruiTabMargin, margin = @ruiTabMargin,
radius = @ruiTabRadius, radius = @ruiTabRadius,
}, },
ruiVerticalTab:focus {
padding-left = 0px,
padding-top = 2px,
padding-right = 0px,
padding-bottom = 2px,
border = _{style = solid, color = @ruiHighlightColor, width = 2px },
},
ruiTabCloseButton { ruiTabCloseButton {
width = 16px, width = 16px,
height = 16px, height = 16px,
@ -169,6 +205,9 @@ theme {
background-color = @ruiTabBarBackgroundColor, background-color = @ruiTabBarBackgroundColor,
radius = 3px, radius = 3px,
}, },
ruiTabCloseButton:focus {
outline = _{style = solid, color = @ruiHighlightColor, width = 2px },
},
ruiPopup { ruiPopup {
background-color = @ruiPopupBackgroundColor, background-color = @ruiPopupBackgroundColor,
text-color = @ruiPopupTextColor, text-color = @ruiPopupTextColor,

8
tabsLayout.go
View File

@ -789,7 +789,7 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
buffer.WriteString(tabsLayoutID) buffer.WriteString(tabsLayoutID)
buffer.WriteString(`\', `) buffer.WriteString(`\', `)
buffer.WriteString(strconv.Itoa(n)) buffer.WriteString(strconv.Itoa(n))
buffer.WriteString(`, event)" onclick="tabKeyClickEvent(\'`) buffer.WriteString(`, event)" onkeydown="tabKeyClickEvent(\'`)
buffer.WriteString(tabsLayoutID) buffer.WriteString(tabsLayoutID)
buffer.WriteString(`\', `) buffer.WriteString(`\', `)
buffer.WriteString(strconv.Itoa(n)) buffer.WriteString(strconv.Itoa(n))
@ -827,7 +827,11 @@ func (tabsLayout *tabsLayoutData) htmlSubviews(self View, buffer *strings.Builde
close = closeButton close = closeButton
} }
if close { if close {
buffer.WriteString(`<div class="ruiTabCloseButton" onclick="tabCloseClickEvent(\'`) buffer.WriteString(`<div class="ruiTabCloseButton" tabindex="0" onclick="tabCloseClickEvent(\'`)
buffer.WriteString(tabsLayoutID)
buffer.WriteString(`\', `)
buffer.WriteString(strconv.Itoa(n))
buffer.WriteString(`, event)" onkeydown="tabCloseKeyClickEvent(\'`)
buffer.WriteString(tabsLayoutID) buffer.WriteString(tabsLayoutID)
buffer.WriteString(`\', `) buffer.WriteString(`\', `)
buffer.WriteString(strconv.Itoa(n)) buffer.WriteString(strconv.Itoa(n))