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;
+}