Make style buttons resizable

This commit is contained in:
Rokosun 2024-10-19 17:22:53 +05:30
parent 8828398707
commit f7a680587d

View File

@ -14,15 +14,14 @@ const
# GTK CSS for overriding the default icon size of buttons # GTK CSS for overriding the default icon size of buttons
gtkCSS = """ gtkCSS = """
.style-button { .style-button {
-gtk-icon-size: 5.5em; padding: 0.3em 0.3em;
padding: 0.1em 0.4em; border-radius: 14%;
border-radius: 0.75em;
} }
.accent-button { .accent-button {
-gtk-icon-size: 1.65em; -gtk-icon-size: 1.65em;
padding: 0.4em; padding: 0.4em;
border-radius: 1.5em; border-radius: 50%;
} }
#.accent-button.suggested-action { #.accent-button.suggested-action {
@ -36,7 +35,7 @@ const
themeStyles = ["Default", "Nord", "Dracula", "Catppuccin", "Everforest", "Gruvbox"] themeStyles = ["Default", "Nord", "Dracula", "Catppuccin", "Everforest", "Gruvbox"]
accentColors = ["Blue", "Red", "Purple", "Pink", "Teal", "Green", "Yellow", "Orange", "Grey"] accentColors = ["Blue", "Red", "Purple", "Pink", "Teal", "Green", "Yellow", "Orange", "Grey"]
var iconsDirs = @[styleIconsDir] var iconsDirs: seq[string]
for dir in walkDirs(accentIconsDir / "*"): for dir in walkDirs(accentIconsDir / "*"):
iconsDirs.add(dir) iconsDirs.add(dir)
@ -82,7 +81,7 @@ method view(app: AppState): Widget =
Window: Window:
title = "TROMjaro Theme Switcher" title = "TROMjaro Theme Switcher"
# Shrink window to the smallest size # Shrink window to the smallest size
defaultSize = (0, 0) defaultSize = (900, 700)
iconName = appLogo iconName = appLogo
# Vertical box # Vertical box
Box(orient = OrientY, margin = 13, spacing = 10): Box(orient = OrientY, margin = 13, spacing = 10):
@ -96,7 +95,7 @@ method view(app: AppState): Widget =
Box(orient = OrientX, spacing = 5): Box(orient = OrientX, spacing = 5):
for styleName in themeStyles: for styleName in themeStyles:
insert(makeThemeButton(shadeName, styleName)) {.vAlign: AlignCenter, hAlign: AlignCenter.} insert(makeThemeButton(shadeName, styleName)) {.vAlign: AlignCenter, hAlign: AlignCenter.}
Separator(margin = Margin(top: 5)) Separator(margin = Margin(top: 5)) {.vAlign: AlignCenter.}
Label: Label:
useMarkup=true useMarkup=true
text="<span size='large'>ACCENT COLOR</span>" text="<span size='large'>ACCENT COLOR</span>"
@ -104,7 +103,7 @@ method view(app: AppState): Widget =
Box(orient = OrientX, spacing = 3): Box(orient = OrientX, spacing = 3):
for accentColor in accentColors: for accentColor in accentColors:
insert(makeAccentButton(accentColor)) {.vAlign: AlignCenter, hAlign: AlignCenter.} insert(makeAccentButton(accentColor)) {.vAlign: AlignCenter, hAlign: AlignCenter.}
Separator(margin = Margin(top: 12)) Separator(margin = Margin(top: 12)) {.vAlign: AlignCenter.}
# Vertical box # Vertical box
Box(orient = OrientY): Box(orient = OrientY):
Label: Label:
@ -181,7 +180,8 @@ proc makeThemeButton(shadeName: string, styleName: string): Widget =
result = gui: result = gui:
Button: Button:
icon = fmt"Colloid{shade}{style}" Picture:
pixbuf = loadPixbuf(fmt"{styleIconsDir}/Colloid{shade}{style}.svg")
tooltip = if shadeName == "": styleName else: fmt"{shadeName}-{styleName}" tooltip = if shadeName == "": styleName else: fmt"{shadeName}-{styleName}"
style = if (shadeName, styleName) == (currentTheme.shade, currentTheme.style): style = if (shadeName, styleName) == (currentTheme.shade, currentTheme.style):
[StyleClass("style-button"), ButtonSuggested] [StyleClass("style-button"), ButtonSuggested]