From 129d3f677d1eba72eced78cd21cdaa9485a7a928 Mon Sep 17 00:00:00 2001
From: stuebinm
Date: Thu, 28 Mar 2024 21:32:42 +0100
Subject: flora: schildichat-web → element-web

since schildichat-web has essentially been unmaintained for a while now,
i guess i don't really have any choice here.

I've tried to at least hack a little css into my element so it won't
bother me too much (mostly making UI elements smaller & changing some
colours). However, it turns out they do UI calculations in javascript
which just make hard assumptions over values set in the css, and so far
I've not succeeded in fixing these.

Das ist doch wirklich alles Unsinn in diesem Ökosystem …
---
 pkgs/patches/element-css.patch | 151 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 pkgs/patches/element-css.patch

(limited to 'pkgs/patches')

diff --git a/pkgs/patches/element-css.patch b/pkgs/patches/element-css.patch
new file mode 100644
index 0000000..dae7298
--- /dev/null
+++ b/pkgs/patches/element-css.patch
@@ -0,0 +1,151 @@
+diff --git a/res/css/dings.custom.css b/res/css/dings.custom.css
+new file mode 100644
+index 000000000..48ae3414f
+--- /dev/null
++++ b/res/css/dings.custom.css
+@@ -0,0 +1,104 @@
++
++.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
++    font-size: 11pt !important;
++}
++.mx_RoomTile .mx_RoomTile_titleContainer {
++    height: 20px;
++}
++.mx_EventTile_avatar {
++    padding-top: 3.5px;
++}
++
++[class^="_avatar"].mx_BaseAvatar:not(.mx_UserMenu_userAvatar *, .mx_RoomSummaryCard_avatar *, .mx_GenericEventListSummary_avatars *) {
++  --cpd-avatar-size:  20px !important;
++}
++.mx_TabbedView_tabLabel{
++    padding: 4px 10px;
++}
++.mx_AccessibleButton.mx_AccessibleButton_hasKind {
++    padding: 4px 10px;
++}
++
++.mx_Username_color1 {
++    color: darkred;
++}
++.mx_Username_color2 {
++    color: darkcyan;
++}
++.mx_Username_color3 {
++    color: darkorange;
++}
++.mx_Username_color4 {
++    color: purple;
++}
++.mx_Username_color5 {
++    color: darkblue;
++}
++.mx_Username_color6 {
++    color: darkslateblue;
++}
++.mx_Username_color7 {
++    color: darkmagenta;
++}
++.mx_Username_color8 {
++    color: darkgreen;
++}
++
++/* css modules get name mangled, so use a catchall for those */
++[class^="_avatar"] {
++  color: white !important;
++  &[data-color="1"] {
++    background-color: darkred;
++  }
++  &[data-color="2"] {
++    background-color: darkcyan;
++  }
++  &[data-color="3"] {
++    background-color: darkorange;
++  }
++  &[data-color="4"] {
++    background-color: purple;
++  }
++  &[data-color="5"] {
++    background-color: darkblue;
++    color: black !important;
++  }
++  &[data-color="6"] {
++    background-color: darkslateblue;
++  }
++  &[data-color="7"] {
++    background-color: darkmagenta;
++  }
++  &[data-color="8"] {
++    background-color: darkgreen;
++  }
++  & > [class^="_image"] {
++      width: 20px;
++      height: 20px;
++  }
++}
++
++
++.mx_RoomListHeader .mx_RoomListHeader_plusButton {
++    border-radius: 2px;
++}
++.mx_RoomTile.mx_RoomTile_selected, .mx_RoomTile:hover, .mx_RoomTile:focus-within, .mx_RoomTile.mx_RoomTile_hasMenuOpen {
++    border-radius: 2px;
++}
++.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton {
++    border-radius: 2px;
++}
++.mx_RoomSearch, .mx_MessageActionBar, .mx_ContextualMenu {
++    border-radius: 2px;
++}
++.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child {
++    border-radius: 0 0 2px 2px;
++}
++
++
++body {
++    --cpd-color-text-action-accent: darkmagenta !important;
++    --cpd-color-text-critical-primary: #cc0055 !important;
++    --MBody-border-radius: 2px !important;
++}
++
+diff --git a/src/vector/index.html b/src/vector/index.html
+index f5213701c..50e0729d9 100644
+--- a/src/vector/index.html
++++ b/src/vector/index.html
+@@ -48,6 +48,7 @@
+            <link rel="stylesheet" href="<%= file %>">
+         <% }
+     } %>
++    <link rel="stylesheet" href="<%= require('../../res/css/dings.custom.css') %>">
+ 
+     <% for (const tag of htmlWebpackPlugin.tags.headTags) {
+         let path = tag.attributes && tag.attributes.href;
+diff --git a/webpack.config.js b/webpack.config.js
+index d7dc5ffa0..00f751ed8 100644
+--- a/webpack.config.js
++++ b/webpack.config.js
+@@ -365,6 +365,24 @@ module.exports = (env, argv) => {
+                             },
+                         },
+                     ],
++                    exclude: /\.custom\.css$/,
++                },
++                {
++                    test: /\.custom\.css$/,
++                    use: [
++                        {
++                            loader: "file-loader",
++                            options: {
++                                esModule: false,
++                                name: "dings.custom.[hash:7].[ext]",
++                                outputPath: getAssetOutputPath,
++                                publicPath: function (url, resourcePath) {
++                                    const outputPath = getAssetOutputPath(url, resourcePath);
++                                    return toPublicPath(outputPath);
++                                },
++                            },
++                        },
++                    ],
+                 },
+                 {
+                     test: /\.pcss$/,
-- 
cgit v1.2.3