refactor: migrate some styling features to the new architecture
Again, by using StylesheetScript we also get dynamic styles for free.
Bug: twpowertools:176, twpowertools:61
Change-Id: I8c660f8b9cddaf56b3a29c8d07d48d070ee2cd34
diff --git a/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts b/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..5844311
--- /dev/null
+++ b/src/features/enhancedAnnouncementsDot/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class EnhancedAnnouncementsDotStylesScript extends StylesheetScript {
+ stylesheet = 'css/enhanced_announcements_dot.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('enhancedannouncementsdot');
+ }
+}
diff --git a/src/features/enhancedAnnouncementsDot/ui/styles.css b/src/features/enhancedAnnouncementsDot/ui/styles.css
new file mode 100644
index 0000000..3e394ef
--- /dev/null
+++ b/src/features/enhancedAnnouncementsDot/ui/styles.css
@@ -0,0 +1,41 @@
+@keyframes TWPTAnnouncementDot {
+ from {
+ background-color: #d93025;
+ bottom: 8px;
+ }
+
+ to {
+ background-color: #e2b3b0;
+ bottom: 0px;
+ }
+}
+
+@keyframes TWPTAnnouncementDot-v2 {
+ from {
+ background-color: #d93025;
+ top: 4px;
+ }
+
+ to {
+ background-color: #e2b3b0;
+ top: 12px;
+ }
+}
+
+header .left-control .material-drawer-button.has-updates::after,
+ header .right-control material-button.has-updates::after {
+ height: 10px;
+ width: 10px;
+}
+
+header .left-control .material-drawer-button.has-updates::after {
+ animation: .5s infinite alternate ease-in TWPTAnnouncementDot;
+}
+
+header .right-control .help-button.has-updates::after {
+ animation: .5s infinite alternate ease-in TWPTAnnouncementDot-v2;
+}
+
+header .sash {
+ display: none;
+}
diff --git a/src/features/fixedToolbar/presentation/scripts/styles.script.ts b/src/features/fixedToolbar/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..29133fc
--- /dev/null
+++ b/src/features/fixedToolbar/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class FixedToolbarStylesScript extends StylesheetScript {
+ stylesheet = 'css/fixed_toolbar.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('fixedtoolbar');
+ }
+}
diff --git a/src/features/fixedToolbar/ui/styles.css b/src/features/fixedToolbar/ui/styles.css
new file mode 100644
index 0000000..c52fb30
--- /dev/null
+++ b/src/features/fixedToolbar/ui/styles.css
@@ -0,0 +1,6 @@
+ec-bulk-actions {
+ position: sticky;
+ top: 0;
+ background: var(--TWPT-primary-background, #fff);
+ z-index: 96;
+}
diff --git a/src/features/imageMaxHeight/presentation/scripts/styles.script.ts b/src/features/imageMaxHeight/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..9befaa9
--- /dev/null
+++ b/src/features/imageMaxHeight/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class ImageMaxHeightStylesScript extends StylesheetScript {
+ stylesheet = 'css/image_max_height.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('imagemaxheight');
+ }
+}
diff --git a/src/features/imageMaxHeight/ui/styles.css b/src/features/imageMaxHeight/ui/styles.css
new file mode 100644
index 0000000..66494b9
--- /dev/null
+++ b/src/features/imageMaxHeight/ui/styles.css
@@ -0,0 +1,7 @@
+ec-question .body img,
+ ec-message .body img,
+ ec-thread-summary .main .content .body img,
+ .scTailwindThreadPostcontentroot img {
+ /* "Max height = full height - 2 * height of the header" */
+ max-height: calc(100vh - 2*64px);
+}
diff --git a/src/features/increaseContrast/presentation/scripts/styles.script.ts b/src/features/increaseContrast/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..2ff828c
--- /dev/null
+++ b/src/features/increaseContrast/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class IncreaseContrastStylesScript extends StylesheetScript {
+ stylesheet = 'css/increase_contrast.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('increasecontrast');
+ }
+}
diff --git a/src/features/increaseContrast/ui/styles.css b/src/features/increaseContrast/ui/styles.css
new file mode 100644
index 0000000..026230e
--- /dev/null
+++ b/src/features/increaseContrast/ui/styles.css
@@ -0,0 +1,3 @@
+.thread-summary.read:not(.checked) {
+ background: var(--TWPT-thread-read-background, #ecedee) !important;
+}
diff --git a/src/features/repositionExpandThread/presentation/scripts/styles.script.ts b/src/features/repositionExpandThread/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..2d54313
--- /dev/null
+++ b/src/features/repositionExpandThread/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class RepositionExpandThreadStylesScript extends StylesheetScript {
+ stylesheet = 'css/reposition_expand_thread.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('repositionexpandthread');
+ }
+}
diff --git a/src/features/repositionExpandThread/ui/styles.css b/src/features/repositionExpandThread/ui/styles.css
new file mode 100644
index 0000000..0e35af3
--- /dev/null
+++ b/src/features/repositionExpandThread/ui/styles.css
@@ -0,0 +1,21 @@
+ec-thread-summary .panel > .main-header > .action > .header > .expand-button {
+ order: -99963; /* This will position the button in the beginning. */
+}
+
+ec-thread-summary .panel > .main-header > .action > .header {
+ padding-inline: 0px 19px!important;
+}
+
+/* Adjusting padding for the bulk action checkbox */
+ec-thread-list ec-bulk-actions .selection {
+ padding-inline-start: 41px;
+}
+
+/* Adjusting padding for the info in the expanded thread */
+ec-thread-summary .panel .main .content-wrapper > .content > .content {
+ padding-inline: 136px 8px;
+}
+
+ec-thread-summary .main .toolbelt .TWPT-extrainfo-container {
+ margin-inline-start: 156px!important;
+}
diff --git a/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts b/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts
new file mode 100644
index 0000000..eda313e
--- /dev/null
+++ b/src/features/stickySidebarHeaders/presentation/scripts/styles.script.ts
@@ -0,0 +1,10 @@
+import StylesheetScript from '../../../../common/architecture/scripts/stylesheet/StylesheetScript';
+
+export default class StickySidebarHeadersStylesScript extends StylesheetScript {
+ stylesheet = 'css/sticky_sidebar_headers.css';
+ page: never;
+
+ async shouldBeInjected(): Promise<boolean> {
+ return await this.optionsProvider.isEnabled('stickysidebarheaders');
+ }
+}
diff --git a/src/features/stickySidebarHeaders/ui/styles.css b/src/features/stickySidebarHeaders/ui/styles.css
new file mode 100644
index 0000000..cd64b74
--- /dev/null
+++ b/src/features/stickySidebarHeaders/ui/styles.css
@@ -0,0 +1,6 @@
+material-drawer .main-header {
+ background: var(--TWPT-drawer-background, #fff) !important;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}