Transform conversation icons to CSS

Signed-off-by: Joas Schilling <coding@schilljs.com>

10 files changed, 85 insertions, 58 deletions

diff --git a/css/icons.css b/css/icons.css
new file mode 100644
index 000000000..abd803f12
--- /dev/null
+++ b/css/icons.css
@@ -0,0 +1,79 @@
+// Mention bubbles in the chat input and messages
+.avatar-class-icon.icon-group-forced-white {
+	background-image: url(../img/icon-contacts-white.svg);
+}
+.avatar-class-icon.icon-user-forced-white {
+	background-image: url(../img/icon-contacts-white.svg);
+}
+
+.app-talk .icon-public,
+.talk-modal .icon-public,
+.sidebar-callview .icon-public,
+#talk-panel .icon-public,
+#talk-sidebar .icon-public,
+#call-container .icon-public,
+.talkChatTab .icon-public {
+	background-image: url(../img/icon-public-white.svg);
+}
+
+.app-talk .icon-contacts,
+.talk-modal .icon-contacts,
+.sidebar-callview .icon-contacts,
+#talk-panel .icon-contacts,
+#talk-sidebar .icon-contacts,
+#call-container .icon-contacts,
+.talkChatTab .icon-contacts {
+	background-image: url(../img/icon-contacts-white.svg);
+}
+
+.app-talk .icon-password,
+.talk-modal .icon-password,
+.sidebar-callview .icon-password,
+#talk-panel .icon-password,
+#talk-sidebar .icon-password,
+#call-container .icon-password,
+.talkChatTab .icon-password {
+	background-image: url(../img/icon-password-white.svg);
+}
+.app-talk .icon-file,
+.talk-modal .icon-file,
+.sidebar-callview .icon-file,
+#talk-panel .icon-file,
+#talk-sidebar .icon-file,
+#call-container .icon-file,
+.talkChatTab .icon-file {
+	background-image: url(../img/icon-text-white.svg);
+}
+
+.app-talk .icon-mail,
+.talk-modal .icon-mail,
+.sidebar-callview .icon-mail,
+#talk-panel .icon-mail,
+#talk-sidebar .icon-mail,
+#call-container .icon-mail,
+.talkChatTab .icon-mail {
+	background-image: url(../img/icon-mail-white.svg);
+}
+
+.app-talk .icon-changelog,
+.talk-modal .icon-changelog,
+.sidebar-callview .icon-changelog,
+#talk-panel .icon-changelog,
+#talk-sidebar .icon-changelog,
+#call-container .icon-changelog,
+.talkChatTab .icon-changelog {
+	background-image: url(../img/changelog.svg);
+}
+
+// The atwho panel is a direct child of the body, so it is not affected by
+// .app-Talk rules above.
+// "forced-white" needs to be included in the class name as the Avatar does
+// not accept several classes.
+.talk.candidate-mentions.atwho-panel .icon-group-forced-white {
+	background-image: url(../img/icon-contacts-white.svg);
+}
+
+// Needed to use white color also in dark mode.
+.app-files .app-sidebar__close.forced-white {
+	color: #ffffff;
+}
diff --git a/css/icons.scss b/css/icons.scss
deleted file mode 100644
index 597e95e5e..000000000
--- a/css/icons.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// Mention bubbles in the chat input and messages
-.avatar-class-icon.icon-group-forced-white {
-	background-image: url(../img/icon-contacts-white.svg);
-}
-.avatar-class-icon.icon-user-forced-white {
-	background-image: url(../img/icon-contacts-white.svg);
-}
-
-.app-talk,
-.talk-modal,
-.talk-sidebar-callview,
-#talk-panel,
-#talk-sidebar,
-#call-container,
-.talkChatTab {
-	// We always want to use the white icons, this is why we don't use var(--color-white) here.
-	.icon-public {
-		background-image: url(icon-color-path('public', 'actions', 'fff', 1, true));
-	}
-	.icon-contacts {
-		background-image: url(icon-color-path('contacts', 'places', 'fff', 1, true));
-	}
-	.icon-password {
-		background-image: url(icon-color-path('password', 'actions', 'fff', 1, true));
-	}
-	.icon-file {
-		background-image: url(icon-color-path('text', 'filetypes', 'fff', 1, true));
-	}
-	.icon-mail {
-		background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true));
-	}
-	.icon-changelog {
-		background-image: url('../img/changelog.svg');
-	}
-}
-
-// The atwho panel is a direct child of the body, so it is not affected by
-// .app-Talk rules above.
-// "forced-white" needs to be included in the class name as the Avatar does
-// not accept several classes.
-.talk.candidate-mentions.atwho-panel .icon-group-forced-white {
-	background-image: url(../img/icon-contacts-white.svg);
-}
-
-// Needed to use white color also in dark mode.
-.app-files .app-sidebar__close.forced-white {
-	color: #ffffff;
-}
diff --git a/css/merged-files.scss b/css/merged-files.scss
deleted file mode 100644
index 4b60b1274..000000000
--- a/css/merged-files.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './icons';
diff --git a/css/merged-public-share.scss b/css/merged-public-share.scss
deleted file mode 100644
index 4b60b1274..000000000
--- a/css/merged-public-share.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './icons';
diff --git a/css/merged-share-auth.scss b/css/merged-share-auth.scss
deleted file mode 100644
index 4b60b1274..000000000
--- a/css/merged-share-auth.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './icons';
diff --git a/css/merged.scss b/css/merged.scss
deleted file mode 100644
index 4b60b1274..000000000
--- a/css/merged.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './icons';
diff --git a/lib/Files/TemplateLoader.php b/lib/Files/TemplateLoader.php
index 8a189909e..ada2ae1dd 100644
--- a/lib/Files/TemplateLoader.php
+++ b/lib/Files/TemplateLoader.php
@@ -88,8 +88,8 @@ class TemplateLoader implements IEventListener {
 			return;
 		}
 
-		Util::addStyle(Application::APP_ID, 'merged-files');
 		Util::addStyle(Application::APP_ID, 'At');
+		Util::addStyle(Application::APP_ID, 'icons');
 		Util::addScript(Application::APP_ID, 'talk-files-sidebar');
 
 		$user = $this->userSession->getUser();
diff --git a/lib/PublicShare/TemplateLoader.php b/lib/PublicShare/TemplateLoader.php
index e513879b9..d12efc74a 100644
--- a/lib/PublicShare/TemplateLoader.php
+++ b/lib/PublicShare/TemplateLoader.php
@@ -79,10 +79,10 @@ class TemplateLoader implements IEventListener {
 			return;
 		}
 
-		Util::addStyle('spreed', 'merged-public-share');
 		Util::addStyle(Application::APP_ID, 'At');
+		Util::addStyle(Application::APP_ID, 'icons');
 		Util::addStyle(Application::APP_ID, 'publicshare');
-		Util::addScript('spreed', 'talk-public-share-sidebar');
+		Util::addScript(Application::APP_ID, 'talk-public-share-sidebar');
 
 		$this->publishInitialStateForGuest();
 	}
diff --git a/lib/PublicShareAuth/TemplateLoader.php b/lib/PublicShareAuth/TemplateLoader.php
index b7b965265..0416c924f 100644
--- a/lib/PublicShareAuth/TemplateLoader.php
+++ b/lib/PublicShareAuth/TemplateLoader.php
@@ -74,10 +74,10 @@ class TemplateLoader implements IEventListener {
 			return;
 		}
 
-		Util::addStyle('spreed', 'merged-share-auth');
 		Util::addStyle(Application::APP_ID, 'At');
+		Util::addStyle(Application::APP_ID, 'icons');
 		Util::addStyle(Application::APP_ID, 'publicshareauth');
-		Util::addScript('spreed', 'talk-public-share-auth-sidebar');
+		Util::addScript(Application::APP_ID, 'talk-public-share-auth-sidebar');
 
 		$this->publishInitialStateForGuest();
 	}
diff --git a/templates/index.php b/templates/index.php
index 6476dae34..3f2572f59 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -3,5 +3,5 @@
 declare(strict_types=1);
 
 script('spreed', 'talk-main');
-style('spreed', 'merged');
+style('spreed', 'icons');
 style('spreed', 'At');