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/overlay.nix | 13 ++++
pkgs/patches/element-css.patch | 151 +++++++++++++++++++++++++++++++++++++++++
2 files changed, 164 insertions(+)
create mode 100644 pkgs/patches/element-css.patch
(limited to 'pkgs')
diff --git a/pkgs/overlay.nix b/pkgs/overlay.nix
index 9d8b7b8..93de992 100644
--- a/pkgs/overlay.nix
+++ b/pkgs/overlay.nix
@@ -116,6 +116,19 @@ in
meta.mainProgram = "ntfy-matrix-bot";
};
+ element-web-unwrapped = super.element-web-unwrapped.overrideAttrs {
+ patches = [ ./patches/element-css.patch ];
+ preBuild = ''
+ substituteInPlace node_modules/matrix-react-sdk/lib/components/views/rooms/RoomSublist.js \
+ --replace "HEADER_HEIGHT = 32" "HEADER_HEIGHT = 10" \
+ --replace "SHOW_N_BUTTON_HEIGHT = 28" "SHOW_N_BUTTON_HEIGHT = 16"
+ substituteInPlace node_modules/matrix-react-sdk/lib/src/components/views/rooms/RoomSublist.d.ts \
+ --replace "HEADER_HEIGHT = 32" "HEADER_HEIGHT = 10"
+ substituteInPlace node_modules/matrix-react-sdk/lib/stores/room-list/ListLayout.js \
+ --replace "TILE_HEIGHT_PX = 44" "TILE_HEIGHT = 22"
+ '';
+ };
+
bahnhof-name =
let
haskellPkgs = self.haskellPackages.override (old: {
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 @@
+
+ <% }
+ } %>
++
+
+ <% 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