feature: stylemods, for side by side buttons, and XL images (#634)

service/internal/config/config.go

@@ -150,6 +150,7 @@ type Config struct {
 	DefaultIconForBack              string
 	AdditionalNavigationLinks       []*NavigationLink
 	ServiceHostMode                 string
+	StyleMods                       []string
 
 	usedConfigDir string
 }

service/internal/httpservers/webuiServer.go

@@ -32,6 +32,7 @@ type webUISettings struct {
 	EnableCustomJs         bool
 	AuthLoginUrl           string
 	AuthLocalLogin         bool
+	StyleMods              []string
 	AuthOAuth2Providers    []publicOAuth2Provider
 	AdditionalLinks        []*config.NavigationLink
 }
@@ -141,6 +142,7 @@ func generateWebUISettings(w http.ResponseWriter, r *http.Request) {
 		AuthLocalLogin:         cfg.AuthLocalUsers.Enabled,
 		AuthOAuth2Providers:    buildPublicOAuth2ProvidersList(cfg),
 		AdditionalLinks:        cfg.AdditionalNavigationLinks,
+		StyleMods:              cfg.StyleMods,
 	})
 
 	w.Header().Add("Content-Type", "application/json")

webui.dev/main.js

@@ -92,6 +92,8 @@ function fetchGetLogs () {
 }
 
 function processWebuiSettingsJson (settings) {
+  window.settings = settings
+
   setupSectionNavigation(settings.SectionNavigationStyle)
 
   window.restBaseUrl = settings.Rest
@@ -111,6 +113,12 @@ function processWebuiSettingsJson (settings) {
     document.querySelector('footer[title="footer"]').style.display = 'none'
   }
 
+  if (settings.StyleMods != null) {
+    for (const style of settings.StyleMods) {
+      document.body.classList.add(style)
+    }
+  }
+
   if (settings.EnableCustomJs) {
     const script = document.createElement('script')
     script.src = './custom-webui/custom.js'
@@ -136,8 +144,6 @@ function processWebuiSettingsJson (settings) {
   loginForm.processLocalLogin(settings.AuthLocalLogin)
 
   document.getElementsByTagName('main')[0].appendChild(loginForm)
-
-  window.settings = settings
 }
 
 function processAdditionalLinks (links) {

webui.dev/style.css

@@ -599,6 +599,16 @@ label.input-with-icons button {
   transition: color .3s ease;
 }
 
+.sm-side-icons action-button button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.sm-imageicons-fullwidth action-button button .icon img {
+  width: 100%;
+}
+
 label.input-with-icons button:disabled {
   display: none;
 }