Skip to content

Commit 53419a3

Browse files
codewithvkeszkadev
codewithvk
authored and
eszkadev
committed
refactor(settings): use CSS variables for iframe
Signed-off-by: codewithvk <vivek.javiya@collabora.com> Change-Id: I5d60b87a1f51be8da399ce567b59536337bf6c44
1 parent 7f9317d commit 53419a3

File tree

4 files changed

+104
-109
lines changed

4 files changed

+104
-109
lines changed

‎browser/admin/adminIntegratorSettings.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,11 @@
2424
src="%SERVICE_ROOT%/browser/%VERSION%/admin-bundle.js"
2525
defer
2626
></script>
27+
<!--%BRANDING_CSS%-->
28+
<!--%BRANDING_JS%-->
2729
</head>
2830
<body>
29-
<div id="fileControls">
31+
<div id="settingIframe">
3032
<div id="allConfigSection"></div>
3133
<input
3234
type="hidden"

‎browser/admin/css/adminIntegratorSettings.css

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,28 @@
11
:root {
2+
--settings-btn-primary: var(--color-primary);
3+
--settings-btn-primary-text: var(--color-primary-text);
4+
--settings-btn-light-text: #0e242f;
5+
--settings-btn-light: var(--color-primary-lighter);
6+
--settings-border: var(--color-border);
7+
--settings-border-contrast: var(--color-border-darker);
8+
--settings-text: var(--color-primary-text);
9+
--settings-text-maxcontrast: var(--color-border-lighter);
10+
--settings-background: var(--color-main-background);
11+
--settings-background-hover: var(--color-background-dark);
12+
213
--default-font-size: 15px;
314
--animation-quick: 100ms;
415
--border-radius-element: 8px;
516
--default-clickable-area: 34px;
617
--default-grid-baseline: 4px;
7-
--color-text-lighter: var(--color-text-maxcontrast);
8-
--color-scrollbar: var(--color-border-maxcontrast) transparent;
9-
}
10-
11-
[data-theme='light'] {
12-
--color-text-maxcontrast: #6b6b6b;
13-
--color-background-hover: #f5f5f5;
14-
--color-main-text: #222222;
15-
--color-main-background: #ffffff;
16-
--color-border: #ededed;
17-
--color-border-dark: #dbdbdb;
18-
--color-primary-hover: #3285b1;
19-
--color-primary-element-text: #ffffff;
20-
--color-primary-element: #00679e;
21-
--color-primary-element-light: #e5eff5;
22-
--color-primary-element-light-text: #00293f;
23-
}
24-
25-
[data-theme='dark'] {
26-
--color-text-maxcontrast: #999999;
27-
--color-background-hover: #212121;
28-
--color-main-text: #ebebeb;
29-
--color-main-background: #171717;
30-
--color-border: #292929;
31-
--color-border-dark: #3b3b3b;
32-
--color-primary-hover: #045783;
33-
--color-primary-element-text: #000000;
34-
--color-primary-element: #0091f2;
35-
--color-primary-element-light: #14232c;
36-
--color-primary-element-light-text: #99d3f9;
18+
--color-text-lighter: var(--settings-text-maxcontrast);
19+
--color-scrollbar: var(--settings-border-contrast) transparent;
3720
}
3821

3922
html,
4023
body {
41-
color: var(--color-main-text);
42-
background-color: var(--color-main-background);
24+
color: var(--settings-text);
25+
background-color: var(--settings-background);
4326
padding-left: 0px;
4427
margin-left: 0px;
4528
display: block;
@@ -79,7 +62,7 @@ ul {
7962
}
8063

8164
.section:not(:last-child) {
82-
border-bottom: 1px solid var(--color-border);
65+
border-bottom: 1px solid var(--settings-border);
8366
}
8467

8568
.section h3 {
@@ -111,8 +94,8 @@ ul {
11194
transition-property: color, border-color, background-color;
11295
transition-duration: 0.1s;
11396
transition-timing-function: linear;
114-
color: var(--color-primary-element-light-text);
115-
background-color: var(--color-primary-element-light);
97+
color: var(--settings-btn-light-text);
98+
background-color: var(--settings-btn-light);
11699
}
117100

118101
.button:disabled {
@@ -131,13 +114,13 @@ ul {
131114
}
132115

133116
.button-primary {
134-
color: var(--color-primary-element-text);
135-
background-color: var(--color-primary-element);
117+
color: var(--settings-btn-primary-text);
118+
background-color: var(--settings-btn-primary);
136119
}
137120

138121
.button--vue-secondary {
139-
color: var(--color-primary-element-light-text);
140-
background-color: var(--color-primary-element-light);
122+
color: var(--settings-btn-light-text);
123+
background-color: var(--settings-btn-light);
141124
}
142125

143126
.button__wrapper {
@@ -174,17 +157,17 @@ ul {
174157
}
175158

176159
.button--vue-secondary {
177-
color: var(--color-primary-element-light-text);
178-
background-color: var(--color-primary-element-light);
160+
color: var(--settings-btn-light-text);
161+
background-color: var(--settings-btn-light);
179162
}
180163

181164
.button--text-only {
182165
padding: 0 var(--button-padding);
183166
}
184167

185168
.button--vue-tertiary {
186-
color: var(--color-main-text);
187-
background-color: var(--color-main-background);
169+
color: var(--settings-text);
170+
background-color: var(--settings-background);
188171
}
189172

190173
.button--icon-only {
@@ -207,7 +190,7 @@ ul {
207190
cursor: pointer;
208191
transition: background-color var(--animation-quick) ease-in-out;
209192
list-style: none;
210-
border: 0.5px solid var(--color-border);
193+
border: 0.5px solid var(--settings-border);
211194
padding-right: 8px;
212195
}
213196

@@ -290,7 +273,7 @@ ul {
290273
}
291274

292275
.modal-content {
293-
background-color: var(--color-main-background);
276+
background-color: var(--settings-background);
294277
padding: 20px;
295278
width: 400px;
296279
max-width: 90%;
@@ -314,10 +297,10 @@ ul {
314297
flex: 1;
315298
padding: 8px;
316299
font-size: 15px;
317-
border: 1px solid var(--color-border);
300+
border: 1px solid var(--settings-border);
318301
border-radius: 4px;
319-
color: var(--color-main-text);
320-
background-color: var(--color-main-background);
302+
color: var(--settings-text);
303+
background-color: var(--settings-background);
321304
}
322305

323306
.wordbook-add-button {
@@ -364,14 +347,13 @@ ul {
364347
transition: background-color 0.2s ease;
365348
}
366349

367-
368350
.dic-dropdown-container {
369351
position: relative;
370352
margin-bottom: 16px;
371353
cursor: pointer;
372-
border: 1px solid var(--color-border-dark);
354+
border: 1px solid var(--settings-border-contrast);
373355
border-radius: 4px;
374-
background-color: var(--color-main-background);
356+
background-color: var(--settings-background);
375357
padding: 8px;
376358
}
377359

@@ -387,7 +369,7 @@ ul {
387369
}
388370

389371
.dic-dropdown-container .open {
390-
border: 1px solid var(--color-border-dark);
372+
border: 1px solid var(--settings-border-contrast);
391373
}
392374

393375
.dic-dropdown-container.open::after {
@@ -399,8 +381,8 @@ ul {
399381
top: 100%;
400382
left: 0;
401383
right: 0;
402-
background-color: var(--color-main-background);
403-
border: 1px solid var(--color-border);
384+
background-color: var(--settings-background);
385+
border: 1px solid var(--settings-border);
404386
border-radius: 4px;
405387
z-index: 100;
406388
max-height: 200px;
@@ -409,11 +391,11 @@ ul {
409391

410392
.dic-dropdown-option {
411393
padding: 8px;
412-
border: 1px solid var(--color-border-dark);
394+
border: 1px solid var(--settings-border-contrast);
413395
}
414396

415397
.dic-dropdown-option:hover {
416-
background-color: var(--color-background-hover);
398+
background-color: var(--settings-background-hover);
417399
}
418400

419401
.dic-dropdown-description {
@@ -430,8 +412,8 @@ ul {
430412
.dic-select-container select {
431413
padding: 8px;
432414
font-size: var(--default-font-size);
433-
border: 1px solid var(--color-border);
415+
border: 1px solid var(--settings-border);
434416
border-radius: 4px;
435-
background-color: var(--color-main-background);
436-
color: var(--color-main-text);
417+
background-color: var(--settings-background);
418+
color: var(--settings-text);
437419
}

‎wsd/FileServer.cpp

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1671,7 +1671,6 @@ FileServerRequestHandler::ResourceAccessDetails FileServerRequestHandler::prepro
16711671
std::string userInterfaceMode;
16721672
std::string userInterfaceTheme;
16731673
std::string savedUIState = "true";
1674-
const std::string& theme = urv[BRANDING_THEME];
16751674

16761675
Poco::replaceInPlace(preprocess, ACCESS_TOKEN, urv[ACCESS_TOKEN]);
16771676
Poco::replaceInPlace(preprocess, ACCESS_TOKEN_TTL, urv[ACCESS_TOKEN_TTL]);
@@ -1710,31 +1709,8 @@ FileServerRequestHandler::ResourceAccessDetails FileServerRequestHandler::prepro
17101709
config.getBool("user_interface.statusbar_save_indicator", false) ? "true" : "false";
17111710
Poco::replaceInPlace(preprocess, std::string("%STATUSBAR_SAVE_INDICATOR%"), useStatusbarSaveIndicator);
17121711

1713-
static const bool useIntegrationTheme =
1714-
config.getBool("user_interface.use_integration_theme", true);
1715-
const bool hasIntegrationTheme =
1716-
!theme.empty() &&
1717-
FileUtil::Stat(COOLWSD::FileServerRoot + "/browser/dist/" + theme).exists();
1718-
const std::string themePreFix = hasIntegrationTheme && useIntegrationTheme ? theme + "/" : "";
1719-
const std::string linkCSS("<link rel=\"stylesheet\" href=\"%s/browser/" COOLWSD_VERSION_HASH "/" + themePreFix + "%s.css\">");
1720-
const std::string scriptJS("<script src=\"%s/browser/" COOLWSD_VERSION_HASH "/" + themePreFix + "%s.js\"></script>");
1721-
1722-
std::string brandCSS(Poco::format(linkCSS, responseRoot, std::string(BRANDING)));
1723-
std::string brandJS(Poco::format(scriptJS, responseRoot, std::string(BRANDING)));
1724-
1725-
if constexpr (ConfigUtil::isSupportKeyEnabled())
1726-
{
1727-
const std::string keyString = config.getString("support_key", "");
1728-
SupportKey key(keyString);
1729-
if (!key.verify() || key.validDaysRemaining() <= 0)
1730-
{
1731-
brandCSS = Poco::format(linkCSS, responseRoot, std::string(SUPPORT_KEY_BRANDING_UNSUPPORTED));
1732-
brandJS = Poco::format(scriptJS, responseRoot, std::string(SUPPORT_KEY_BRANDING_UNSUPPORTED));
1733-
}
1734-
}
1712+
updateThemeResources(preprocess, responseRoot, urv[BRANDING_THEME], config);
17351713

1736-
Poco::replaceInPlace(preprocess, std::string("<!--%BRANDING_CSS%-->"), brandCSS);
1737-
Poco::replaceInPlace(preprocess, std::string("<!--%BRANDING_JS%-->"), brandJS);
17381714
Poco::replaceInPlace(preprocess, CSS_VARS, cssVarsToStyle(urv[CSS_VARS]));
17391715

17401716
if (config.getBool("browser_logging", false))
@@ -1803,9 +1779,6 @@ FileServerRequestHandler::ResourceAccessDetails FileServerRequestHandler::prepro
18031779
uiRtlSettings = " dir=\"rtl\" ";
18041780
Poco::replaceInPlace(preprocess, std::string("%UI_RTL_SETTINGS%"), uiRtlSettings);
18051781

1806-
const std::string useIntegrationThemeString = useIntegrationTheme && hasIntegrationTheme ? "true" : "false";
1807-
Poco::replaceInPlace(preprocess, std::string("%USE_INTEGRATION_THEME%"), useIntegrationThemeString);
1808-
18091782
std::string enableMacrosExecution = stringifyBoolFromConfig(config, "security.enable_macros_execution", false);
18101783
Poco::replaceInPlace(preprocess, std::string("%ENABLE_MACROS_EXECUTION%"), enableMacrosExecution);
18111784

@@ -2365,6 +2338,7 @@ void FileServerRequestHandler::preprocessIntegratorAdminFile(const HTTPRequest&
23652338
{
23662339
const ServerURL cnxDetails(requestDetails);
23672340
const std::string responseRoot = cnxDetails.getResponseRoot();
2341+
const auto& config = Application::instance().config();
23682342

23692343
static const std::string scriptJS("<script src=\"%s/browser/" COOLWSD_VERSION_HASH "/%s.js\"></script>");
23702344
static const std::string footerPage("<footer class=\"footer has-text-centered\"><strong>Key:</strong> %s &nbsp;&nbsp;<strong>Expiry Date:</strong> %s</footer>");
@@ -2391,23 +2365,8 @@ void FileServerRequestHandler::preprocessIntegratorAdminFile(const HTTPRequest&
23912365
Poco::replaceInPlace(adminFile, std::string("%ENABLE_DEBUG%"),
23922366
std::string(enableDebug ? "true" : "false"));
23932367

2394-
std::string brandJS(Poco::format(scriptJS, responseRoot, std::string(BRANDING)));
2395-
std::string brandFooter;
2368+
updateThemeResources(adminFile, responseRoot, urv[BRANDING_THEME], config);
23962369

2397-
if constexpr (ConfigUtil::isSupportKeyEnabled())
2398-
{
2399-
const auto& config = Application::instance().config();
2400-
const std::string keyString = config.getString("support_key", "");
2401-
SupportKey key(keyString);
2402-
2403-
if (!key.verify() || key.validDaysRemaining() <= 0)
2404-
{
2405-
brandJS = Poco::format(scriptJS, std::string(SUPPORT_KEY_BRANDING_UNSUPPORTED));
2406-
brandFooter = Poco::format(footerPage, key.data(), Poco::DateTimeFormatter::format(key.expiry(), Poco::DateTimeFormat::RFC822_FORMAT));
2407-
}
2408-
}
2409-
2410-
Poco::replaceInPlace(adminFile, std::string("<!--%BRANDING_JS%-->"), brandJS);
24112370
Poco::replaceInPlace(adminFile, std::string("%VERSION%"), std::string(COOLWSD_VERSION_HASH));
24122371
Poco::replaceInPlace(adminFile, std::string("%SERVICE_ROOT%"), responseRoot);
24132372

@@ -2424,18 +2383,14 @@ void FileServerRequestHandler::preprocessIntegratorAdminFile(const HTTPRequest&
24242383
csp.appendDirectiveUrl("connect-src", cnxDetails.getWebServerUrl());
24252384
csp.appendDirective("img-src", "'self'");
24262385
csp.appendDirective("img-src", "data:"); // Equivalent to unsafe-inline!
2427-
24282386
csp.appendDirective("worker-src", "'self' blob:");
24292387

2430-
const auto& config = Application::instance().config();
24312388
csp.merge(config.getString("net.content_security_policy", ""));
24322389

24332390
response.add("Content-Security-Policy", csp.generate());
2434-
24352391
response.set("Last-Modified", Util::getHttpTimeNow());
24362392
response.set("Cache-Control", "max-age=11059200");
24372393
response.set("ETag", COOLWSD_VERSION_HASH);
2438-
24392394
response.add("X-Content-Type-Options", "nosniff");
24402395
response.add("X-XSS-Protection", "1; mode=block");
24412396
response.add("Referrer-Policy", "no-referrer");
@@ -2445,7 +2400,6 @@ void FileServerRequestHandler::preprocessIntegratorAdminFile(const HTTPRequest&
24452400
LOG_TRC("Sent file: " << relPath << ": " << response.getBody());
24462401
}
24472402

2448-
24492403
void FileServerRequestHandler::preprocessAdminFile(const HTTPRequest& request,
24502404
http::Response& response,
24512405
const RequestDetails& requestDetails,
@@ -2538,4 +2492,56 @@ void FileServerRequestHandler::preprocessAdminFile(const HTTPRequest& request,
25382492
socket->send(response);
25392493
}
25402494

2495+
static std::string sanitizeTheme(const std::string& theme)
2496+
{
2497+
std::string safeTheme = theme;
2498+
safeTheme.erase(
2499+
std::remove_if(
2500+
safeTheme.begin(), safeTheme.end(), [](char c)
2501+
{ return !(std::isalnum(static_cast<unsigned char>(c)) || c == '_' || c == '-'); }),
2502+
safeTheme.end());
2503+
return safeTheme;
2504+
}
2505+
2506+
void FileServerRequestHandler::updateThemeResources(std::string& fileContent,
2507+
const std::string& responseRoot,
2508+
const std::string& theme,
2509+
const Poco::Util::AbstractConfiguration& config)
2510+
{
2511+
static const bool useIntegrationTheme =
2512+
config.getBool("user_interface.use_integration_theme", true);
2513+
2514+
std::string safeThemeStr = sanitizeTheme(theme);
2515+
const bool hasIntegrationTheme =
2516+
!safeThemeStr.empty() &&
2517+
FileUtil::Stat(COOLWSD::FileServerRoot + "/browser/dist/" + safeThemeStr).exists();
2518+
2519+
const std::string themePrefix = hasIntegrationTheme && useIntegrationTheme ? safeThemeStr + "/" : "";
2520+
const std::string linkCSS = "<link rel=\"stylesheet\" href=\"" + responseRoot + "/browser/" +
2521+
COOLWSD_VERSION_HASH + "/" + themePrefix + "%s.css\">";
2522+
const std::string themeScriptJS = "<script src=\"" + responseRoot + "/browser/" +
2523+
COOLWSD_VERSION_HASH + "/" + themePrefix +
2524+
"%s.js\"></script>";
2525+
2526+
std::string brandCSS = Poco::format(linkCSS, std::string(BRANDING));
2527+
std::string brandJS = Poco::format(themeScriptJS, std::string(BRANDING));
2528+
2529+
if constexpr (ConfigUtil::isSupportKeyEnabled())
2530+
{
2531+
const std::string keyString = config.getString("support_key", "");
2532+
SupportKey key(keyString);
2533+
if (!key.verify() || key.validDaysRemaining() <= 0)
2534+
{
2535+
brandCSS = Poco::format(linkCSS, std::string(SUPPORT_KEY_BRANDING_UNSUPPORTED));
2536+
brandJS = Poco::format(themeScriptJS, std::string(SUPPORT_KEY_BRANDING_UNSUPPORTED));
2537+
}
2538+
}
2539+
2540+
Poco::replaceInPlace(fileContent, std::string("<!--%BRANDING_CSS%-->"), brandCSS);
2541+
Poco::replaceInPlace(fileContent, std::string("<!--%BRANDING_JS%-->"), brandJS);
2542+
2543+
const std::string useIntegrationThemeString = useIntegrationTheme && hasIntegrationTheme ? "true" : "false";
2544+
Poco::replaceInPlace(fileContent, std::string("%USE_INTEGRATION_THEME%"), useIntegrationThemeString);
2545+
}
2546+
25412547
/* vim:set shiftwidth=4 softtabstop=4 expandtab: */

0 commit comments

Comments
 (0)