summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--flora/services/element.nix2
-rw-r--r--pkgs/overlay.nix13
-rw-r--r--pkgs/patches/element-css.patch151
3 files changed, 165 insertions, 1 deletions
diff --git a/flora/services/element.nix b/flora/services/element.nix
index 66c6c4c..d0621fa 100644
--- a/flora/services/element.nix
+++ b/flora/services/element.nix
@@ -10,7 +10,7 @@ in
"chat.stuebinm.eu"
];
- root = pkgs.schildichat-web.override {
+ root = pkgs.element-web.override {
conf = {
default_server_config = null;
default_server_name = "raccoon.college";
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 @@
+ <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$/,