diff options
| -rw-r--r-- | flora/services/element.nix | 2 | ||||
| -rw-r--r-- | pkgs/overlay.nix | 13 | ||||
| -rw-r--r-- | pkgs/patches/element-css.patch | 151 |
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$/, |