From bba6664b1cf685d9666da63eacb4d8bbcb0ac764 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 18:58:42 +0000 Subject: [PATCH 001/168] bump to dep on react-sdk 0.8.3-electron --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 34df1c4e..a8197c22 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", "matrix-js-sdk": "0.7.2", - "matrix-react-sdk": "0.8.3", + "matrix-react-sdk": "0.8.3-electron", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From cbf105f2a0c448dcd27302be13de299fb43e7d4b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 18:59:41 +0000 Subject: [PATCH 002/168] Revert "bump to dep on react-sdk 0.8.3-electron" This reverts commit bba6664b1cf685d9666da63eacb4d8bbcb0ac764. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a8197c22..34df1c4e 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", "matrix-js-sdk": "0.7.2", - "matrix-react-sdk": "0.8.3-electron", + "matrix-react-sdk": "0.8.3", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From 078493912c97f83971ca225e962077daa0e2dd79 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 03:18:12 +0000 Subject: [PATCH 003/168] make electron send email validation URLs with a nextlink of riot.im rather than file:/// --- src/vector/index.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index b791783b..8231950b 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -136,11 +136,20 @@ var onNewScreen = function(screen) { // click back to the client having registered. // It's up to us to recognise if we're loaded with // this URL and tell MatrixClient to resume registration. +// +// If we're in electron, we should never pass through a file:// URL otherwise +// the identity server will try to 302 the browser to it, which breaks horribly. +// so in that instance, hardcode to use riot.im/app for now instead. var makeRegistrationUrl = function() { - return window.location.protocol + '//' + - window.location.host + - window.location.pathname + - '#/register'; + if (window.location.protocol === "file:") { + return 'https://riot.im/app/#/register'; + } + else { + return window.location.protocol + '//' + + window.location.host + + window.location.pathname + + '#/register'; + } } window.addEventListener('hashchange', onHashChange); From 8c523be6f52189ea0b731e6b0181d09f0b1f2a62 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 18:13:20 +0000 Subject: [PATCH 004/168] add gnu-tar to debian electron build deps --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 50a8ff04..54709e08 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,7 @@ The only platform that can build packages for all three platforms is macOS: ``` brew install wine --without-x11 brew install mono +brew install gnu-tar npm install npm run build:electron ``` From 4de042bf587f42a9f91df4db22c536a6f8a6c0b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 18:13:33 +0000 Subject: [PATCH 005/168] empirically fix win32 shortcut in start menu --- electron/src/squirrelhooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js index 10fb8d9e..295ef5cf 100644 --- a/electron/src/squirrelhooks.js +++ b/electron/src/squirrelhooks.js @@ -3,7 +3,7 @@ const spawn = require('child_process').spawn; const app = require('electron').app; function run_update_exe(args, done) { - const updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe'); + const updateExe = path.resolve(path.dirname(process.execPath), 'Update.exe'); spawn(updateExe, args, { detached: true }).on('close', done); From 3f3772463b4c304d6d790b54a5c2d825e900facb Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 19:04:00 +0000 Subject: [PATCH 006/168] bump react dep --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 34df1c4e..1d2bb886 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", "matrix-js-sdk": "0.7.2", - "matrix-react-sdk": "0.8.3", + "matrix-react-sdk": "0.8.4", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From 0129da4dd6990e965a5572073c05ea4e767f7dc3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 19:07:30 +0000 Subject: [PATCH 007/168] Prepare changelog for v0.9.5 --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5427b8dc..265cbe80 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +Changes in [0.9.5](https://github.com/vector-im/riot-web/releases/tag/v0.9.5) (2016-12-24) +========================================================================================== +[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.4...v0.9.5) + + * make electron send email validation URLs with a nextlink of riot.im rather than file:/// + * add gnu-tar to debian electron build deps + * fix win32 shortcut in start menu + Changes in [0.9.4](https://github.com/vector-im/riot-web/releases/tag/v0.9.4) (2016-12-22) ========================================================================================== [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.3...v0.9.4) From 747408871d71c8d020672e39140725c136a3b709 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 24 Dec 2016 19:07:31 +0000 Subject: [PATCH 008/168] v0.9.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1d2bb886..02e280a5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "riot-web", "productName": "Riot", "main": "electron/src/electron-main.js", - "version": "0.9.4", + "version": "0.9.5", "description": "A feature-rich client for Matrix.org", "author": "Vector Creations Ltd.", "repository": { From bacb284415a90811fbad2bae74b1921bf92a8fd9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:01:28 +0000 Subject: [PATCH 009/168] basic jig for SASS-based themed CSS (one bundle per theme) --- package.json | 6 ++++-- src/skins/vector/css/{common.css => _common.scss} | 0 .../{ContextualMenu.css => _ContextualMenu.scss} | 0 .../structures/{CreateRoom.css => _CreateRoom.scss} | 0 .../structures/{FilePanel.css => _FilePanel.scss} | 0 .../structures/{MatrixChat.css => _MatrixChat.scss} | 0 .../{NotificationPanel.css => _NotificationPanel.scss} | 0 .../structures/{RoomStatusBar.css => _RoomStatusBar.scss} | 0 .../structures/{RoomView.css => _RoomView.scss} | 0 .../structures/{SearchBox.css => _SearchBox.scss} | 0 .../structures/{UploadBar.css => _UploadBar.scss} | 0 .../structures/{UserSettings.css => _UserSettings.scss} | 0 .../structures/login/{Login.css => _Login.scss} | 0 .../views/avatars/{BaseAvatar.css => _BaseAvatar.scss} | 0 .../{ChatInviteDialog.css => _ChatInviteDialog.scss} | 0 ...EncryptedEventDialog.css => _EncryptedEventDialog.scss} | 0 ...SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} | 0 .../{AddressSelector.css => _AddressSelector.scss} | 0 .../views/elements/{AddressTile.css => _AddressTile.scss} | 0 .../{DirectorySearchBox.css => _DirectorySearchBox.scss} | 0 ...erEventListSummary.css => _MemberEventListSummary.scss} | 0 .../views/elements/{ProgressBar.css => _ProgressBar.scss} | 0 .../views/elements/{RichText.css => _RichText.scss} | 0 .../views/login/{ServerConfig.css => _ServerConfig.scss} | 0 .../views/messages/{MImageBody.css => _MImageBody.scss} | 0 .../views/messages/{MNoticeBody.css => _MNoticeBody.scss} | 0 .../views/messages/{MTextBody.css => _MTextBody.scss} | 0 .../messages/{TextualEvent.css => _TextualEvent.scss} | 0 .../views/messages/{UnknownBody.css => _UnknownBody.scss} | 0 .../views/rooms/{Autocomplete.css => _Autocomplete.scss} | 0 .../views/rooms/{EntityTile.css => _EntityTile.scss} | 0 .../views/rooms/{EventTile.css => _EventTile.scss} | 0 .../{LinkPreviewWidget.css => _LinkPreviewWidget.scss} | 0 .../rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} | 0 .../views/rooms/{MemberInfo.css => _MemberInfo.scss} | 0 .../views/rooms/{MemberList.css => _MemberList.scss} | 0 .../rooms/{MessageComposer.css => _MessageComposer.scss} | 0 .../views/rooms/{PresenceLabel.css => _PresenceLabel.scss} | 0 .../views/rooms/{RoomHeader.css => _RoomHeader.scss} | 0 .../views/rooms/{RoomList.css => _RoomList.scss} | 0 .../rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss} | 0 .../views/rooms/{RoomSettings.css => _RoomSettings.scss} | 0 .../views/rooms/{RoomTile.css => _RoomTile.scss} | 0 ...SearchableEntityList.css => _SearchableEntityList.scss} | 0 .../rooms/{TabCompleteBar.css => _TabCompleteBar.scss} | 0 ...TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} | 0 .../settings/{DevicesPanel.css => _DevicesPanel.scss} | 0 .../{IntegrationsManager.css => _IntegrationsManager.scss} | 0 .../views/voip/{CallView.css => _CallView.scss} | 0 .../voip/{IncomingCallbox.css => _IncomingCallbox.scss} | 0 .../views/voip/{VideoView.css => _VideoView.scss} | 0 src/skins/vector/css/themes/dark.scss | 7 +++++++ src/skins/vector/css/themes/light.scss | 4 ++++ src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} | 0 .../{CompatibilityPage.css => _CompatibilityPage.scss} | 0 .../structures/{LeftPanel.css => _LeftPanel.scss} | 0 .../structures/{RightPanel.css => _RightPanel.scss} | 0 .../structures/{RoomDirectory.css => _RoomDirectory.scss} | 0 .../structures/{RoomSubList.css => _RoomSubList.scss} | 0 .../structures/{ViewSource.css => _ViewSource.scss} | 0 .../{MessageContextMenu.css => _MessageContextMenu.scss} | 0 ...eContextMenu.css => _NotificationStateContextMenu.scss} | 0 .../{RoomTagContextMenu.css => _RoomTagContextMenu.scss} | 0 .../dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} | 0 .../{NetworkDropdown.css => _NetworkDropdown.scss} | 0 .../views/elements/{ImageView.css => _ImageView.scss} | 0 .../views/elements/{Spinner.css => _Spinner.scss} | 0 .../globals/{GuestWarningBar.css => _GuestWarningBar.scss} | 0 .../globals/{MatrixToolbar.css => _MatrixToolbar.scss} | 0 .../{MessageTimestamp.css => _MessageTimestamp.scss} | 0 .../messages/{SenderProfile.css => _SenderProfile.scss} | 0 .../rooms/{RoomDropTarget.css => _RoomDropTarget.scss} | 0 .../views/rooms/{RoomTooltip.css => _RoomTooltip.scss} | 0 .../views/rooms/{SearchBar.css => _SearchBar.scss} | 0 .../settings/{Notifications.css => _Notifications.scss} | 0 src/vector/index.js | 2 +- webpack.config.js | 1 + 77 files changed, 17 insertions(+), 3 deletions(-) rename src/skins/vector/css/{common.css => _common.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{ContextualMenu.css => _ContextualMenu.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{CreateRoom.css => _CreateRoom.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{FilePanel.css => _FilePanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{MatrixChat.css => _MatrixChat.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{NotificationPanel.css => _NotificationPanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{RoomStatusBar.css => _RoomStatusBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{RoomView.css => _RoomView.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{SearchBox.css => _SearchBox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{UploadBar.css => _UploadBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/{UserSettings.css => _UserSettings.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/structures/login/{Login.css => _Login.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/avatars/{BaseAvatar.css => _BaseAvatar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{ChatInviteDialog.css => _ChatInviteDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{EncryptedEventDialog.css => _EncryptedEventDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressSelector.css => _AddressSelector.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressTile.css => _AddressTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{DirectorySearchBox.css => _DirectorySearchBox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{MemberEventListSummary.css => _MemberEventListSummary.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{ProgressBar.css => _ProgressBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/elements/{RichText.css => _RichText.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/login/{ServerConfig.css => _ServerConfig.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MImageBody.css => _MImageBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MNoticeBody.css => _MNoticeBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{MTextBody.css => _MTextBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{TextualEvent.css => _TextualEvent.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/messages/{UnknownBody.css => _UnknownBody.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{Autocomplete.css => _Autocomplete.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EntityTile.css => _EntityTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EventTile.css => _EventTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{LinkPreviewWidget.css => _LinkPreviewWidget.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberInfo.css => _MemberInfo.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberList.css => _MemberList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MessageComposer.css => _MessageComposer.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{PresenceLabel.css => _PresenceLabel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomHeader.css => _RoomHeader.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomList.css => _RoomList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomSettings.css => _RoomSettings.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomTile.css => _RoomTile.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{SearchableEntityList.css => _SearchableEntityList.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TabCompleteBar.css => _TabCompleteBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/settings/{DevicesPanel.css => _DevicesPanel.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/settings/{IntegrationsManager.css => _IntegrationsManager.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{CallView.css => _CallView.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{IncomingCallbox.css => _IncomingCallbox.scss} (100%) rename src/skins/vector/css/matrix-react-sdk/views/voip/{VideoView.css => _VideoView.scss} (100%) create mode 100644 src/skins/vector/css/themes/dark.scss create mode 100644 src/skins/vector/css/themes/light.scss rename src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} (100%) rename src/skins/vector/css/vector-web/structures/{CompatibilityPage.css => _CompatibilityPage.scss} (100%) rename src/skins/vector/css/vector-web/structures/{LeftPanel.css => _LeftPanel.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RightPanel.css => _RightPanel.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RoomDirectory.css => _RoomDirectory.scss} (100%) rename src/skins/vector/css/vector-web/structures/{RoomSubList.css => _RoomSubList.scss} (100%) rename src/skins/vector/css/vector-web/structures/{ViewSource.css => _ViewSource.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{MessageContextMenu.css => _MessageContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{NotificationStateContextMenu.css => _NotificationStateContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/context_menus/{RoomTagContextMenu.css => _RoomTagContextMenu.scss} (100%) rename src/skins/vector/css/vector-web/views/dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} (100%) rename src/skins/vector/css/vector-web/views/directory/{NetworkDropdown.css => _NetworkDropdown.scss} (100%) rename src/skins/vector/css/vector-web/views/elements/{ImageView.css => _ImageView.scss} (100%) rename src/skins/vector/css/vector-web/views/elements/{Spinner.css => _Spinner.scss} (100%) rename src/skins/vector/css/vector-web/views/globals/{GuestWarningBar.css => _GuestWarningBar.scss} (100%) rename src/skins/vector/css/vector-web/views/globals/{MatrixToolbar.css => _MatrixToolbar.scss} (100%) rename src/skins/vector/css/vector-web/views/messages/{MessageTimestamp.css => _MessageTimestamp.scss} (100%) rename src/skins/vector/css/vector-web/views/messages/{SenderProfile.css => _SenderProfile.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{RoomDropTarget.css => _RoomDropTarget.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{RoomTooltip.css => _RoomTooltip.scss} (100%) rename src/skins/vector/css/vector-web/views/rooms/{SearchBar.css => _SearchBar.scss} (100%) rename src/skins/vector/css/vector-web/views/settings/{Notifications.css => _Notifications.scss} (100%) diff --git a/package.json b/package.json index 3f9f46e2..c657aad6 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:config": "cpx config.json webapp/", "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch", + "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", @@ -44,7 +44,7 @@ "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css", + "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", "clean": "rimraf build lib webapp electron/dist", @@ -113,11 +113,13 @@ "karma-webpack": "^1.7.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", + "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", "react-addons-perf": "^15.4.0", "react-addons-test-utils": "^15.4.0", "rimraf": "^2.4.3", + "sass-loader": "^4.1.1", "source-map-loader": "^0.1.5", "webpack": "^1.12.14", "webpack-dev-server": "^1.16.2" diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/_common.scss similarity index 100% rename from src/skins/vector/css/common.css rename to src/skins/vector/css/_common.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css rename to src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css rename to src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css rename to src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css rename to src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css rename to src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/RoomView.css rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css rename to src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css rename to src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css rename to src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/structures/login/Login.css rename to src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css rename to src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css rename to src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css rename to src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css rename to src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css rename to src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css rename to src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss similarity index 100% rename from src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css rename to src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss new file mode 100644 index 00000000..19ab2cde --- /dev/null +++ b/src/skins/vector/css/themes/dark.scss @@ -0,0 +1,7 @@ +// typical text (dark-on-white in light skin) +$primary-fg-color: #dddddd; +$primary-bg-color: #2d2d2d; + +// button UI (white-on-green in light skin) + +@import "../_components" \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss new file mode 100644 index 00000000..e0ad84f6 --- /dev/null +++ b/src/skins/vector/css/themes/light.scss @@ -0,0 +1,4 @@ +$primary-fg-color: #454545; +$primary-bg-color: #ffffff; + +@import "../_components" \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/_fonts.scss similarity index 100% rename from src/skins/vector/css/vector-web/fonts.css rename to src/skins/vector/css/vector-web/_fonts.scss diff --git a/src/skins/vector/css/vector-web/structures/CompatibilityPage.css b/src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/CompatibilityPage.css rename to src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/LeftPanel.css rename to src/skins/vector/css/vector-web/structures/_LeftPanel.scss diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/_RightPanel.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RightPanel.css rename to src/skins/vector/css/vector-web/structures/_RightPanel.scss diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RoomDirectory.css rename to src/skins/vector/css/vector-web/structures/_RoomDirectory.scss diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/RoomSubList.css rename to src/skins/vector/css/vector-web/structures/_RoomSubList.scss diff --git a/src/skins/vector/css/vector-web/structures/ViewSource.css b/src/skins/vector/css/vector-web/structures/_ViewSource.scss similarity index 100% rename from src/skins/vector/css/vector-web/structures/ViewSource.css rename to src/skins/vector/css/vector-web/structures/_ViewSource.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css rename to src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss diff --git a/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css b/src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css rename to src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css rename to src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/elements/ImageView.css rename to src/skins/vector/css/vector-web/views/elements/_ImageView.scss diff --git a/src/skins/vector/css/vector-web/views/elements/Spinner.css b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/elements/Spinner.css rename to src/skins/vector/css/vector-web/views/elements/_Spinner.scss diff --git a/src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css rename to src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css rename to src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss diff --git a/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css b/src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css rename to src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss diff --git a/src/skins/vector/css/vector-web/views/messages/SenderProfile.css b/src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/messages/SenderProfile.css rename to src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css rename to src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css rename to src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss diff --git a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/rooms/SearchBar.css rename to src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss similarity index 100% rename from src/skins/vector/css/vector-web/views/settings/Notifications.css rename to src/skins/vector/css/vector-web/views/settings/_Notifications.scss diff --git a/src/vector/index.js b/src/vector/index.js index 8231950b..96c6a971 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/components.css'); +require('../../build/themes/light.css'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 3500fedc..1c408b70 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,7 @@ module.exports = { { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, // css-raw-loader loads CSS but doesn't try to treat url()s as require()s { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, + { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From c5fa84cd28e7e0dcd389d98fd307728e0e2d896e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:02:05 +0000 Subject: [PATCH 010/168] autogenerate the _components.scss index --- src/skins/vector/css/rethemendex.sh | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100755 src/skins/vector/css/rethemendex.sh diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh new file mode 100755 index 00000000..27c47224 --- /dev/null +++ b/src/skins/vector/css/rethemendex.sh @@ -0,0 +1,8 @@ +#!/bin/bash + +echo "// autogenerated by rethemendex.sh" > _components.scss + +for i in `find */* -iname _\*.scss`; +do + echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss +done From 33f0eaada0b6348305ab86b4f6557ae344dc42c2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 02:02:23 +0000 Subject: [PATCH 011/168] autogen _components.css --- src/skins/vector/css/_components.scss | 72 +++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 src/skins/vector/css/_components.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss new file mode 100644 index 00000000..1106f249 --- /dev/null +++ b/src/skins/vector/css/_components.scss @@ -0,0 +1,72 @@ +// autogenerated by rethemendex.sh +@import "matrix-react-sdk/structures/_ContextualMenu"; +@import "matrix-react-sdk/structures/_CreateRoom"; +@import "matrix-react-sdk/structures/_FilePanel"; +@import "matrix-react-sdk/structures/_MatrixChat"; +@import "matrix-react-sdk/structures/_NotificationPanel"; +@import "matrix-react-sdk/structures/_RoomStatusBar"; +@import "matrix-react-sdk/structures/_RoomView"; +@import "matrix-react-sdk/structures/_SearchBox"; +@import "matrix-react-sdk/structures/_UploadBar"; +@import "matrix-react-sdk/structures/_UserSettings"; +@import "matrix-react-sdk/structures/login/_Login"; +@import "matrix-react-sdk/views/avatars/_BaseAvatar"; +@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog"; +@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog"; +@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog"; +@import "matrix-react-sdk/views/elements/_AddressSelector"; +@import "matrix-react-sdk/views/elements/_AddressTile"; +@import "matrix-react-sdk/views/elements/_DirectorySearchBox"; +@import "matrix-react-sdk/views/elements/_MemberEventListSummary"; +@import "matrix-react-sdk/views/elements/_ProgressBar"; +@import "matrix-react-sdk/views/elements/_RichText"; +@import "matrix-react-sdk/views/login/_ServerConfig"; +@import "matrix-react-sdk/views/messages/_MImageBody"; +@import "matrix-react-sdk/views/messages/_MNoticeBody"; +@import "matrix-react-sdk/views/messages/_MTextBody"; +@import "matrix-react-sdk/views/messages/_TextualEvent"; +@import "matrix-react-sdk/views/messages/_UnknownBody"; +@import "matrix-react-sdk/views/rooms/_Autocomplete"; +@import "matrix-react-sdk/views/rooms/_EntityTile"; +@import "matrix-react-sdk/views/rooms/_EventTile"; +@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget"; +@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo"; +@import "matrix-react-sdk/views/rooms/_MemberInfo"; +@import "matrix-react-sdk/views/rooms/_MemberList"; +@import "matrix-react-sdk/views/rooms/_MessageComposer"; +@import "matrix-react-sdk/views/rooms/_PresenceLabel"; +@import "matrix-react-sdk/views/rooms/_RoomHeader"; +@import "matrix-react-sdk/views/rooms/_RoomList"; +@import "matrix-react-sdk/views/rooms/_RoomPreviewBar"; +@import "matrix-react-sdk/views/rooms/_RoomSettings"; +@import "matrix-react-sdk/views/rooms/_RoomTile"; +@import "matrix-react-sdk/views/rooms/_SearchableEntityList"; +@import "matrix-react-sdk/views/rooms/_TabCompleteBar"; +@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar"; +@import "matrix-react-sdk/views/settings/_DevicesPanel"; +@import "matrix-react-sdk/views/settings/_IntegrationsManager"; +@import "matrix-react-sdk/views/voip/_CallView"; +@import "matrix-react-sdk/views/voip/_IncomingCallbox"; +@import "matrix-react-sdk/views/voip/_VideoView"; +@import "vector-web/_fonts"; +@import "vector-web/structures/_CompatibilityPage"; +@import "vector-web/structures/_LeftPanel"; +@import "vector-web/structures/_RightPanel"; +@import "vector-web/structures/_RoomDirectory"; +@import "vector-web/structures/_RoomSubList"; +@import "vector-web/structures/_ViewSource"; +@import "vector-web/views/context_menus/_MessageContextMenu"; +@import "vector-web/views/context_menus/_NotificationStateContextMenu"; +@import "vector-web/views/context_menus/_RoomTagContextMenu"; +@import "vector-web/views/dialogs/_ChangelogDialog"; +@import "vector-web/views/directory/_NetworkDropdown"; +@import "vector-web/views/elements/_ImageView"; +@import "vector-web/views/elements/_Spinner"; +@import "vector-web/views/globals/_GuestWarningBar"; +@import "vector-web/views/globals/_MatrixToolbar"; +@import "vector-web/views/messages/_MessageTimestamp"; +@import "vector-web/views/messages/_SenderProfile"; +@import "vector-web/views/rooms/_RoomDropTarget"; +@import "vector-web/views/rooms/_RoomTooltip"; +@import "vector-web/views/rooms/_SearchBar"; +@import "vector-web/views/settings/_Notifications"; From c6beaa16318d005f0548f19f2dc956e17c60f1de Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Dec 2016 04:04:43 +0000 Subject: [PATCH 012/168] initial stab at an official dark theme via the magic of SASS. SVGs are all broken, and some of the more exotic colours haven't been updated. There's been no attempt to use SASS to remove duplication from the CSS yet. no attempt to switch it at runtime yet. --- src/skins/vector/css/_common.scss | 51 +++++++------- src/skins/vector/css/_components.scss | 1 + .../structures/_ContextualMenu.scss | 14 ++-- .../structures/_CreateRoom.scss | 4 +- .../structures/_FilePanel.scss | 10 +-- .../structures/_MatrixChat.scss | 4 +- .../structures/_NotificationPanel.scss | 7 +- .../structures/_RoomStatusBar.scss | 16 ++--- .../structures/_RoomView.scss | 24 +++---- .../structures/_UploadBar.scss | 6 +- .../structures/_UserSettings.scss | 6 +- .../structures/login/_Login.scss | 14 ++-- .../views/avatars/_BaseAvatar.scss | 2 +- .../views/dialogs/_ChatInviteDialog.scss | 4 +- .../views/dialogs/_EncryptedEventDialog.scss | 6 +- .../views/dialogs/_SetDisplayNameDialog.scss | 6 +- .../views/elements/_AddressSelector.scss | 16 ++--- .../views/elements/_AddressTile.scss | 8 +-- .../views/elements/_DirectorySearchBox.scss | 2 +- .../elements/_MemberEventListSummary.scss | 2 +- .../views/elements/_RichText.scss | 6 +- .../views/login/_ServerConfig.scss | 2 +- .../views/messages/_MImageBody.scss | 8 +-- .../views/rooms/_Autocomplete.scss | 12 ++-- .../views/rooms/_EntityTile.scss | 6 +- .../views/rooms/_EventTile.scss | 34 +++++----- .../views/rooms/_MemberDeviceInfo.scss | 14 ++-- .../views/rooms/_MemberInfo.scss | 4 +- .../views/rooms/_MemberList.scss | 10 +-- .../views/rooms/_MessageComposer.scss | 10 +-- .../views/rooms/_RoomHeader.scss | 16 ++--- .../views/rooms/_RoomPreviewBar.scss | 4 +- .../views/rooms/_RoomSettings.scss | 18 ++--- .../views/rooms/_RoomTile.scss | 14 ++-- .../views/rooms/_SearchableEntityList.scss | 10 +-- .../views/rooms/_TabCompleteBar.scss | 6 +- .../views/rooms/_TopUnreadMessagesBar.scss | 2 +- .../views/settings/_IntegrationsManager.scss | 2 +- .../views/voip/_CallView.scss | 4 +- .../views/voip/_IncomingCallbox.scss | 4 +- src/skins/vector/css/rethemendex.sh | 2 +- src/skins/vector/css/themes/_base.scss | 68 +++++++++++++++++++ src/skins/vector/css/themes/dark.scss | 66 +++++++++++++++++- src/skins/vector/css/themes/light.scss | 6 +- .../vector-web/structures/_RightPanel.scss | 10 +-- .../vector-web/structures/_RoomDirectory.scss | 6 +- .../vector-web/structures/_RoomSubList.scss | 36 +++++----- .../context_menus/_RoomTagContextMenu.scss | 2 +- .../views/directory/_NetworkDropdown.scss | 6 +- .../vector-web/views/elements/_ImageView.scss | 8 +-- .../views/globals/_GuestWarningBar.scss | 6 +- .../views/globals/_MatrixToolbar.scss | 6 +- .../views/rooms/_RoomDropTarget.scss | 6 +- .../vector-web/views/rooms/_RoomTooltip.scss | 12 ++-- .../vector-web/views/rooms/_SearchBar.scss | 14 ++-- .../views/settings/_Notifications.scss | 2 +- src/vector/index.js | 2 +- 57 files changed, 388 insertions(+), 259 deletions(-) create mode 100644 src/skins/vector/css/themes/_base.scss diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index bb00bbd8..e81ea2fa 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -29,7 +29,8 @@ body { Arial here. */ font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 15px; - color: #454545; + background-color: $primary-bg-color; + color: $primary-fg-color; border: 0px; margin: 0px; /* This should render the fonts the same accross browsers */ @@ -41,7 +42,7 @@ div.error { } h2 { - color: #454545; + color: $primary-fg-color; font-weight: 400; font-size: 18px; margin-top: 16px; @@ -51,7 +52,7 @@ h2 { a:hover, a:link, a:visited { - color: #76cfa6; + color: $accent-color; } input[type=text].error, input[type=password].error { @@ -59,7 +60,7 @@ input[type=text].error, input[type=password].error { } input[type=text]:focus, textarea:focus { - border: 1px solid #76CFA6; + border: 1px solid $accent-color; outline: none; box-shadow: none; } @@ -148,8 +149,8 @@ textarea { } .mx_Dialog { - background-color: #fff; - color: #747474; + background-color: $primary-bg-color; + color: $light-fg-color; z-index: 4010; font-weight: 300; font-size: 15px; @@ -190,7 +191,7 @@ textarea { .mx_Dialog_content { margin: 24px 58px 68px 0; font-size: 14px; - color: #4a4a4a; + color: $primary-fg-color; word-wrap: break-word; } @@ -202,7 +203,7 @@ textarea { border: 0px; height: 36px; border-radius: 40px; - border: solid 1px #76cfa6; + border: solid 1px $accent-color; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; @@ -212,26 +213,26 @@ textarea { padding-right: 1.5em; outline: none; cursor: pointer; - color: #76cfa6; - background-color: #fff; + color: $accent-color; + background-color: $primary-bg-color; /* align images in buttons (eg spinners) */ vertical-align: middle; } .mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; } .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger { - background-color: #ff0064; - border: solid 1px #ff0064; + background-color: $warning-color; + border: solid 1px $warning-color; } .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled { - background-color: #777777; - border: solid 1px #777777; + background-color: $light-fg-color; + border: solid 1px $light-fg-color; opacity: 0.7; } @@ -241,11 +242,11 @@ textarea { font-weight: bold; font-size: 22px; line-height: 1.4; - color: #454545; + color: $primary-fg-color; } .mx_Dialog_title.danger { - color: #ff0064; + color: $warning-color; } .mx_TextInputDialog_label { @@ -256,10 +257,10 @@ textarea { .mx_TextInputDialog_input { font-size: 15px; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; } .mx_emojione { @@ -268,19 +269,19 @@ textarea { } ::-moz-selection { - background-color: #76CFA6; + background-color: $accent-color; color: white; } ::selection { - background-color: #76CFA6; + background-color: $accent-color; color: white; } /** green button with rounded corners */ .mx_textButton { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; border-radius: 17px; text-align: center; padding-left: 1em; diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 1106f249..532e0a36 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -1,4 +1,5 @@ // autogenerated by rethemendex.sh +@import "_common"; @import "matrix-react-sdk/structures/_ContextualMenu"; @import "matrix-react-sdk/structures/_CreateRoom"; @import "matrix-react-sdk/structures/_FilePanel"; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss index d317363d..d3e73a9a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss @@ -30,10 +30,10 @@ limitations under the License. } .mx_ContextualMenu { - border: solid 1px rgba(187, 187, 187, 0.5); + border: solid 1px $menu-border-color; border-radius: 4px; - background-color: #f6f6f6; - color: #4a4a4a; + background-color: $menu-bg-color; + color: $primary-fg-color; position: absolute; padding: 6px; font-size: 14px; @@ -51,7 +51,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-left: 8px solid rgba(187, 187, 187, 0.5); + border-left: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } @@ -60,7 +60,7 @@ limitations under the License. width: 0; height: 0; border-top: 7px solid transparent; - border-left: 7px solid #f6f6f6; + border-left: 7px solid $menu-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; @@ -78,7 +78,7 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid rgba(187, 187, 187, 0.5); + border-right: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } @@ -87,7 +87,7 @@ limitations under the License. width: 0; height: 0; border-top: 7px solid transparent; - border-right: 7px solid #f6f6f6; + border-right: 7px solid $menu-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss index 88804409..2be19352 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss @@ -18,13 +18,13 @@ limitations under the License. width: 960px; margin-left: auto; margin-right: auto; - color: #4a4a4a; + color: $primary-fg-color; } .mx_CreateRoom input, .mx_CreateRoom textarea { border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; padding: 9px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index fca53b1d..2f4a00ad 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -58,12 +58,12 @@ limitations under the License. .mx_FilePanel .mx_EventTile .mx_MImageBody_download { display: flex; font-size: 14px; - color: #acacac; + color: $event-timestamp-color; } .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink { flex: 1 1 auto; - color: #747474; + color: $light-fg-color; } .mx_FilePanel .mx_EventTile .mx_MImageBody_size { @@ -90,7 +90,7 @@ limitations under the License. padding: 0px; font-size: 11px; opacity: 1.0; - color: #acacac; + color: $event-timestamp-color; } .mx_FilePanel .mx_EventTile .mx_MessageTimestamp { @@ -100,7 +100,7 @@ limitations under the License. position: initial; font-size: 11px; opacity: 1.0; - color: #acacac; + color: $event-timestamp-color; } /* Overrides for the wrappers around the body tile */ @@ -111,7 +111,7 @@ limitations under the License. } .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line { - background-color: #fff; + background-color: $primary-bg-color; } .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index f1cc7d4a..5587a609 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -91,7 +91,7 @@ limitations under the License. -webkit-order: 1; order: 1; - background-color: #eaf5f0; + background-color: $secondary-accent-color; -webkit-flex: 0 0 235px; flex: 0 0 235px; @@ -111,7 +111,7 @@ limitations under the License. padding-left: 20px; padding-right: 22px; - background-color: #fff; + background-color: $primary-bg-color; -webkit-flex: 1; flex: 1; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index 83b0a033..06dd92f3 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -51,7 +51,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile_roomName a { - color: #4a4a4a; + color: $primary-fg-color; } .mx_NotificationPanel .mx_EventTile_avatar { @@ -61,8 +61,7 @@ limitations under the License. .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp { - color: #000; - opacity: 0.3; + color: $primary-fg-color; font-size: 12px; display: inline; padding-left: 0px; @@ -94,7 +93,7 @@ limitations under the License. } .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line { - background-color: #fff; + background-color: $primary-bg-color; } .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index ef0b69c4..d0ac5a60 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -36,7 +36,7 @@ limitations under the License. } .mx_RoomStatusBar_placeholderIndicator span { - color: #4a4a4a; + color: $primary-fg-color; opacity: 0.5; position: relative; top: -4px; @@ -76,7 +76,7 @@ limitations under the License. .mx_RoomStatusBar_unreadMessagesBar { padding-top: 10px; - color: #ff0064; + color: $warning-color; cursor: pointer; } @@ -93,29 +93,29 @@ limitations under the License. } .mx_RoomStatusBar_connectionLostBar_title { - color: #ff0064; + color: $warning-color; } .mx_RoomStatusBar_connectionLostBar_desc { - color: #454545; + color: $primary-fg-color; font-size: 13px; opacity: 0.5; } .mx_RoomStatusBar_resend_link { - color: #454545 ! important; + color: $primary-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } .mx_RoomStatusBar_tabCompleteBar { padding-top: 10px; - color: #4a4a4a; + color: $primary-fg-color; } .mx_RoomStatusBar_typingBar { padding-top: 10px; - color: #4a4a4a; + color: $primary-fg-color; opacity: 0.5; overflow-y: hidden; display: block; @@ -135,7 +135,7 @@ limitations under the License. .mx_RoomStatusBar_tabCompleteEol { flex: 0 0 auto; -webkit-flex: 0 0 auto; - color: #76CFA6; + color: $accent-color; } .mx_RoomStatusBar_tabCompleteEol object { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index c3f7ceed..182d690c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -89,7 +89,7 @@ limitations under the License. margin: auto; overflow: auto; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; -webkit-flex: 0 0 auto; flex: 0 0 auto; @@ -158,7 +158,7 @@ limitations under the License. margin-bottom: 8px; margin-left: 63px; padding-bottom: 6px; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_RoomView_invitePrompt { @@ -185,8 +185,8 @@ li.mx_RoomView_myReadMarker_container { } hr.mx_RoomView_myReadMarker { - border-top: solid 1px #76cfa6; - border-bottom: solid 1px #76cfa6; + border-top: solid 1px $accent-color; + border-bottom: solid 1px $accent-color; margin-top: 0px; position: relative; top: 5px; @@ -212,16 +212,16 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusAreaBox_line { margin-left: 65px; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; height: 1px; } .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner { - background-color: #fff; + background-color: $primary-bg-color; } .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename { - color: #fff; + color: $accent-fg-color; opacity: 1.0; } @@ -234,8 +234,8 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_inCall .mx_RoomView_statusAreaBox { - background-color: #76CFA6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; position: relative; } @@ -272,13 +272,13 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_ongoingConfCallNotification { width: 100%; text-align: center; - background-color: #ff0064; - color: #fff; + background-color: $warning-color; + color: $accent-fg-color; font-weight: bold; padding: 6px 0; cursor: pointer; } .mx_RoomView_ongoingConfCallNotification a { - color: #fff ! important; + color: $accent-fg-color ! important; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss index b489e132..d76c8166 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss @@ -26,7 +26,7 @@ limitations under the License. } .mx_UploadBar_uploadProgressInner { - background-color: #76cfa6; + background-color: $accent-color; height: 5px; } @@ -34,7 +34,7 @@ limitations under the License. margin-top: 5px; margin-left: 65px; opacity: 0.5; - color: #4a4a4a; + color: $primary-fg-color; } .mx_UploadBar_uploadIcon { @@ -57,5 +57,5 @@ limitations under the License. float: right; margin-top: 5px; margin-right: 30px; - color: #76cfa6; + color: $accent-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 427369a5..6ba1002b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -84,8 +84,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 16px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; padding: 7px; @@ -95,7 +95,7 @@ limitations under the License. } .mx_UserSettings_button.danger { - background-color: #ff0064; + background-color: $warning-color; } .mx_UserSettings_section { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 0f610b25..5f4164e8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -32,7 +32,7 @@ limitations under the License. } .mx_Login h2 { - color: #4a4a4a; + color: $primary-fg-color; font-weight: 300; margin-top: 32px; margin-bottom: 20px; @@ -53,7 +53,7 @@ limitations under the License. .mx_Login_field { width: 100%; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; padding: 9px; @@ -75,9 +75,9 @@ limitations under the License. border-radius: 40px; height: 40px; border: 0px; - background-color: #76cfa6; + background-color: $accent-color; font-size: 15px; - color: #fff; + color: $accent-fg-color; } .mx_Login_label { @@ -99,7 +99,7 @@ limitations under the License. } .mx_Login_create:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_links { @@ -112,7 +112,7 @@ limitations under the License. } .mx_Login_links a:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_prompt { @@ -127,7 +127,7 @@ limitations under the License. } .mx_Login_forgot:link { - color: #4a4a4a; + color: $primary-fg-color; } .mx_Login_loader { diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss index 901a2959..d481e5c1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss @@ -21,7 +21,7 @@ limitations under the License. .mx_BaseAvatar_initial { position: absolute; z-index: 1; - color: #fff; + color: $avatar-initial-color; text-align: center; speak: none; pointer-events: none; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss index aa1dced8..6bf9adce 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss @@ -36,7 +36,7 @@ limitations under the License. .mx_ChatInviteDialog_inputContainer { border-radius: 3px; - border: solid 1px #f0f0f0; + border: solid 1px $input-border-color; line-height: 36px; padding-left: 4px; padding-right: 4px; @@ -49,7 +49,7 @@ limitations under the License. .mx_ChatInviteDialog_error { position: absolute; - color: #ff0064; + color: $warning-color; line-height: 36px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss index 5e72d7f8..cbc0195c 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss @@ -24,7 +24,7 @@ limitations under the License. border: 0px; height: 36px; border-radius: 40px; - border: solid 1px #76cfa6; + border: solid 1px $accent-color; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; @@ -34,6 +34,6 @@ limitations under the License. padding-right: 1.5em; outline: none; cursor: pointer; - color: #76cfa6; - background-color: #fff; + color: $accent-color; + background-color: $primary-bg-color; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss index 68409a80..2f0750ad 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss @@ -16,9 +16,9 @@ limitations under the License. .mx_SetDisplayNameDialog_input { border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; font-size: 15px; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss index aa0f8c6a..9871a7e8 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss @@ -16,13 +16,13 @@ limitations under the License. .mx_AddressSelector { position: absolute; - background-color: #fff; + background-color: $primary-bg-color; width: 485px; max-height: 116px; overflow-y: auto; border-radius: 3px; - background-color: #fff; - border: solid 1px #76cfa6; + background-color: $primary-bg-color; + border: solid 1px $accent-color; cursor: pointer; } @@ -31,15 +31,15 @@ limitations under the License. } .mx_AddressSelector_addressListElement .mx_AddressTile { - background-color: #fff; - border: solid 1px #fff; + background-color: $primary-bg-color; + border: solid 1px $primary-bg-color; } .mx_AddressSelector_addressListElement.mx_AddressSelector_selected { - background-color: #eaf5f0; /* selected colour */ + background-color: $selected-color; } .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile { - background-color: #eaf5f0; /* selected colour */ - border: solid 1px #eaf5f0; /* selected colour */ + background-color: $selected-color; + border: solid 1px $selected-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss index 76c0e603..59c0b68d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss @@ -18,9 +18,9 @@ limitations under the License. display: inline-block; border-radius: 3px; background-color: rgba(74, 73, 74, 0.1); - border: solid 1px #f0f0f0; + border: solid 1px $input-border-color; line-height: 26px; - color: #454545; + color: $primary-fg-color; font-size: 14px; font-weight: normal; margin-right: 4px; @@ -28,8 +28,8 @@ limitations under the License. .mx_AddressTile.mx_AddressTile_error { background-color: rgba(255, 0, 100, 0.1); - color: #ff0064; - border-color: #ff0064; + color: $warning-color; + border-color: $warning-color; } .mx_AddressTile_network { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index 3a0922bc..dd953ab9 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_DirectorySearchBox { position: relative; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; } .mx_DirectorySearchBox_container { diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss index b8197805..7d1b059b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss @@ -31,6 +31,6 @@ limitations under the License. } .mx_MemberEventListSummary_toggle { - color:#76cfa6; + color:$accent-color; cursor:pointer; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss index f0b3c046..72a4c0b7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss @@ -1,14 +1,14 @@ .mx_UserPill { color: white; - background-color: #76cfa6; + background-color: $accent-color; padding: 2px 8px; border-radius: 16px; } .mx_RoomPill { background-color: white; - color: #76cfa6; - border: 1px solid #76cfa6; + color: $accent-color; + border: 1px solid $accent-color; padding: 2px 8px; border-radius: 16px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss index 75cd4170..1ad195de 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss @@ -27,5 +27,5 @@ limitations under the License. opacity: 0.8; font-size: 13px; font-weight: 300; - color: #4a4a4a; + color: $primary-fg-color; } \ No newline at end of file diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss index 003ef103..83ae0616 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss @@ -22,18 +22,18 @@ limitations under the License. .mx_MImageBody_thumbnail { max-width: 100%; /* - background-color: #fff; - border: 2px solid #fff; + background-color: $primary-bg-color; + border: 2px solid $primary-bg-color; border-radius: 1px; */ } .mx_MImageBody_download { - color: #76cfa6; + color: $accent-color; } .mx_MImageBody_download a { - color: #76cfa6; + color: $accent-color; text-decoration: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 6d611b5e..9265d4dc 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -3,7 +3,7 @@ bottom: 0; z-index: 1000; width: 100%; - border: 1px solid #e5e5e5; + border: 1px solid $primary-hairline-color; background: white; border-bottom: none; border-radius: 4px 4px 0 0; @@ -12,7 +12,7 @@ } .mx_Autocomplete_ProviderSection { - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_Autocomplete_Completion_container_pill { @@ -28,7 +28,7 @@ user-select: none; cursor: pointer; align-items: center; - color: #4a4a4a; + color: $primary-fg-color; } .mx_Autocomplete_Completion_block * { @@ -42,7 +42,7 @@ user-select: none; cursor: pointer; align-items: center; - color: #4a4a4a; + color: $primary-fg-color; } .mx_Autocomplete_Completion_pill * { @@ -57,13 +57,13 @@ } .mx_Autocomplete_Completion.selected { - background: #f6f6f6; + background: $menu-bg-color; outline: none; } .mx_Autocomplete_provider_name { margin: 12px; - color: #454545; + color: $primary-fg-color; font-weight: 400; opacity: 0.4; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index e52ece77..2511f07d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_EntityTile { display: table-row; position: relative; - color: #454545; + color: $primary-fg-color; cursor: pointer; } @@ -77,12 +77,12 @@ limitations under the License. .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; - font-color: #454545; + font-color: $primary-fg-color; } .mx_EntityTile_invitePlaceholder .mx_EntityTile_name { font-style: italic; - font-color: #454545; + font-color: $primary-fg-color; } .mx_EntityTile_unavailable .mx_EntityTile_avatar, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index fd3f486b..a6b10e24 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -44,7 +44,7 @@ limitations under the License. } .mx_EventTile .mx_SenderProfile { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; display: block; /* anti-zalgo, with overflow hidden */ @@ -61,7 +61,7 @@ limitations under the License. display: block; visibility: hidden; white-space: nowrap; - color: #acacac; + color: $event-timestamp-color; font-size: 11px; left: 8px; position: absolute; @@ -93,20 +93,20 @@ limitations under the License. * TODO: ultimately we probably want some transition on here. */ .mx_EventTile_selected .mx_EventTile_line { - border-left: #76cfa6 5px solid; + border-left: $accent-color 5px solid; padding-left: 60px; - background-color: #f7f7f7; + background-color: $event-selected-color; } .mx_EventTile:hover .mx_EventTile_line, .mx_EventTile.menu .mx_EventTile_line { - background-color: #f7f7f7; + background-color: $event-selected-color; } .mx_EventTile_searchHighlight { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; border-radius: 5px; padding-left: 2px; padding-right: 2px; @@ -114,26 +114,26 @@ limitations under the License. } .mx_EventTile_searchHighlight a { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; } .mx_EventTile_encrypting { - color: #abddbc ! important; + color: $event-encrypting-color ! important; } .mx_EventTile_sending { - color: #ddd; + color: $event-sending-color; } .mx_EventTile_notSent { - color: #f44; + color: $event-notsent-color; } .mx_EventTile_highlight, .mx_EventTile_highlight .markdown-body { - color: #FF0064; + color: $warning-color; } .mx_EventTile_contextual { @@ -204,7 +204,7 @@ limitations under the License. } .mx_EventTile_readAvatarRemainder { - color: #acacac; + color: $event-timestamp-color; font-size: 11px; position: absolute; } @@ -244,10 +244,10 @@ limitations under the License. } .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: #76cfa5 5px solid; + border-left: $e2e-verified-color 5px solid; } .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: #e8bf37 5px solid; + border-left: $e2e-unverified-color 5px solid; } .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp, @@ -297,7 +297,7 @@ limitations under the License. } .mx_EventTile_content .markdown-body a { - color: #76cfa6; + color: $accent-color; } .mx_EventTile_content .markdown-body .hljs { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss index 53379ac4..f1584d4e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss @@ -20,8 +20,8 @@ limitations under the License. .mx_MemberDeviceInfo_textButton { - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; border-radius: 17px; text-align: center; padding-left: 1em; @@ -50,13 +50,13 @@ limitations under the License. } /* "Unblacklist" is too long for a regular button: make it wider and - reduce the padding. */ + reduce the padding. */ .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist, .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist { width: 8em; padding-left: 1em; padding-right: 1em; -} +} .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified, .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified, @@ -66,13 +66,13 @@ limitations under the License. } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified { - color: #76cfa5; + color: $e2e-verified-color; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified { - color: #e8bf37; + color: $e2e-unverified-color; } .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted { - color: #ba6363; + color: $e2e-warning-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 40b1524c..3b4b653e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -72,7 +72,7 @@ limitations under the License. font-color: #999999; font-size: 13px; position: relative; - background-color: #fff; + background-color: $primary-bg-color; } .mx_MemberInfo_buttons { @@ -82,7 +82,7 @@ limitations under the License. .mx_MemberInfo_field { cursor: pointer; font-size: 13px; - color: #76cfa6; + color: $accent-color; margin-left: 8px; line-height: 23px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 7d383606..3c7e3ec5 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -55,10 +55,10 @@ limitations under the License. .mx_MemberList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; margin-left: 3px; font-size: 14px; margin-bottom: 8px; @@ -66,13 +66,13 @@ limitations under the License. } .mx_MemberList_query::-moz-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; } .mx_MemberList_query::-webkit-input-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 14px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 842f8db6..e5ffd220 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -18,7 +18,7 @@ limitations under the License. max-width: 960px; vertical-align: middle; margin: auto; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; position: relative; } @@ -108,8 +108,8 @@ limitations under the License. -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; font-size: 14px; max-height: 120px; overflow: auto; @@ -120,11 +120,11 @@ limitations under the License. /* hack for FF as vertical alignment of custom placeholder text is broken */ .mx_MessageComposer_input textarea::-moz-placeholder { line-height: 100%; - color: #76cfa6; + color: $accent-color; opacity: 1.0; } .mx_MessageComposer_input textarea::-webkit-input-placeholder { - color: #76cfa6; + color: $accent-color; } .mx_MessageComposer_upload, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 056fa879..a26f12ee 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -63,10 +63,10 @@ limitations under the License. .mx_RoomHeader_textButton { height: 36px; - background-color: #76cfa6; + background-color: $accent-color; border-radius: 36px; margin-right: 8px; - color: #fff; + color: $accent-fg-color; line-height: 34px; margin-top: -2px; text-align: center; @@ -102,7 +102,7 @@ limitations under the License. .mx_RoomHeader_rightRow { margin-top: 4px; - background-color: #fff; + background-color: $primary-bg-color; display: flex; align-items: center; -webkit-box-ordinal-group: 3; @@ -120,7 +120,7 @@ limitations under the License. .mx_RoomHeader_simpleHeader { line-height: 70px; - color: #454545; + color: $primary-fg-color; font-size: 22px; font-weight: bold; overflow: hidden; @@ -138,7 +138,7 @@ limitations under the License. width: 100%; height: 31px; overflow: hidden; - color: #454545; + color: $primary-fg-color; font-weight: bold; font-size: 22px; padding-left: 19px; @@ -174,7 +174,7 @@ limitations under the License. } .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) { - color: #76cfa6; + color: $accent-color; } .mx_RoomHeader_placeholder { @@ -182,13 +182,13 @@ limitations under the License. } .mx_RoomHeader_editable { - border-bottom: 1px solid #c7c7c7 ! important; + border-bottom: 1px solid $strong-input-border-color ! important; min-width: 150px; cursor: text; } .mx_RoomHeader_editable:focus { - border-bottom: 1px solid #76CFA6 ! important; + border-bottom: 1px solid $accent-color ! important; outline: none; box-shadow: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 286a39f7..6b71f96d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -38,11 +38,11 @@ limitations under the License. } .mx_RoomPreviewBar_invite_text { - color: #454545; + color: $primary-fg-color; } .mx_RoomPreviewBar_join_text { - color: #ff0064; + color: $warning-color; } .mx_RoomPreviewBar_preview_text { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 6a3b1ac8..132c9792 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -24,10 +24,10 @@ limitations under the License. .mx_RoomSettings_integrationsButton_error { position: relative; height: 36px; - background-color: #76cfa6; + background-color: $accent-color; border-radius: 36px; margin-right: 8px; - color: #fff; + color: $accent-fg-color; line-height: 34px; text-align: center; float: right; @@ -47,8 +47,8 @@ limitations under the License. font-size: 10pt; line-height: 1.5em; border-radius: 5px; - background-color: #000; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; } .mx_RoomSettings_e2eIcon { @@ -174,7 +174,7 @@ limitations under the License. } .mx_RoomSettings_warning { - color: #ff0064; + color: $warning-color; font-weight: bold; margin-top: 8px; margin-bottom: 8px; @@ -182,13 +182,13 @@ limitations under the License. .mx_RoomSettings_editable { border: 0px; - border-bottom: 1px solid #c7c7c7; + border-bottom: 1px solid $strong-input-border-color; padding: 0px; min-width: 240px; } .mx_RoomSettings_editable:focus { - border-bottom: 1px solid #76CFA6; + border-bottom: 1px solid $accent-color; outline: none; box-shadow: none; } @@ -220,8 +220,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 15px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; padding: 6px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 2822d82e..22364043 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -78,7 +78,7 @@ limitations under the License. position: absolute; content: ""; border-radius: 40px; - background: #4A4A4A; + background: $primary-fg-color; bottom: 0; width: 24px; height: 24px; @@ -103,7 +103,7 @@ limitations under the License. padding-right: 6px; padding-top: 2px; padding-bottom: 3px; - color: rgba(69, 69, 69, 0.8); + color: $roomtile-name-color; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -142,7 +142,7 @@ limitations under the License. width: 0; height: 0; margin-left: 5px; - border-top: 5px solid #ff0064; + border-top: 5px solid $warning-color; border-right: 7px solid transparent; } @@ -154,7 +154,7 @@ limitations under the License. right: 8px; /*gutter */ top: 9px; border-radius: 8px; - color: #fff; + color: $accent-fg-color; font-weight: 600; font-size: 10px; text-align: center; @@ -175,11 +175,11 @@ limitations under the License. } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { - background-color: #76cfa6; + background-color: $accent-color; } .mx_RoomTile_highlight .mx_RoomTile_badge { - background-color: #ff0064; + background-color: $warning-color; } .mx_RoomTile_unread, .mx_RoomTile_highlight { @@ -187,7 +187,7 @@ limitations under the License. } .mx_RoomTile_selected { - background-color: rgba(255, 255, 255, 0.8); + background-color: $roomtile-selected-bg-color; } .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 76d9e216..9a24868d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -25,10 +25,10 @@ limitations under the License. .mx_SearchableEntityList_query { font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; border-radius: 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; padding: 9px; - color: #454545; - background-color: #fff; + color: $primary-fg-color; + background-color: $primary-bg-color; margin-left: 3px; font-size: 15px; margin-bottom: 8px; @@ -36,13 +36,13 @@ limitations under the License. } .mx_SearchableEntityList_query::-moz-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 12px; } .mx_SearchableEntityList_query::-webkit-input-placeholder { - color: #454545; + color: $primary-fg-color; opacity: 0.5; font-size: 12px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss index 1f8a3450..5dcbd21a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss @@ -27,7 +27,7 @@ limitations under the License. .mx_TabCompleteBar_command { margin-right: 8px; - background-color: #76CFA6; + background-color: $accent-color; padding-left: 8px; padding-right: 8px; padding-top: 2px; @@ -41,7 +41,7 @@ limitations under the License. .mx_TabCompleteBar_command .mx_TabCompleteBar_text { opacity: 1.0; vertical-align: initial; - color: #fff; + color: $accent-fg-color; } .mx_TabCompleteBar_item img { @@ -50,7 +50,7 @@ limitations under the License. } .mx_TabCompleteBar_text { - color: #4a4a4a; + color: $primary-fg-color; vertical-align: middle; opacity: 0.5; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss index 77184d42..7bbafcbe 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss @@ -19,7 +19,7 @@ limitations under the License. max-width: 960px; padding-top: 5px; padding-bottom: 5px; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; } .mx_TopUnreadMessagesBar_scrollUp { diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss index 93ee0e20..13fc9b22 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss @@ -24,7 +24,7 @@ limitations under the License. } .mx_IntegrationsManager iframe { - background-color: #fff; + background-color: $primary-bg-color; border: 0px; width: 100%; height: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss index 8051b4d0..deb89a83 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_CallView_voice { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; cursor: pointer; text-align: center; padding: 6px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index 5cf62091..97a82a03 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -18,7 +18,7 @@ limitations under the License. text-align: center; border: 1px solid #a4a4a4; border-radius: 8px; - background-color: #fff; + background-color: $primary-bg-color; position: fixed; z-index: 1000; padding: 6px; @@ -58,7 +58,7 @@ limitations under the License. height: 36px; line-height: 36px; border-radius: 36px; - color: #fff; + color: $accent-fg-color; margin: auto; } diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 27c47224..29e34382 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -2,7 +2,7 @@ echo "// autogenerated by rethemendex.sh" > _components.scss -for i in `find */* -iname _\*.scss`; +for i in `find . -iname _\*.scss | fgrep -v _components.scss`; do echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss done diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss new file mode 100644 index 00000000..0fb25a6a --- /dev/null +++ b/src/skins/vector/css/themes/_base.scss @@ -0,0 +1,68 @@ + + +// typical text (dark-on-white in light skin) +$primary-fg-color: #454545; +$primary-bg-color: #ffffff; + +// used for dialog box text +$light-fg-color: #747474; + +// button UI (white-on-green in light skin) +$accent-fg-color: #ffffff; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: #eaf5f0; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #f7f7f7; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #e5e5e5; + +// used for the border of input text fields +$input-border-color: #f0f0f0; + +// apart from login forms, which have stronger border +$strong-input-border-color: #c7c7c7; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #f6f6f6; + +$avatar-initial-color: #ffffff; + +// ******************** + +$roomtile-name-color: rgba(69, 69, 69, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); + +$roomsublist-label-fg-color: #3d3b39; +$roomsublist-label-bg-color: #d3efe1; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +// ******************** + +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; \ No newline at end of file diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 19ab2cde..e5602402 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,7 +1,69 @@ +@import "_base"; + // typical text (dark-on-white in light skin) $primary-fg-color: #dddddd; $primary-bg-color: #2d2d2d; -// button UI (white-on-green in light skin) +// used for dialog box text +$light-fg-color: #747474; -@import "../_components" \ No newline at end of file +// button UI (white-on-green in light skin) +$accent-fg-color: $primary-bg-color; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: $primary-bg-color; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #353535; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #474747; + +// used for the border of input text fields +$input-border-color: #3a3a3a; + +// apart from login forms, which have stronger border +$strong-input-border-color: #656565; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #373737; + +$avatar-initial-color: #2d2d2d; + +// ******************** + +$roomtile-name-color: rgba(186, 186, 186, 0.8); +$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); + +$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-bg-color: #454545; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; + +@import "../_components"; \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss index e0ad84f6..8b951e27 100644 --- a/src/skins/vector/css/themes/light.scss +++ b/src/skins/vector/css/themes/light.scss @@ -1,4 +1,2 @@ -$primary-fg-color: #454545; -$primary-bg-color: #ffffff; - -@import "../_components" \ No newline at end of file +@import "_base"; +@import "../_components"; \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 5da4c4ab..b9dbf1cd 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -33,7 +33,7 @@ limitations under the License. -webkit-order: 1; order: 1; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid $primary-hairline-color; margin-right: 20px; -webkit-flex: 0 0 70px; @@ -45,7 +45,7 @@ limitations under the License. .mx_RightPanel_headerButtonGroup { margin-top: 6px; float: left; - background-color: #fff; + background-color: $primary-bg-color; margin-left: 0px; } @@ -73,7 +73,7 @@ limitations under the License. .mx_RightPanel_headerButton_badge { font-size: 11px; - color: #76cfa6; + color: $accent-color; font-weight: bold; padding-bottom: 2px; } @@ -97,7 +97,7 @@ limitations under the License. -webkit-order: 3; order: 3; - border-top: 1px solid #e5e5e5; + border-top: 1px solid $primary-hairline-color; margin-right: 20px; -webkit-flex: 0 0 60px; @@ -107,7 +107,7 @@ limitations under the License. .mx_RightPanel_footer .mx_RightPanel_invite { line-height: 35px; font-size: 14px; - color: #4A4A4A; + color: $primary-fg-color; padding-top: 13px; padding-left: 5px; cursor: pointer; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 563b1772..e5df8741 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -20,7 +20,7 @@ limitations under the License. margin-left: auto; margin-right: auto; margin-bottom: 12px; - color: #4a4a4a; + color: $primary-fg-color; display: -webkit-box; display: -moz-box; @@ -78,7 +78,7 @@ limitations under the License. .mx_RoomDirectory_table { font-size: 14px; - color: #4a4a4a; + color: $primary-fg-color; width: 100%; text-align: left; table-layout: fixed; @@ -110,7 +110,7 @@ limitations under the License. padding-right: 5px; height: 15px; border-radius: 11px; - background-color: #eaf5f0; + background-color: $secondary-accent-color; text-transform: uppercase; font-weight: 600; font-size: 11px; diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss index e6e81aef..0d56d6c3 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss @@ -29,7 +29,7 @@ limitations under the License. .mx_RoomSubList_label { position: relative; text-transform: uppercase; - color: #3d3b39; + color: $roomsublist-label-fg-color; font-weight: 600; font-size: 12px; width: 203px; /* padding + width = LHS Panel width */ @@ -39,8 +39,8 @@ limitations under the License. padding-top: 6px; padding-bottom: 6px; cursor: pointer; - background-color: #d3efe1; - border-top: solid 2px #eaf5f0; + background-color: $roomsublist-label-bg-color; + border-top: solid 2px $secondary-accent-color; } .mx_RoomSubList_label.mx_RoomSubList_fixed { @@ -63,7 +63,7 @@ limitations under the License. display: inline-block; font-size: 12px; font-weight: normal; - color: #76cfa6; + color: $accent-color; padding-left: 5px; text-transform: none; } @@ -80,14 +80,14 @@ limitations under the License. right: 8px; /*gutter */ top: 7px; border-radius: 8px; - color: #fff; + color: $accent-fg-color; font-weight: 600; font-size: 10px; text-align: center; padding-top: 1px; padding-left: 4px; padding-right: 4px; - background-color: #76cfa6; + background-color: $accent-color; } /* @@ -97,7 +97,7 @@ limitations under the License. */ .mx_RoomSubList_badgeHighlight { - background-color: #ff0064; + background-color: $warning-color; } /* This is the bottom of the speech bubble */ @@ -108,7 +108,7 @@ limitations under the License. width: 0; height: 0; margin-left: 5px; - border-top: 5px solid #ff0064; + border-top: 5px solid $warning-color; border-right: 7px solid transparent; } @@ -129,7 +129,7 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 6px solid #76cfa6; + border-top: 6px solid $accent-color; } .mx_RoomSubList_chevronUp { @@ -137,14 +137,14 @@ limitations under the License. height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 6px solid #76cfa6; + border-bottom: 6px solid $accent-color; } .mx_RoomSubList_chevronRight { width: 0; height: 0; border-top: 5px solid transparent; - border-left: 6px solid #76cfa6; + border-left: 6px solid $accent-color; border-bottom: 5px solid transparent; } @@ -165,7 +165,7 @@ limitations under the License. .mx_RoomSubList_line { display: inline-block; width: 159px; - border-top: dotted 2px #76cfa6; + border-top: dotted 2px $accent-color; vertical-align: middle; } @@ -179,7 +179,7 @@ limitations under the License. font-size: 10px; font-weight: 600; text-align: left; - color: #76cfa6; + color: $accent-color; padding-left: 7px; padding-right: 7px; padding-left: 7px; @@ -198,20 +198,20 @@ limitations under the License. right: 8px; /*gutter */ top: -2px; border-radius: 8px; - border: solid 1px #76cfa6; - color: #fff; + border: solid 1px $accent-color; + color: $accent-fg-color; font-weight: 600; font-size: 10px; text-align: center; padding-top: 1px; padding-left: 3px; padding-right: 3px; - background-color: #fff; + background-color: $primary-bg-color; vertical-align: middle; } .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify { - background-color: #76cfa6; + background-color: $accent-color; border: 0; padding-top: 3px; padding-left: 4px; @@ -219,7 +219,7 @@ limitations under the License. } .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight { - background-color: #ff0064; + background-color: $warning-color; border: 0; padding-top: 3px; padding-left: 4px; diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss index 947fd480..0a2e7605 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss +++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_RoomTagContextMenu_field:last-child { padding-bottom: 4px; - color: #ff0064; + color: $warning-color; } .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet { diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss index 8b4c4459..9147fdb7 100644 --- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss +++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss @@ -21,14 +21,14 @@ limitations under the License. .mx_NetworkDropdown_input { position: relative; border-radius: 3px; - border: 1px solid #c7c7c7; + border: 1px solid $strong-input-border-color; font-weight: 300; font-size: 13px; user-select: none; } .mx_NetworkDropdown_arrow { - border-color: #4a4a4a transparent transparent; + border-color: $primary-fg-color transparent transparent; border-style: solid; border-width: 5px 5px 0; display: block; @@ -67,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f margin: 0; padding: 0px; border-radius: 3px; - border: 1px solid #76cfa6; + border: 1px solid $accent-color; background-color: white; } diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index 03223f25..d66d9c7d 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -87,7 +87,7 @@ limitations under the License. padding-right: 30px; min-height: 100%; max-width: 240px; - color: #fff; + color: $lightbox-fg-color; } .mx_ImageView_cancel { @@ -114,10 +114,10 @@ limitations under the License. margin-top: 24px; margin-bottom: 6px; border-radius: 5px; - background-color: #454545; + background-color: $lightbox-bg-color; font-size: 14px; padding: 9px; - border: 1px solid #fff; + border: 1px solid $lightbox-border-color; } .mx_ImageView_size { @@ -125,7 +125,7 @@ limitations under the License. } .mx_ImageView_link { - color: #fff ! important; + color: $lightbox-fg-color ! important; text-decoration: none ! important; } diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index 717d75af..e8b5aebb 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_GuestWarningBar { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; display: -webkit-box; display: -moz-box; @@ -34,7 +34,7 @@ limitations under the License. } .mx_GuestWarningBar a { - color: #fff ! important; + color: $accent-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 4e214e11..9bd70bb9 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -15,8 +15,8 @@ limitations under the License. */ .mx_MatrixToolbar { - background-color: #76cfa6; - color: #fff; + background-color: $accent-color; + color: $accent-fg-color; display: -webkit-box; display: -moz-box; @@ -40,7 +40,7 @@ limitations under the License. .mx_MatrixToolbar_link { - color: #fff ! important; + color: $accent-fg-color ! important; text-decoration: underline ! important; cursor: pointer; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss index 003215af..2fe16ca9 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss @@ -22,8 +22,8 @@ limitations under the License. margin-bottom: 7px; padding-top: 5px; padding-bottom: 5px; - border: 1px dashed #76cfa6; - color: #454545; + border: 1px dashed $accent-color; + color: $primary-fg-color; background-color: rgba(255,255,255,0.5); border-radius: 4px; } @@ -39,7 +39,7 @@ limitations under the License. } .mx_RoomDropTarget_avatar { - background-color: #fff; + background-color: $primary-bg-color; border-radius: 24px; width: 24px; height: 24px; diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss index 192fa77b..5469a9e6 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss @@ -21,16 +21,16 @@ limitations under the License. width: 0; height: 0; border-top: 8px solid transparent; - border-right: 8px solid rgba(187, 187, 187, 0.5); + border-right: 8px solid $menu-border-color; border-bottom: 8px solid transparent; } -.mx_RoomTooltip_chevron:after{ +.mx_RoomTooltip_chevron:after { content:''; width: 0; height: 0; border-top: 7px solid transparent; - border-right: 7px solid #fff; + border-right: 7px solid $primary-bg-color; border-bottom: 7px solid transparent; position:absolute; top: -7px; @@ -40,14 +40,14 @@ limitations under the License. .mx_RoomTooltip { display: none; position: fixed; - border: 1px solid rgba(187, 187, 187, 0.5); + border: 1px solid $menu-border-color; border-radius: 5px; - background-color: #fff; + background-color: $primary-bg-color; z-index: 2000; padding: 5px; pointer-events: none; line-height: 14px; font-size: 13px; - color: rgba(0, 0, 0, 0.7); + color: $primary-fg-color; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss index 7ec1a17a..5d195322 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss @@ -26,7 +26,7 @@ limitations under the License. .mx_SearchBar_input { display: inline block; border-radius: 3px 0px 0px 3px; - border: 1px solid #f0f0f0; + border: 1px solid $input-border-color; font-size: 15px; padding: 9px; padding-left: 11px; @@ -41,7 +41,7 @@ limitations under the License. width: 37px; height: 37px; border-radius: 0px 3px 3px 0px; - background-color: #76CFA6; + background-color: $accent-color; } @keyframes pulsate { @@ -61,8 +61,8 @@ limitations under the License. border-radius: 36px; font-weight: 400; font-size: 15px; - color: #fff; - background-color: #76cfa6; + color: $accent-fg-color; + background-color: $accent-color; width: auto; margin: auto; margin-left: 7px; @@ -74,9 +74,9 @@ limitations under the License. } .mx_SearchBar_unselected { - background-color: #fff; - color: #76CFA6; - border: #76CFA6 1px solid; + background-color: $primary-bg-color; + color: $accent-color; + border: $accent-color 1px solid; } .mx_SearchBar_cancel { diff --git a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss index 7a93f3f7..4c88e449 100644 --- a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss +++ b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss @@ -58,7 +58,7 @@ limitations under the License. .mx_UserNotifSettings_keywords { cursor: pointer; - color: #76cfa6; + color: $accent-color; } .mx_UserSettings_devicesTable td { diff --git a/src/vector/index.js b/src/vector/index.js index 96c6a971..47509887 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/themes/light.css'); +require('../../build/themes/dark.css'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); From d1a9695a353aec38762fcde749e852cfc3a5c3b5 Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Wed, 28 Dec 2016 20:57:31 -0500 Subject: [PATCH 013/168] update README to point to new names/locations --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 41f307d3..f82572fb 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ https://riot.im/develop for those who like living dangerously. To host your own copy of Riot, the quickest bet is to use a pre-built released version of Riot: -1. Download the latest version from https://github.com/vector-im/vector-web/releases +1. Download the latest version from https://github.com/vector-im/riot-web/releases 1. Untar the tarball on your web server 1. Move (or symlink) the vector-x.x.x directory to an appropriate name 1. If desired, copy `config.sample.json` to `config.json` and edit it @@ -36,7 +36,7 @@ access to Riot (or other apps) due to sharing the same domain. We have put some coarse mitigations into place to try to protect against this situation, but it's still not good practice to do it in the first place. See -https://github.com/vector-im/vector-web/issues/1977 for more details. +https://github.com/vector-im/riot-web/issues/1977 for more details. Building From Source ==================== @@ -45,7 +45,7 @@ Riot is a modular webapp built with modern ES6 and requires a npm build system to build. 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0` -1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` +1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git` 1. Switch to the vector-web directory: `cd vector-web` 1. Install the prerequisites: `npm install` 1. If you are using the `develop` branch of vector-web, you will probably need @@ -97,7 +97,7 @@ Running as a Desktop app ======================== Riot can also be run as a desktop app, wrapped in electron. You can download a -pre-built version from https://riot.im/download/desktop/ or, if you prefer, +pre-built version from https://riot.im/desktop.html or, if you prefer, built it yourself. To run as a desktop app: @@ -167,13 +167,13 @@ the `component-index.js` for the app (used in future for skinning) development on Riot forcing `matrix-react-sdk` to move fast at the expense of maintaining a clear abstraction between the two.** Hacking on Riot inevitably means hacking equally on `matrix-react-sdk`, and there are bits of -`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project +`matrix-react-sdk` behaviour incorrectly residing in the `riot-web` project (e.g. matrix-react-sdk specific CSS), and a bunch of Riot specific behaviour in the `matrix-react-sdk` (grep for `vector` / `riot`). This separation problem will be solved asap once development on Riot (and thus matrix-react-sdk) has stabilised. Until then, the two projects should basically be considered as a single unit. In particular, `matrix-react-sdk` issues are currently filed -against `vector-web` in github. +against `riot-web` in github. Please note that Riot is intended to run correctly without access to the public internet. So please don't depend on resources (JS libs, CSS, images, fonts) @@ -208,8 +208,8 @@ Then similarly with `matrix-react-sdk`: Finally, build and start Riot itself: -1. `git clone git@github.com:vector-im/vector-web.git` -1. `cd vector-web` +1. `git clone git@github.com:vector-im/riot-web.git` +1. `cd riot-web` 1. `git checkout develop` 1. `npm install` 1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/` From 35b301338643dcabafb43653e6da17de9c9fdcd2 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 31 Dec 2016 14:27:44 +0000 Subject: [PATCH 014/168] fix up a few more colours --- src/skins/vector/css/_common.scss | 7 ++++++- src/skins/vector/css/themes/_base.scss | 3 +++ src/skins/vector/css/themes/dark.scss | 3 +++ .../css/vector-web/views/directory/_NetworkDropdown.scss | 4 ++-- 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index e81ea2fa..ed96b48c 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,8 +55,13 @@ a:visited { color: $accent-color; } +input[type=text] { + background-color: $primary-bg-color; + color: $primary-fg-color; +} + input[type=text].error, input[type=password].error { - border: 1px solid red; + border: 1px solid $warning-color; } input[type=text]:focus, textarea:focus { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 0fb25a6a..b9fd2d12 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -7,6 +7,9 @@ $primary-bg-color: #ffffff; // used for dialog box text $light-fg-color: #747474; +// used for focusing form controls +$focus-bg-color: #dddddd; + // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; $accent-color: #76CFA6; diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index e5602402..5449b90e 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -4,6 +4,9 @@ $primary-fg-color: #dddddd; $primary-bg-color: #2d2d2d; +// used for focusing form controls +$focus-bg-color: #101010; + // used for dialog box text $light-fg-color: #747474; diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss index 9147fdb7..84aa896a 100644 --- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss +++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss @@ -68,11 +68,11 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f padding: 0px; border-radius: 3px; border: 1px solid $accent-color; - background-color: white; + background-color: $primary-bg-color; } .mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover { - background-color: #ddd; + background-color: $focus-bg-color; } .mx_NetworkDropdown_menu_network { From 6a1af891b77f1b0c63bd1df32d0ac8c87b59dff7 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Fri, 6 Jan 2017 10:43:13 +0000 Subject: [PATCH 015/168] Use a custom script to copy resources (#2893) All of those cpx invocations were getting unwieldy, and I suspect the exotic quoting needed to run them under parallelshell was breaking things on windows. Replace the unwieldy cpx invocations with an unwieldy custom script. --- package.json | 20 +++++------ scripts/copy-res.js | 81 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 11 deletions(-) create mode 100755 scripts/copy-res.js diff --git a/package.json b/package.json index 3f9f46e2..52cc41be 100644 --- a/package.json +++ b/package.json @@ -27,26 +27,22 @@ "matrix-react-parent": "matrix-react-sdk", "scripts": { "reskindex": "reskindex -h src/header", - "build:res": "cpx \"{src/skins/vector/fonts,src/skins/vector/img}/**\" webapp/ && cpx \"{res/media,res/vector-icons}/**\" webapp/", - "build:config": "cpx config.json webapp/", - "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", + "build:res": "node scripts/copy-res.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64", - "build": "node scripts/babelcheck.js && npm run build:res && npm run build:config && npm run build:emojione && npm run build:css && npm run build:bundle", - "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:config && npm run build:emojione && npm run build:css && npm run build:bundle:dev", + "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle", + "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev", "dist": "scripts/package.sh", - "start:res": "parallelshell \"cpx -w \\\"{src/skins/vector/fonts,src/skins/vector/img}/**\\\" webapp/\" \"cpx -w \\\"{res/media,res/vector-icons}/**\\\" webapp/\"", - "start:config": "cpx -w config.json webapp/", - "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", + "start:res": "node scripts/copy-res.js -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css", - "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", - "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", + "start:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css", + "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"", + "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"", "clean": "rimraf build lib webapp electron/dist", "prepublish": "npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", @@ -95,6 +91,7 @@ "babel-preset-react": "^6.16.0", "babel-preset-stage-2": "^6.17.0", "catw": "^1.0.1", + "chokidar": "^1.6.1", "cpx": "^1.3.2", "css-raw-loader": "^0.1.1", "electron-builder": "^10.4.1", @@ -111,6 +108,7 @@ "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.7.0", + "minimist": "^1.2.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", "parallelshell": "^1.2.0", diff --git a/scripts/copy-res.js b/scripts/copy-res.js new file mode 100755 index 00000000..826d9a96 --- /dev/null +++ b/scripts/copy-res.js @@ -0,0 +1,81 @@ +#!/usr/bin/env node + +// copies the resources into the webapp directory. +// + +// cpx includes globbed parts of the filename in the destination, but excludes +// common parents. Hence, "res/{a,b}/**": the output will be "dest/a/..." and +// "dest/b/...". +const COPY_LIST = [ + ["res/{media,vector-icons}/**", "webapp"], + ["src/skins/vector/{fonts,img}/**", "webapp"], + ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"], + ["./config.json", "webapp", {directwatch: 1}], +]; + +const parseArgs = require('minimist'); +const Cpx = require('cpx'); +const chokidar = require('chokidar'); + +const argv = parseArgs( + process.argv.slice(2), {} +); + +var watch = argv.w; +var verbose = argv.v; + +function errCheck(err) { + if (err) { + console.error(err.message); + process.exit(1); + } +} + +function next(i, err) { + errCheck(err); + + if (i >= COPY_LIST.length) { + return; + } + + const ent = COPY_LIST[i]; + const source = ent[0]; + const dest = ent[1]; + const opts = ent[2] || {}; + + const cpx = new Cpx.Cpx(source, dest); + + if (verbose) { + cpx.on("copy", (event) => { + console.log(`Copied: ${event.srcPath} --> ${event.dstPath}`); + }); + cpx.on("remove", (event) => { + console.log(`Removed: ${event.path}`); + }); + } + + const cb = (err) => {next(i+1, err)}; + + if (watch) { + if (opts.directwatch) { + // cpx -w creates a watcher for the parent of any files specified, + // which in the case of config.json is '.', which inevitably takes + // ages to crawl. So we create our own watcher on the files + // instead. + const copy = () => {cpx.copy(errCheck)}; + chokidar.watch(source) + .on('add', copy) + .on('change', copy) + .on('ready', cb) + .on('error', errCheck); + } else { + cpx.on('watch-ready', cb); + cpx.on("watch-error", cb); + cpx.watch(); + } + } else { + cpx.copy(cb); + } +} + +next(0); From 691fe611d6141f6c43f9e966ab135a721f248482 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Jan 2017 11:06:09 +0000 Subject: [PATCH 016/168] experimental postcss --- package.json | 14 ++- src/skins/vector/css/_components.scss | 145 +++++++++++++------------ src/skins/vector/css/rethemendex.sh | 2 +- src/skins/vector/css/themes/dark.scss | 76 +------------ src/skins/vector/css/themes/light.scss | 4 +- src/vector/index.js | 2 +- webpack.config.js | 4 +- 7 files changed, 94 insertions(+), 153 deletions(-) diff --git a/package.json b/package.json index c657aad6..8eb562d3 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "build:config": "cpx config.json webapp/", "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"", + "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", @@ -44,7 +44,7 @@ "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"", + "start:skins:css": "mkdirp build && postcss -c postcss.config.json -w", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"", "clean": "rimraf build lib webapp electron/dist", @@ -80,6 +80,7 @@ "url": "^0.11.0" }, "devDependencies": { + "autoprefixer": "^6.6.0", "babel-cli": "^6.5.2", "babel-core": "^6.14.0", "babel-eslint": "^6.1.0", @@ -116,10 +117,17 @@ "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", + "postcss-cli": "^2.6.0", + "postcss-extend": "^1.0.5", + "postcss-import": "^9.0.0", + "postcss-mixins": "^5.4.1", + "postcss-nested": "^1.0.0", + "postcss-scss": "^0.4.0", + "postcss-simple-vars": "^3.0.0", + "postcss-strip-inline-comments": "^0.1.5", "react-addons-perf": "^15.4.0", "react-addons-test-utils": "^15.4.0", "rimraf": "^2.4.3", - "sass-loader": "^4.1.1", "source-map-loader": "^0.1.5", "webpack": "^1.12.14", "webpack-dev-server": "^1.16.2" diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 532e0a36..88435236 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -1,73 +1,74 @@ // autogenerated by rethemendex.sh -@import "_common"; -@import "matrix-react-sdk/structures/_ContextualMenu"; -@import "matrix-react-sdk/structures/_CreateRoom"; -@import "matrix-react-sdk/structures/_FilePanel"; -@import "matrix-react-sdk/structures/_MatrixChat"; -@import "matrix-react-sdk/structures/_NotificationPanel"; -@import "matrix-react-sdk/structures/_RoomStatusBar"; -@import "matrix-react-sdk/structures/_RoomView"; -@import "matrix-react-sdk/structures/_SearchBox"; -@import "matrix-react-sdk/structures/_UploadBar"; -@import "matrix-react-sdk/structures/_UserSettings"; -@import "matrix-react-sdk/structures/login/_Login"; -@import "matrix-react-sdk/views/avatars/_BaseAvatar"; -@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog"; -@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog"; -@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog"; -@import "matrix-react-sdk/views/elements/_AddressSelector"; -@import "matrix-react-sdk/views/elements/_AddressTile"; -@import "matrix-react-sdk/views/elements/_DirectorySearchBox"; -@import "matrix-react-sdk/views/elements/_MemberEventListSummary"; -@import "matrix-react-sdk/views/elements/_ProgressBar"; -@import "matrix-react-sdk/views/elements/_RichText"; -@import "matrix-react-sdk/views/login/_ServerConfig"; -@import "matrix-react-sdk/views/messages/_MImageBody"; -@import "matrix-react-sdk/views/messages/_MNoticeBody"; -@import "matrix-react-sdk/views/messages/_MTextBody"; -@import "matrix-react-sdk/views/messages/_TextualEvent"; -@import "matrix-react-sdk/views/messages/_UnknownBody"; -@import "matrix-react-sdk/views/rooms/_Autocomplete"; -@import "matrix-react-sdk/views/rooms/_EntityTile"; -@import "matrix-react-sdk/views/rooms/_EventTile"; -@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget"; -@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo"; -@import "matrix-react-sdk/views/rooms/_MemberInfo"; -@import "matrix-react-sdk/views/rooms/_MemberList"; -@import "matrix-react-sdk/views/rooms/_MessageComposer"; -@import "matrix-react-sdk/views/rooms/_PresenceLabel"; -@import "matrix-react-sdk/views/rooms/_RoomHeader"; -@import "matrix-react-sdk/views/rooms/_RoomList"; -@import "matrix-react-sdk/views/rooms/_RoomPreviewBar"; -@import "matrix-react-sdk/views/rooms/_RoomSettings"; -@import "matrix-react-sdk/views/rooms/_RoomTile"; -@import "matrix-react-sdk/views/rooms/_SearchableEntityList"; -@import "matrix-react-sdk/views/rooms/_TabCompleteBar"; -@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar"; -@import "matrix-react-sdk/views/settings/_DevicesPanel"; -@import "matrix-react-sdk/views/settings/_IntegrationsManager"; -@import "matrix-react-sdk/views/voip/_CallView"; -@import "matrix-react-sdk/views/voip/_IncomingCallbox"; -@import "matrix-react-sdk/views/voip/_VideoView"; -@import "vector-web/_fonts"; -@import "vector-web/structures/_CompatibilityPage"; -@import "vector-web/structures/_LeftPanel"; -@import "vector-web/structures/_RightPanel"; -@import "vector-web/structures/_RoomDirectory"; -@import "vector-web/structures/_RoomSubList"; -@import "vector-web/structures/_ViewSource"; -@import "vector-web/views/context_menus/_MessageContextMenu"; -@import "vector-web/views/context_menus/_NotificationStateContextMenu"; -@import "vector-web/views/context_menus/_RoomTagContextMenu"; -@import "vector-web/views/dialogs/_ChangelogDialog"; -@import "vector-web/views/directory/_NetworkDropdown"; -@import "vector-web/views/elements/_ImageView"; -@import "vector-web/views/elements/_Spinner"; -@import "vector-web/views/globals/_GuestWarningBar"; -@import "vector-web/views/globals/_MatrixToolbar"; -@import "vector-web/views/messages/_MessageTimestamp"; -@import "vector-web/views/messages/_SenderProfile"; -@import "vector-web/views/rooms/_RoomDropTarget"; -@import "vector-web/views/rooms/_RoomTooltip"; -@import "vector-web/views/rooms/_SearchBar"; -@import "vector-web/views/settings/_Notifications"; +@import "./_common.scss"; +@import "./matrix-react-sdk/structures/_ContextualMenu.scss"; +@import "./matrix-react-sdk/structures/_CreateRoom.scss"; +@import "./matrix-react-sdk/structures/_FilePanel.scss"; +@import "./matrix-react-sdk/structures/_MatrixChat.scss"; +@import "./matrix-react-sdk/structures/_NotificationPanel.scss"; +@import "./matrix-react-sdk/structures/_RoomStatusBar.scss"; +@import "./matrix-react-sdk/structures/_RoomView.scss"; +@import "./matrix-react-sdk/structures/_SearchBox.scss"; +@import "./matrix-react-sdk/structures/_UploadBar.scss"; +@import "./matrix-react-sdk/structures/_UserSettings.scss"; +@import "./matrix-react-sdk/structures/login/_Login.scss"; +@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss"; +@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss"; +@import "./matrix-react-sdk/views/elements/_AddressSelector.scss"; +@import "./matrix-react-sdk/views/elements/_AddressTile.scss"; +@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss"; +@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss"; +@import "./matrix-react-sdk/views/elements/_ProgressBar.scss"; +@import "./matrix-react-sdk/views/elements/_RichText.scss"; +@import "./matrix-react-sdk/views/login/_ServerConfig.scss"; +@import "./matrix-react-sdk/views/messages/_MImageBody.scss"; +@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss"; +@import "./matrix-react-sdk/views/messages/_MTextBody.scss"; +@import "./matrix-react-sdk/views/messages/_TextualEvent.scss"; +@import "./matrix-react-sdk/views/messages/_UnknownBody.scss"; +@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss"; +@import "./matrix-react-sdk/views/rooms/_EntityTile.scss"; +@import "./matrix-react-sdk/views/rooms/_EventTile.scss"; +@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss"; +@import "./matrix-react-sdk/views/rooms/_MemberList.scss"; +@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss"; +@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomList.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss"; +@import "./matrix-react-sdk/views/rooms/_RoomTile.scss"; +@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; +@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss"; +@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; +@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; +@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; +@import "./matrix-react-sdk/views/voip/_CallView.scss"; +@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; +@import "./matrix-react-sdk/views/voip/_VideoView.scss"; +@import "./themes/_base.scss"; +@import "./vector-web/_fonts.scss"; +@import "./vector-web/structures/_CompatibilityPage.scss"; +@import "./vector-web/structures/_LeftPanel.scss"; +@import "./vector-web/structures/_RightPanel.scss"; +@import "./vector-web/structures/_RoomDirectory.scss"; +@import "./vector-web/structures/_RoomSubList.scss"; +@import "./vector-web/structures/_ViewSource.scss"; +@import "./vector-web/views/context_menus/_MessageContextMenu.scss"; +@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss"; +@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss"; +@import "./vector-web/views/dialogs/_ChangelogDialog.scss"; +@import "./vector-web/views/directory/_NetworkDropdown.scss"; +@import "./vector-web/views/elements/_ImageView.scss"; +@import "./vector-web/views/elements/_Spinner.scss"; +@import "./vector-web/views/globals/_GuestWarningBar.scss"; +@import "./vector-web/views/globals/_MatrixToolbar.scss"; +@import "./vector-web/views/messages/_MessageTimestamp.scss"; +@import "./vector-web/views/messages/_SenderProfile.scss"; +@import "./vector-web/views/rooms/_RoomDropTarget.scss"; +@import "./vector-web/views/rooms/_RoomTooltip.scss"; +@import "./vector-web/views/rooms/_SearchBar.scss"; +@import "./vector-web/views/settings/_Notifications.scss"; diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 29e34382..915b235d 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -4,5 +4,5 @@ echo "// autogenerated by rethemendex.sh" > _components.scss for i in `find . -iname _\*.scss | fgrep -v _components.scss`; do - echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss + echo "@import \"$i\";" >> _components.scss done diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 5449b90e..0c51486b 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,72 +1,4 @@ -@import "_base"; - -// typical text (dark-on-white in light skin) -$primary-fg-color: #dddddd; -$primary-bg-color: #2d2d2d; - -// used for focusing form controls -$focus-bg-color: #101010; - -// used for dialog box text -$light-fg-color: #747474; - -// button UI (white-on-green in light skin) -$accent-fg-color: $primary-bg-color; -$accent-color: #76CFA6; - -// red warning colour -$warning-color: #ff0064; - -// left-panel style muted accent color -$secondary-accent-color: $primary-bg-color; - -// used by AddressSelector -$selected-color: #eaf5f0; - -// selected for hoverover & selected event tiles -$event-selected-color: #353535; - -// used for the hairline dividers in RoomView -$primary-hairline-color: #474747; - -// used for the border of input text fields -$input-border-color: #3a3a3a; - -// apart from login forms, which have stronger border -$strong-input-border-color: #656565; - -// context menus -$menu-border-color: rgba(187, 187, 187, 0.5); -$menu-bg-color: #373737; - -$avatar-initial-color: #2d2d2d; - -// ******************** - -$roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); - -$roomsublist-label-fg-color: $primary-fg-color; -$roomsublist-label-bg-color: #454545; - -// ******************** - -// event tile lifecycle -$event-encrypting-color: #abddbc; -$event-sending-color: #ddd; -$event-notsent-color: #f44; - -// event timestamp -$event-timestamp-color: #acacac; - -// e2e -$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color -$e2e-unverified-color: #e8bf37; -$e2e-warning-color: #ba6363; - -/*** ImageView ***/ -$lightbox-bg-color: #454545; -$lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; - -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "_dark.scss"; +@import "../_components.scss"; +// moofleasdadsasdadsa \ No newline at end of file diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss index 8b951e27..ea0f93d5 100644 --- a/src/skins/vector/css/themes/light.scss +++ b/src/skins/vector/css/themes/light.scss @@ -1,2 +1,2 @@ -@import "_base"; -@import "../_components"; \ No newline at end of file +@import "_base.scss"; +@import "../_components.scss"; \ No newline at end of file diff --git a/src/vector/index.js b/src/vector/index.js index 47509887..64b87698 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,7 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/themes/dark.css'); +require('../../build/dark.scss'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 1c408b70..1f2a8a60 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -24,8 +24,8 @@ module.exports = { { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, - { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] }, + // we're assuming that postcss has already preprocessed SCSS by this point + { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From c1d4a0dd2826b8ec7dad6fcbd946c2ef4cd985b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 10 Jan 2017 11:06:45 +0000 Subject: [PATCH 017/168] postcss experiment --- postcss.config.json | 18 +++++++ src/skins/vector/css/themes/_dark.scss | 69 ++++++++++++++++++++++++++ 2 files changed, 87 insertions(+) create mode 100644 postcss.config.json create mode 100644 src/skins/vector/css/themes/_dark.scss diff --git a/postcss.config.json b/postcss.config.json new file mode 100644 index 00000000..be3585cf --- /dev/null +++ b/postcss.config.json @@ -0,0 +1,18 @@ +{ + "use": [ + "autoprefixer", + "postcss-import", + "postcss-simple-vars", + "postcss-extend", + "postcss-nested", + "postcss-mixins", + "postcss-strip-inline-comments" + ], + "parser": "postcss-scss", + "input": "src/skins/vector/css/themes/[^_]*.scss", + "dir": "build", + "local-plugins": true, + "autoprefixer": { + "browsers": "> 5%" + } +} \ No newline at end of file diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss new file mode 100644 index 00000000..e2c33e3e --- /dev/null +++ b/src/skins/vector/css/themes/_dark.scss @@ -0,0 +1,69 @@ + +// typical text (dark-on-white in light skin) +$primary-fg-color: #dddddd; +$primary-bg-color: #2d2d2d; + +// used for focusing form controls +$focus-bg-color: #101010; + +// used for dialog box text +$light-fg-color: #747474; + +// button UI (white-on-green in light skin) +$accent-fg-color: $primary-bg-color; +$accent-color: #76CFA6; + +// red warning colour +$warning-color: #ff0064; + +// left-panel style muted accent color +$secondary-accent-color: $primary-bg-color; + +// used by AddressSelector +$selected-color: #eaf5f0; + +// selected for hoverover & selected event tiles +$event-selected-color: #353535; + +// used for the hairline dividers in RoomView +$primary-hairline-color: #474747; + +// used for the border of input text fields +$input-border-color: #3a3a3a; + +// apart from login forms, which have stronger border +$strong-input-border-color: #656565; + +// context menus +$menu-border-color: rgba(187, 187, 187, 0.5); +$menu-bg-color: #373737; + +$avatar-initial-color: #2d2d2d; + +// ******************** + +$roomtile-name-color: rgba(186, 186, 186, 0.8); +$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); + +$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-bg-color: #454545; + +// ******************** + +// event tile lifecycle +$event-encrypting-color: #abddbc; +$event-sending-color: #ddd; +$event-notsent-color: #f44; + +// event timestamp +$event-timestamp-color: #acacac; + +// e2e +$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color +$e2e-unverified-color: #e8bf37; +$e2e-warning-color: #ba6363; + +/*** ImageView ***/ +$lightbox-bg-color: #454545; +$lightbox-fg-color: #ffffff; +$lightbox-border-color: #ffffff; From c5459a2f19607a5d87a783b75cabcdfa4c0abd1d Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 10 Jan 2017 18:39:21 +0000 Subject: [PATCH 018/168] Enable screen sharing easter-egg in desktop app --- electron/src/electron-main.js | 2 ++ src/vector/platform/ElectronPlatform.js | 4 ++++ src/vector/platform/WebPlatform.js | 8 ++++++++ 3 files changed, 14 insertions(+) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 2b135a03..675640a5 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -148,6 +148,8 @@ process.on('uncaughtException', function (error) { electron.ipcMain.on('install_update', installUpdate); +electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing'); + electron.app.on('ready', () => { if (vectorConfig.update_base_url) { console.log("Starting auto update with base URL: " + vectorConfig.update_base_url); diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js index 3b41822b..68df88b0 100644 --- a/src/vector/platform/ElectronPlatform.js +++ b/src/vector/platform/ElectronPlatform.js @@ -127,4 +127,8 @@ export default class ElectronPlatform extends VectorBasePlatform { getDefaultDeviceDisplayName() { return "Riot Desktop on " + platformFriendlyName(); } + + screenCaptureErrorString() { + return null; + } } diff --git a/src/vector/platform/WebPlatform.js b/src/vector/platform/WebPlatform.js index c4ed4d55..2029822b 100644 --- a/src/vector/platform/WebPlatform.js +++ b/src/vector/platform/WebPlatform.js @@ -196,4 +196,12 @@ export default class WebPlatform extends VectorBasePlatform { return app_name + " via " + ua.getBrowser().name + " on " + ua.getOS().name; } + + screenCaptureErrorString() { + // it won't work at all if you're not on HTTPS so whine whine whine + if (!global.window || global.window.location.protocol !== "https:") { + return "You need to be using HTTPS to place a screen-sharing call."; + } + return null; + } } From b71f96e4e5de520f1bbc7166b2bbd0ba1ffae4af Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 10:28:04 +0000 Subject: [PATCH 019/168] Use the role for 'toggle dev tools' Let electron handle it rather than doing it ourselves --- electron/src/vectormenu.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/electron/src/vectormenu.js b/electron/src/vectormenu.js index f4d55c15..70ed3ac3 100644 --- a/electron/src/vectormenu.js +++ b/electron/src/vectormenu.js @@ -72,11 +72,7 @@ const template = [ role: 'togglefullscreen' }, { - label: 'Toggle Developer Tools', - accelerator: process.platform == 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I', - click: function(item, focusedWindow) { - if (focusedWindow) focusedWindow.toggleDevTools(); - } + role: 'toggledevtools' } ] }, From 06718c580e49e4f506f01a1cf938889aaa6b371d Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 16:27:40 +0000 Subject: [PATCH 020/168] Hopefully fix Windows shortcuts * Revert https://github.com/vector-im/riot-web/commit/79d164309f7926cb1c24008e464a516d7a872325 as it seems to break shortcuts altogether * Update electron-builder (and add the squirrel windows package that the newer version now requires: it's been split out). This uses a newer version of squirrel which has some fixes for shortcuts. I'm unsure exactly what was going wrong originally in https://github.com/vector-im/riot-web/issues/2775 but #79d1643 seems to break shortcut creation as far as I can see. --- electron/src/squirrelhooks.js | 7 ++++++- package.json | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js index 295ef5cf..ca0983b6 100644 --- a/electron/src/squirrelhooks.js +++ b/electron/src/squirrelhooks.js @@ -3,7 +3,12 @@ const spawn = require('child_process').spawn; const app = require('electron').app; function run_update_exe(args, done) { - const updateExe = path.resolve(path.dirname(process.execPath), 'Update.exe'); + // Invokes Squirrel's Update.exe which will do things for us like create shortcuts + // Note that there's an Update.exe in the app-x.x.x directory and one in the parent + // directory: we need to run the one in the parent directory, because it discovers + // information about the app by inspecting the directory it's run from. + const updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe'); + console.log('Spawning `%s` with args `%s`', updateExe, args); spawn(updateExe, args, { detached: true }).on('close', done); diff --git a/package.json b/package.json index 52cc41be..b110b2af 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,8 @@ "chokidar": "^1.6.1", "cpx": "^1.3.2", "css-raw-loader": "^0.1.1", - "electron-builder": "^10.4.1", + "electron-builder": "^11.2.4", + "electron-builder-squirrel-windows": "^11.2.1", "emojione": "^2.2.3", "expect": "^1.16.0", "fs-extra": "^0.30.0", From 97fc92b1bb01758294f304bc5ef687b307eec2ca Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 16:50:09 +0000 Subject: [PATCH 021/168] Update to electron 1.4.14 This pulls in the chrome change that broke geotrust ssl when the build hit 10 weeks old, so let's get this one out before we hit more disasters. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 52cc41be..59dfe1e8 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "build": { "appId": "im.riot.app", "category": "Network", - "electronVersion": "1.4.11", + "electronVersion": "1.4.14", "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675", "asar": false, "dereference": true, From 10f0631487589f7c0841cf049be719024150b43e Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 17:20:27 +0000 Subject: [PATCH 022/168] Build the js-sdk in the CI script now it's transpiled --- scripts/jenkins.sh | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh index be8d8dee..bd27d6e3 100755 --- a/scripts/jenkins.sh +++ b/scripts/jenkins.sh @@ -19,7 +19,8 @@ tar -C olm -xz < olm/olm-*.tgz rm -r node_modules/olm cp -r olm/package node_modules/olm -# we may be using a dev branch of react-sdk, in which case we need to build it +# we may be using dev branches of js-sdk and react-sdk, in which case we need to build them +(cd node_modules/matrix-js-sdk && npm run build) (cd node_modules/matrix-react-sdk && npm run build) # run the mocha tests From 5258bf9c8455e97ce59e82150c51e31c0c681a44 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 17:25:58 +0000 Subject: [PATCH 023/168] Update README now the js-sdk has a transpile step --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f7754348..57cfd5cb 100644 --- a/README.md +++ b/README.md @@ -58,8 +58,11 @@ to build. 1. Install the prerequisites: `npm install` 1. If you are using the `develop` branch of vector-web, you will probably need to rebuild one of the dependencies, due to - https://github.com/npm/npm/issues/3055: `(cd node_modules/matrix-react-sdk - && npm install)` + https://github.com/npm/npm/issues/3055: + ``` + (cd node_modules/matrix-js-sdk && npm install) + (cd node_modules/matrix-react-sdk && npm install) + ``` 1. Configure the app by copying `config.sample.json` to `config.json` and modifying it (see below for details) 1. `npm run dist` to build a tarball to deploy. Untaring this file will give @@ -241,10 +244,10 @@ Finally, build and start Riot itself: disables caching, so do NOT use it in production. 1. Open http://127.0.0.1:8080/ in your browser to see your newly built Riot. -When you make changes to `matrix-react-sdk`, you will need to run `npm run -build` in the relevant directory. You can do this automatically by instead -running `npm start` in the directory, to start a development builder which -will watch for changes to the files and rebuild automatically. +When you make changes to `matrix-react-sdk` or `matrix-js-sdk`, you will need +to run `npm run build` in the relevant directory. You can do this automatically +by instead running `npm start` in the directory, to start a development builder +which will watch for changes to the files and rebuild automatically. If you add or remove any components from the Riot skin, you will need to rebuild the skin's index by running, `npm run reskindex`. From 27e311f7e8dccb0f8e3774d77b612df3beb80529 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 18:15:06 +0000 Subject: [PATCH 024/168] Address PR comments --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 57cfd5cb..ba59ea26 100644 --- a/README.md +++ b/README.md @@ -57,8 +57,9 @@ to build. 1. Switch to the vector-web directory: `cd vector-web` 1. Install the prerequisites: `npm install` 1. If you are using the `develop` branch of vector-web, you will probably need - to rebuild one of the dependencies, due to + to rebuild some of the dependencies, due to https://github.com/npm/npm/issues/3055: + ``` (cd node_modules/matrix-js-sdk && npm install) (cd node_modules/matrix-react-sdk && npm install) From f17f103d1287ce4390505a31abc13fd1484abf42 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 18:19:44 +0000 Subject: [PATCH 025/168] s/build/compile/ for js sdk --- scripts/jenkins.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh index bd27d6e3..6ba384e1 100755 --- a/scripts/jenkins.sh +++ b/scripts/jenkins.sh @@ -20,7 +20,7 @@ rm -r node_modules/olm cp -r olm/package node_modules/olm # we may be using dev branches of js-sdk and react-sdk, in which case we need to build them -(cd node_modules/matrix-js-sdk && npm run build) +(cd node_modules/matrix-js-sdk && npm run compile) (cd node_modules/matrix-react-sdk && npm run build) # run the mocha tests From 70f48343ee905f09be867207f5d8eed53f3d896d Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 11 Jan 2017 19:03:52 +0000 Subject: [PATCH 026/168] It's now just build --- scripts/jenkins.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh index 6ba384e1..bd27d6e3 100755 --- a/scripts/jenkins.sh +++ b/scripts/jenkins.sh @@ -20,7 +20,7 @@ rm -r node_modules/olm cp -r olm/package node_modules/olm # we may be using dev branches of js-sdk and react-sdk, in which case we need to build them -(cd node_modules/matrix-js-sdk && npm run compile) +(cd node_modules/matrix-js-sdk && npm run build) (cd node_modules/matrix-react-sdk && npm run build) # run the mocha tests From 0d05e607f067ccc0d6d6a6740bb004262a1ff727 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 12 Jan 2017 17:24:28 +0000 Subject: [PATCH 027/168] install js-sdk in travis too --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index 1fbc4dcc..af738bb4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,4 +3,5 @@ node_js: - 6 # node v6, to match jenkins install: - npm install + - (cd node_modules/matrix-js-sdk && npm install) - (cd node_modules/matrix-react-sdk && npm run build) From 40545bd48e45fa8f0b40841b89e6f20c1afa9599 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 13 Jan 2017 11:15:55 +0000 Subject: [PATCH 028/168] Released react-sdk & js-sdk --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index fd7c3b12..823dd04d 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", - "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", - "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop", + "matrix-js-sdk": "0.7.4-rc.1", + "matrix-react-sdk": "0.8.5-rc.1", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From 9471c30f89ded93656ac5bd3f29a296b77a8d894 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 13 Jan 2017 11:21:08 +0000 Subject: [PATCH 029/168] Prepare changelog for v0.9.6-rc.1 --- CHANGELOG.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 265cbe80..00772055 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,26 @@ +Changes in [0.9.6-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.6-rc.1) (2017-01-13) +==================================================================================================== +[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.5...v0.9.6-rc.1) + + * Build the js-sdk in the CI script + [\#2920](https://github.com/vector-im/riot-web/pull/2920) + * Hopefully fix Windows shortcuts + [\#2917](https://github.com/vector-im/riot-web/pull/2917) + * Update README now the js-sdk has a transpile step + [\#2921](https://github.com/vector-im/riot-web/pull/2921) + * Use the role for 'toggle dev tools' + [\#2915](https://github.com/vector-im/riot-web/pull/2915) + * Enable screen sharing easter-egg in desktop app + [\#2909](https://github.com/vector-im/riot-web/pull/2909) + * make electron send email validation URLs with a nextlink of riot.im + [\#2808](https://github.com/vector-im/riot-web/pull/2808) + * add Debian Stretch install steps to readme + [\#2809](https://github.com/vector-im/riot-web/pull/2809) + * Update desktop build instructions fixes #2792 + [\#2793](https://github.com/vector-im/riot-web/pull/2793) + * CSS for the delete threepid button + [\#2784](https://github.com/vector-im/riot-web/pull/2784) + Changes in [0.9.5](https://github.com/vector-im/riot-web/releases/tag/v0.9.5) (2016-12-24) ========================================================================================== [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.4...v0.9.5) From e1c1937855967e0a1da57d00728b091d9dbfdec0 Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 13 Jan 2017 11:21:08 +0000 Subject: [PATCH 030/168] v0.9.6-rc.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 823dd04d..ab9e36c5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "riot-web", "productName": "Riot", "main": "electron/src/electron-main.js", - "version": "0.9.5", + "version": "0.9.6-rc.1", "description": "A feature-rich client for Matrix.org", "author": "Vector Creations Ltd.", "repository": { From ccf7db7cc227b4d5a8996d485493b0b8f0c06cc2 Mon Sep 17 00:00:00 2001 From: Hubert Chathi Date: Fri, 13 Jan 2017 15:06:29 -0500 Subject: [PATCH 031/168] Fix a couple more references to vector-web in README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f82572fb..1368589e 100644 --- a/README.md +++ b/README.md @@ -46,9 +46,9 @@ to build. 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0` 1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git` -1. Switch to the vector-web directory: `cd vector-web` +1. Switch to the riot-web directory: `cd riot-web` 1. Install the prerequisites: `npm install` -1. If you are using the `develop` branch of vector-web, you will probably need +1. If you are using the `develop` branch of riot-web, you will probably need to rebuild one of the dependencies, due to https://github.com/npm/npm/issues/3055: `(cd node_modules/matrix-react-sdk && npm install)` From 5edb5f6487404b89da45f13f3d8444dd1f533d0f Mon Sep 17 00:00:00 2001 From: Jani Mustonen Date: Fri, 6 Jan 2017 01:37:12 +0200 Subject: [PATCH 032/168] Turned divs to button-likes to comply with MDN's recommendations --- src/components/structures/BottomLeftMenu.js | 17 ++++---- src/components/structures/RightPanel.js | 17 +++++--- src/components/structures/RoomSubList.js | 13 +++--- src/components/structures/SearchBox.js | 43 +++++++++++++++---- src/components/views/elements/ImageView.js | 3 +- src/components/views/globals/MatrixToolbar.js | 3 +- src/components/views/rooms/SearchBar.js | 11 ++--- 7 files changed, 74 insertions(+), 33 deletions(-) diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js index 0ea35b4e..1e352fa1 100644 --- a/src/components/structures/BottomLeftMenu.js +++ b/src/components/structures/BottomLeftMenu.js @@ -20,6 +20,7 @@ var React = require('react'); var ReactDOM = require('react-dom'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'BottomLeftMenu', @@ -101,22 +102,22 @@ module.exports = React.createClass({ return (
-
+ { this.getLabel("Start chat", this.state.peopleHover) } -
-
+ + { this.getLabel("Room directory", this.state.directoryHover) } -
-
+ + { this.getLabel("Create new room", this.state.roomsHover) } -
-
+ + { this.getLabel("Settings", this.state.settingsHover) } -
+
); diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js index d1622e5f..7bd5d3b9 100644 --- a/src/components/structures/RightPanel.js +++ b/src/components/structures/RightPanel.js @@ -23,6 +23,7 @@ var dis = require('matrix-react-sdk/lib/dispatcher'); var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg"); var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); var Modal = require('matrix-react-sdk/lib/Modal'); +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'RightPanel', @@ -207,12 +208,12 @@ module.exports = React.createClass({ if (user_is_in_room) { inviteGroup = -
+
Invite to this room
-
; + ; } } @@ -220,20 +221,26 @@ module.exports = React.createClass({ if (this.props.roomId) { buttonGroup =
-
+
+
{ membersBadge ? membersBadge :  }
{ membersHighlight } +
-
+
+
 
{ filesHighlight } +
-
+
+
 
{ notificationsHighlight } +
; } diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e87f3f8a..af8500df 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -26,6 +26,7 @@ var Unread = require('matrix-react-sdk/lib/Unread'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs'); var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils'); +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); // turn this on for drop & drag console debugging galore var debug = false; @@ -417,15 +418,17 @@ var RoomSubList = React.createClass({ } } + var tabindex = this.props.searchFilter === "" ? "0" : "-1"; + return (
-
+ { this.props.collapsed ? '' : this.props.label }
{ roomCount }
{ badge } { incomingCall } -
+
); }, @@ -447,11 +450,11 @@ var RoomSubList = React.createClass({ }); return ( -
+
more
-
{ content }
-
+
{ content }
+ ); }, diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 7fc51000..036ff3f1 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -20,6 +20,7 @@ var React = require('react'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'SearchBox', @@ -35,6 +36,25 @@ module.exports = React.createClass({ }; }, + componentDidMount: function() { + this.dispatcherRef = dis.register(this.onAction); + }, + + componentWillUnmount: function() { + dis.unregister(this.dispatcherRef); + }, + + onAction: function(payload) { + switch (payload.action) { + // Clear up the text field when a room is selected. + case 'view_room': + if (this.refs.search) { + this._clearSearch(); + } + break; + } + }, + onChange: function() { if (!this.refs.search) return; this.setState({ searchTerm: this.refs.search.value }); @@ -61,35 +81,42 @@ module.exports = React.createClass({ } }, + _clearSearch: function() { + this.refs.search.value = ""; + this.onChange(); + }, + render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); + var collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0"; + var toggleCollapse; if (this.props.collapsed) { toggleCollapse = -
+ -
+ } else { toggleCollapse = -
+ -
+ } var searchControls; if (!this.props.collapsed) { searchControls = [ this.state.searchTerm.length > 0 ? -
{ this.refs.search.value = ""; this.onChange(); } }> + { this._clearSearch(); } }> -
+ :
- Close + Close
diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js index a22e15ff..dbe4196a 100644 --- a/src/components/views/globals/MatrixToolbar.js +++ b/src/components/views/globals/MatrixToolbar.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var Notifier = require("matrix-react-sdk/lib/Notifier"); var sdk = require('matrix-react-sdk') +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'MatrixToolbar', @@ -38,7 +39,7 @@ module.exports = React.createClass({
You are not receiving desktop notifications. Enable them now
-
+
); } diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js index 99e77064..1653f269 100644 --- a/src/components/views/rooms/SearchBar.js +++ b/src/components/views/rooms/SearchBar.js @@ -20,6 +20,7 @@ var React = require('react'); var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg'); var sdk = require('matrix-react-sdk'); var classNames = require('classnames'); +var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton'); module.exports = React.createClass({ displayName: 'SearchBar', @@ -57,12 +58,12 @@ module.exports = React.createClass({ var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' }); return ( -
+
-
Search
-
This Room
-
All Rooms
- + Search + This Room + All Rooms +
); } From 002339fb86ffcd128ba90a0508d85e22a94255fa Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 02:10:45 +0000 Subject: [PATCH 033/168] factor out some more colours --- src/skins/vector/css/_common.scss | 4 +-- .../structures/_UserSettings.scss | 6 ++--- .../structures/login/_Login.scss | 2 +- .../views/elements/_DirectorySearchBox.scss | 2 +- .../views/elements/_ProgressBar.scss | 4 +-- .../views/rooms/_MemberInfo.scss | 2 +- .../views/rooms/_MemberList.scss | 2 +- .../views/rooms/_RoomSettings.scss | 2 +- src/skins/vector/css/themes/_base.scss | 26 +++++++++++++++---- src/skins/vector/css/themes/_dark.scss | 20 +++++++++++++- .../vector-web/structures/_RoomDirectory.scss | 2 +- .../views/rooms/_RoomDropTarget.scss | 2 +- 12 files changed, 54 insertions(+), 20 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index ed96b48c..9e2ac1f4 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -174,13 +174,13 @@ textarea { left: 0; width: 100%; height: 100%; - background-color: #e9e9e9; + background-color: $dialog-background-bg-color; opacity: 0.8; } .mx_Dialog_lightbox .mx_Dialog_background { opacity: 0.85; - background-color: #000; + background-color: $lightbox-background-bg-color; } .mx_Dialog_lightbox .mx_Dialog { diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 6ba1002b..1379063d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -58,7 +58,7 @@ limitations under the License. clear: both; margin-left: 63px; text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 26px; @@ -166,10 +166,10 @@ limitations under the License. { display: inline-block; border: 0px; - border-bottom: 1px solid rgba(151, 151, 151, 0.5); + border-bottom: 1px solid $input-underline-color; padding: 0px; width: 240px; - color: rgba(74, 74, 74, 0.9); + color: $input-fg-color; font-family: 'Open Sans', Helvetica, Arial, Sans-Serif; font-size: 16px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 5f4164e8..75dc7180 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -147,7 +147,7 @@ limitations under the License. } .mx_Login_error { - color: #ff2020; + color: $warning-color; font-weight: bold; text-align: center; /* diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index dd953ab9..66063733 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { padding: 3px; padding-left: 10px; padding-right: 10px; - background-color: #efefef; + background-color: $plinth-bg-color; border-radius: 3px; background-image: url('img/icon-return.svg'); background-position: 8px 70%; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss index 7b5e0c74..a3fee232 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss @@ -16,10 +16,10 @@ limitations under the License. .mx_ProgressBar { height: 5px; - border: 1px solid black; + border: 1px solid $progressbar-color; } .mx_ProgressBar_fill { height: 100%; - background-color: #000; + background-color: $progressbar-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 3b4b653e..970c2496 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -61,7 +61,7 @@ limitations under the License. .mx_MemberInfo h3 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 16px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 3c7e3ec5..8a6f1172 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -96,7 +96,7 @@ limitations under the License. .mx_MemberList_invited h2 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; padding-left: 3px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index 132c9792..d9de0e8a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -81,7 +81,7 @@ limitations under the License. .mx_RoomSettings h3 { text-transform: uppercase; - color: #3d3b39; + color: $h3-color; font-weight: 600; font-size: 13px; margin-top: 36px; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index b9fd2d12..e623372a 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -1,5 +1,4 @@ - // typical text (dark-on-white in light skin) $primary-fg-color: #454545; $primary-bg-color: #ffffff; @@ -20,6 +19,12 @@ $warning-color: #ff0064; // left-panel style muted accent color $secondary-accent-color: #eaf5f0; +// used by RoomDirectory permissions +$plinth-bg-color: $secondary-accent-color; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(255,255,255,0.5); + // used by AddressSelector $selected-color: #eaf5f0; @@ -35,18 +40,27 @@ $input-border-color: #f0f0f0; // apart from login forms, which have stronger border $strong-input-border-color: #c7c7c7; +// used for UserSettings EditableText +$input-underline-color: rgba(151, 151, 151, 0.5); +$input-fg-color: rgba(74, 74, 74, 0.9); + // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #f6f6f6; $avatar-initial-color: #ffffff; +$h3-color: #3d3b39; + +$dialog-background-bg-color: #e9e9e9; +$lightbox-background-bg-color: #000; + // ******************** $roomtile-name-color: rgba(69, 69, 69, 0.8); $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8); -$roomsublist-label-fg-color: #3d3b39; +$roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #d3efe1; // ******************** @@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; $e2e-warning-color: #ba6363; -// ******************** - +/*** ImageView ***/ $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; -$lightbox-border-color: #ffffff; \ No newline at end of file +$lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; \ No newline at end of file diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index e2c33e3e..1d93c1a4 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -19,6 +19,12 @@ $warning-color: #ff0064; // left-panel style muted accent color $secondary-accent-color: $primary-bg-color; +// used by RoomDirectory permissions +$plinth-bg-color: #474747; + +// used by RoomDropTarget +$droptarget-bg-color: rgba(45,45,45,0.5); + // used by AddressSelector $selected-color: #eaf5f0; @@ -34,18 +40,27 @@ $input-border-color: #3a3a3a; // apart from login forms, which have stronger border $strong-input-border-color: #656565; +// used for UserSettings EditableText +$input-underline-color: $primary-fg-color; +$input-fg-color: $primary-fg-color; + // context menus $menu-border-color: rgba(187, 187, 187, 0.5); $menu-bg-color: #373737; $avatar-initial-color: #2d2d2d; +$h3-color: $primary-fg-color; + +$dialog-background-bg-color: #000; +$lightbox-background-bg-color: #000; + // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); $roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); -$roomsublist-label-fg-color: $primary-fg-color; +$roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; // ******************** @@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363; $lightbox-bg-color: #454545; $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; + +// unused? +$progressbar-color: #000; \ No newline at end of file diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index e5df8741..3dd885ba 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -110,7 +110,7 @@ limitations under the License. padding-right: 5px; height: 15px; border-radius: 11px; - background-color: $secondary-accent-color; + background-color: $plinth-bg-color; text-transform: uppercase; font-weight: 600; font-size: 11px; diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss index 2fe16ca9..e91658e8 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss @@ -24,7 +24,7 @@ limitations under the License. padding-bottom: 5px; border: 1px dashed $accent-color; color: $primary-fg-color; - background-color: rgba(255,255,255,0.5); + background-color: $droptarget-bg-color; border-radius: 4px; } From 231306ea7ce629fe0e58cab62f038d2b6e271dc7 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 16 Jan 2017 13:24:44 +0000 Subject: [PATCH 034/168] Update js-sdk & react-sdk --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ab9e36c5..7b2916e0 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", - "matrix-js-sdk": "0.7.4-rc.1", - "matrix-react-sdk": "0.8.5-rc.1", + "matrix-js-sdk": "0.7.4", + "matrix-react-sdk": "0.8.5", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From 3f3a31e475598237d0a44bd53746a06a48965bda Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 16 Jan 2017 13:26:21 +0000 Subject: [PATCH 035/168] Prepare changelog for v0.9.6 --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 00772055..ee745baa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +Changes in [0.9.6](https://github.com/vector-im/riot-web/releases/tag/v0.9.6) (2017-01-16) +========================================================================================== +[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6-rc.1...v0.9.6) + + * Update to matrix-js-sdk 0.9.6 for video calling fix + Changes in [0.9.6-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.6-rc.1) (2017-01-13) ==================================================================================================== [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.5...v0.9.6-rc.1) From 22060ac5a44b9d4fa66b8ffd74690588ca252297 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 16 Jan 2017 13:26:22 +0000 Subject: [PATCH 036/168] v0.9.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7b2916e0..f169cf9b 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "riot-web", "productName": "Riot", "main": "electron/src/electron-main.js", - "version": "0.9.6-rc.1", + "version": "0.9.6", "description": "A feature-rich client for Matrix.org", "author": "Vector Creations Ltd.", "repository": { From ae7820e8f28552ca1a19fe7612a6d1c02c5b633f Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 16 Jan 2017 13:37:18 +0000 Subject: [PATCH 037/168] Fix merge --- package.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/package.json b/package.json index 054dedf9..f169cf9b 100644 --- a/package.json +++ b/package.json @@ -62,13 +62,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", -<<<<<<< HEAD - "matrix-js-sdk": "0.7.2", - "matrix-react-sdk": "0.8.4", -======= "matrix-js-sdk": "0.7.4", "matrix-react-sdk": "0.8.5", ->>>>>>> release-v0.9.6 "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From b3bff92cc2cbe0f8818f2ae1563335671d0a2733 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 16 Jan 2017 18:01:25 +0000 Subject: [PATCH 038/168] Put parent build hash in webpack output filenames In order to better support a world where old build artifacts are available (which is necessary to support bundle.js splitting), collect all the webpack artifacts for the build into a single directory. Then we'll be able to clear out old builds after a few weeks, knowing they won't be in use any more. --- webpack.config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 3500fedc..9c0c6bbb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,7 +40,8 @@ module.exports = { }, output: { path: path.join(__dirname, "webapp"), - filename: "[name].[chunkhash].js", + filename: "[hash]/[name].js", + chunkFilename: "[hash]/[name].js", devtoolModuleFilenameTemplate: function(info) { // Reading input source maps gives only relative paths here for // everything. Until I figure out how to fix this, this is a @@ -79,7 +80,7 @@ module.exports = { }), new ExtractTextPlugin( - "[name].[contenthash].css", + "[hash]/[name].css", { allChunks: true } From 906d42688eb153a10e0e8f96701af1ebf4897ee0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:40:29 +0000 Subject: [PATCH 039/168] make autoprefixer work by reordering it --- postcss.config.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/postcss.config.json b/postcss.config.json index be3585cf..7ed32cda 100644 --- a/postcss.config.json +++ b/postcss.config.json @@ -1,7 +1,7 @@ { "use": [ - "autoprefixer", "postcss-import", + "autoprefixer", "postcss-simple-vars", "postcss-extend", "postcss-nested", @@ -11,8 +11,5 @@ "parser": "postcss-scss", "input": "src/skins/vector/css/themes/[^_]*.scss", "dir": "build", - "local-plugins": true, - "autoprefixer": { - "browsers": "> 5%" - } -} \ No newline at end of file + "local-plugins": true +} From dc1563d916900a1ad66af358edc26f02d25a1c8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:55:29 +0000 Subject: [PATCH 040/168] strip out unneeded webkit prefixes now we're using autoprefixer --- src/skins/vector/css/_common.scss | 5 ---- .../structures/_FilePanel.scss | 3 -- .../structures/_MatrixChat.scss | 25 ---------------- .../structures/_NotificationPanel.scss | 3 -- .../structures/_RoomStatusBar.scss | 3 -- .../structures/_RoomView.scss | 29 ------------------- .../structures/_SearchBox.scss | 2 -- .../structures/_UserSettings.scss | 9 ------ .../structures/login/_Login.scss | 4 --- .../views/elements/_DirectorySearchBox.scss | 2 -- .../views/rooms/_LinkPreviewWidget.scss | 4 --- .../views/rooms/_MemberList.scss | 8 ----- .../views/rooms/_MessageComposer.scss | 1 - .../views/rooms/_RoomHeader.scss | 15 ---------- .../views/rooms/_RoomPreviewBar.scss | 7 ----- .../views/rooms/_SearchableEntityList.scss | 4 --- .../views/voip/_IncomingCallbox.scss | 2 -- .../css/vector-web/structures/_LeftPanel.scss | 9 ------ .../vector-web/structures/_RightPanel.scss | 12 -------- .../vector-web/structures/_RoomDirectory.scss | 9 ------ .../vector-web/views/elements/_ImageView.scss | 14 --------- .../vector-web/views/elements/_Spinner.scss | 4 --- .../views/globals/_GuestWarningBar.scss | 3 -- .../views/globals/_MatrixToolbar.scss | 4 --- .../vector-web/views/rooms/_SearchBar.scss | 3 -- 25 files changed, 184 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 9e2ac1f4..6a623855 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; @@ -128,14 +127,10 @@ textarea { width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; - -webkit-justify-content: center; justify-content: center; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 2f4a00ad..6c769a3b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,13 +15,10 @@ limitations under the License. */ .mx_FilePanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 5587a609..61eb0170 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,34 +27,27 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; width: 100%; height: 100%; } .mx_MatrixToolbar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; height: 40px; } .mx_GuestWarningBar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; height: 40px; @@ -68,52 +61,40 @@ limitations under the License. width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1; flex: 1; } .mx_MatrixChat .mx_LeftPanel { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; background-color: $secondary-accent-color; - -webkit-flex: 0 0 235px; flex: 0 0 235px; } .mx_MatrixChat .mx_LeftPanel.collapsed { - -webkit-flex: 0 0 60px; flex: 0 0 60px; } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; padding-left: 20px; padding-right: 22px; background-color: $primary-bg-color; - -webkit-flex: 1; flex: 1; /* Experimental fix for https://github.com/vector-im/vector-web/issues/947 @@ -132,25 +113,19 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .mx_MatrixChat .mx_RightPanel { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; - -webkit-flex: 0 0 235px; flex: 0 0 235px; } .mx_MatrixChat .mx_RightPanel.collapsed { - -webkit-flex: 0 0 122px; flex: 0 0 122px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index 06dd92f3..ed818497 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,13 +15,10 @@ limitations under the License. */ .mx_NotificationPanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index d0ac5a60..5daac88f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -123,18 +123,15 @@ limitations under the License. .mx_RoomStatusBar_tabCompleteWrapper { display: flex; - display: -webkit-flex; height: 26px; } .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar { flex: 1 1 auto; - -webkit-flex: 1 1 auto; } .mx_RoomStatusBar_tabCompleteEol { flex: 0 0 auto; - -webkit-flex: 0 0 auto; color: $accent-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 182d690c..dc668236 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,25 +18,19 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; width: 100%; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomView .mx_RoomHeader { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -53,8 +47,6 @@ limitations under the License. padding-right: 12px; margin-left: -12px; - -webkit-border-top-left-radius: 10px; - -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; @@ -77,10 +69,8 @@ limitations under the License. } .mx_RoomView_auxPanel { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; min-width: 0px; @@ -91,26 +81,20 @@ limitations under the License. overflow: auto; border-bottom: 1px solid $primary-hairline-color; - -webkit-flex: 0 0 auto; flex: 0 0 auto; } .mx_RoomView_topUnreadMessagesBar { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; } .mx_RoomView_messagePanel { - -webkit-box-ordinal-group: 4; -moz-box-ordinal-group: 4; -ms-flex-order: 4; - -webkit-order: 4; order: 4; - -webkit-flex: 1 1 0; flex: 1 1 0; width: 100%; @@ -124,22 +108,17 @@ limitations under the License. min-height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; justify-content: flex-end; - -webkit-justify-content: flex-end; } .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper { justify-content: flex-start; - -webkit-justify-content: flex-start; } .mx_RoomView_MessageList { @@ -162,10 +141,8 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; min-width: 0px; @@ -193,14 +170,11 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -webkit-box-ordinal-group: 5; -moz-box-ordinal-group: 5; -ms-flex-order: 5; - -webkit-order: 5; order: 5; width: 100%; - -webkit-flex: 0 0 auto; flex: 0 0 auto; } @@ -257,14 +231,11 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -webkit-box-ordinal-group: 6; -moz-box-ordinal-group: 6; -ms-flex-order: 6; - -webkit-order: 6; order: 6; width: 100%; - -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: 2px; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 0b536259..bd335f60 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -22,7 +22,6 @@ limitations under the License. padding-bottom: 22px; display: flex; - display: -webkit-flex; } .mx_SearchBox_searchButton { @@ -38,7 +37,6 @@ limitations under the License. .mx_SearchBox_search { flex: 1 1 auto; - -webkit-flex: 1 1 auto; width: 0px; font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; font-size: 12px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 1379063d..2c62a4ec 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,34 +20,25 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } .mx_UserSettings_body { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; - -webkit-flex: 1 1 0; flex: 1 1 0; margin-top: -20px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 75dc7180..332f313f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,14 +18,10 @@ limitations under the License. width: 100%; height: 100%; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; - -webkit-justify-content: center; justify-content: center; overflow: auto; diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss index 66063733..8824c659 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss @@ -22,14 +22,12 @@ limitations under the License. .mx_DirectorySearchBox_container { display: flex; - display: -webkit-flex; padding-left: 9px; padding-right: 9px; } .mx_DirectorySearchBox_input { flex-grow: 1; - -webkit-flex-grow: 1; border: 0; padding: 0; font-weight: 300; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss index 2e2d9f80..0e911541 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss @@ -18,14 +18,12 @@ limitations under the License. margin-top: 15px; margin-right: 15px; margin-bottom: 15px; - display: -webkit-flex; display: flex; border-left: 4px solid #ddd; color: #888; } .mx_LinkPreviewWidget_image { - -webkit-flex: 0 0 100px; flex: 0 0 100px; margin-left: 15px; text-align: center; @@ -34,7 +32,6 @@ limitations under the License. .mx_LinkPreviewWidget_caption { margin-left: 15px; - -webkit-flex: 1 1 auto; flex: 1 1 auto; } @@ -56,7 +53,6 @@ limitations under the License. .mx_LinkPreviewWidget_cancel { visibility: hidden; cursor: pointer; - -webkit-flex: 0 0 40px; flex: 0 0 40px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 8a6f1172..403de7f9 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -20,22 +20,17 @@ limitations under the License. margin-top: 12px; margin-right: 20px; - -webkit-flex: 1; flex: 1; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_MemberList .mx_Spinner { flex: 0; - -webkit-flex: 0; } .mx_MemberList_chevron { @@ -48,7 +43,6 @@ limitations under the License. overflow-y: auto; order: 1; - -webkit-flex: 1 1 0; flex: 1 1 0px; } @@ -80,7 +74,6 @@ limitations under the License. .mx_MemberList_joined { order: 2; flex: 1 0 0; - -webkit-flex: 1 0 0; overflow-y: auto; } @@ -89,7 +82,6 @@ limitations under the License. .mx_MemberList_invited { order: 3; flex: 0 0 100px; - -webkit-flex: 0 0 100px; overflow-y: auto; } */ diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index e5ffd220..a4549c0f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -105,7 +105,6 @@ limitations under the License. border: 0px; resize: none; outline: none; - -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: $primary-fg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index a26f12ee..73327ea6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -25,36 +25,28 @@ limitations under the License. margin: auto; height: 70px; - -webkit-align-items: center; align-items: center; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 1; flex: 1; } .mx_RoomHeader_spinner { height: 36px; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; padding-left: 12px; @@ -71,16 +63,13 @@ limitations under the License. margin-top: -2px; text-align: center; - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; cursor: pointer; /* - -webkit-flex: 0 0 90px; flex: 0 0 90px; */ padding-left: 12px; @@ -88,10 +77,8 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; cursor: pointer; @@ -105,10 +92,8 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 6b71f96d..0d030ad7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -18,19 +18,14 @@ limitations under the License. text-align: center; height: 176px; - -webkit-align-items: center; align-items: center; flex-direction: column; - -webkit-flex-direction: column; justify-content: center; - -webkit-justify-content: center; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; } @@ -56,9 +51,7 @@ limitations under the License. } .mx_RoomPreviewBar_warning { - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; padding: 8px; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index 9a24868d..b404da02 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -16,10 +16,8 @@ limitations under the License. .mx_SearchableEntityList { display: flex; - display: -webkit-flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_SearchableEntityList_query { @@ -49,7 +47,6 @@ limitations under the License. .mx_SearchableEntityList_listWrapper { flex: 1; - -webkit-flex: 1; overflow-y: auto; } @@ -67,7 +64,6 @@ limitations under the License. .mx_SearchableEntityList_hrWrapper { width: 100%; flex: 0 0 auto; - -webkit-flex: 0 0 auto; } .mx_SearchableEntityList hr { diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index 97a82a03..d45c4a58 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -41,14 +41,12 @@ limitations under the License. .mx_IncomingCallBox_buttons { display: flex; - display: -webkit-flex; } .mx_IncomingCallBox_buttons_cell { vertical-align: middle; padding: 6px; flex: 1; - -webkit-flex: 1; } .mx_IncomingCallBox_buttons_decline, diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 4e328171..36a1e298 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,13 +17,10 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_LeftPanel_hideButton { @@ -39,13 +36,10 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; - -webkit-flex: 1 1 0; flex: 1 1 0; overflow-y: auto; @@ -57,16 +51,13 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; border-top: 1px solid rgba(118, 207, 166, 0.2); margin-left: 16px; /* gutter */ margin-right: 16px; /* gutter */ - -webkit-flex: 0 0 60px; flex: 0 0 60px; z-index: 1; } diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index b9dbf1cd..000d36b3 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,26 +17,20 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RightPanel_header { - -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; - -webkit-order: 1; order: 1; border-bottom: 1px solid $primary-hairline-color; margin-right: 20px; - -webkit-flex: 0 0 70px; flex: 0 0 70px; } @@ -81,26 +75,20 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; - -webkit-order: 2; order: 2; flex: 1 1 0; - -webkit-flex: 1 1 0; } .mx_RightPanel_footer { - -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; - -webkit-order: 3; order: 3; border-top: 1px solid $primary-hairline-color; margin-right: 20px; - -webkit-flex: 0 0 60px; flex: 0 0 60px; } diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 3dd885ba..c80a8d8f 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,33 +22,25 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomDirectory_list { - -webkit-flex: 1; flex: 1; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; flex-direction: column; - -webkit-flex-direction: column; } .mx_RoomDirectory_list .mx_RoomView_messageListWrapper { justify-content: flex-start; - -webkit-justify-content: flex-start; } .mx_RoomDirectory_listheader { @@ -72,7 +64,6 @@ limitations under the License. .mx_RoomDirectory_tableWrapper { overflow-y: auto; - -webkit-flex: 1 1 0; flex: 1 1 0; } diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index d66d9c7d..d31a9d27 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -19,18 +19,14 @@ limitations under the License. */ .mx_ImageView { - display: -webkit-flex; display: flex; width: 100%; height: 100%; - -webkit-align-items: center; align-items: center; } .mx_ImageView_lhs { - -webkit-box-ordinal-group: 1; order: 1; - -webkit-flex: 1; flex: 1 1 10%; min-width: 60px; /* @@ -40,18 +36,13 @@ limitations under the License. } .mx_ImageView_content { - -webkit-box-ordinal-group: 2; order: 2; /* min-width hack needed for FF */ min-width: 0px; height: 90%; - -webkit-flex: 15; flex: 15 15 0; - display: -webkit-flex; display: flex; - -webkit-align-items: center; - -webkit-justify-content: center; align-items: center; justify-content: center; } @@ -78,11 +69,8 @@ limitations under the License. .mx_ImageView_label { text-align: left; display: flex; - display: -webkit-flex; justify-content: center; - -webkit-justify-content: center; flex-direction: column; - -webkit-flex-direction: column; padding-left: 30px; padding-right: 30px; min-height: 100%; @@ -141,9 +129,7 @@ limitations under the License. } .mx_ImageView_rhs { - -webkit-box-ordinal-group: 3; order: 3; - -webkit-flex: 1; flex: 1 1 10%; min-width: 300px; /* diff --git a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss index 3831cc4c..aea57379 100644 --- a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss +++ b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss @@ -15,16 +15,12 @@ limitations under the License. */ .mx_Spinner { - display: -webkit-flex; display: flex; - -webkit-align-items: center; - -webkit-justify-content: center; align-items: center; justify-content: center; width: 100%; height: 100%; flex: 1; - -webkit-flex: 1; } .mx_MatrixChat_middlePanel .mx_Spinner { diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index e8b5aebb..2141f3a8 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,12 +18,9 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 9bd70bb9..9e21bcb1 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,12 +18,9 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -webkit-box; display: -moz-box; display: -ms-flexbox; - display: -webkit-flex; display: flex; - -webkit-align-items: center; align-items: center; } @@ -34,7 +31,6 @@ limitations under the License. } .mx_MatrixToolbar_content { - -webkit-flex: 1; flex: 1; } diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss index 5d195322..079ea16c 100644 --- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss +++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss @@ -18,9 +18,7 @@ limitations under the License. padding-top: 5px; padding-bottom: 5px; display: flex; - display: -webkit-flex; align-items: center; - -webkit-align-items: center; } .mx_SearchBar_input { @@ -32,7 +30,6 @@ limitations under the License. padding-left: 11px; width: auto; flex: 1 1 0; - -webkit-flex: 1 1 0; } .mx_SearchBar_searchButton { From c305b72b918c08661d0b068121011e4ab7f5ae8f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:58:02 +0000 Subject: [PATCH 041/168] strip out unneeded -moz- prefixes --- src/skins/vector/css/_common.scss | 2 -- .../css/matrix-react-sdk/structures/_FilePanel.scss | 1 - .../css/matrix-react-sdk/structures/_MatrixChat.scss | 9 --------- .../structures/_NotificationPanel.scss | 1 - .../css/matrix-react-sdk/structures/_RoomView.scss | 11 ----------- .../matrix-react-sdk/structures/_UserSettings.scss | 3 --- .../css/matrix-react-sdk/structures/login/_Login.scss | 1 - .../css/matrix-react-sdk/views/rooms/_MemberList.scss | 1 - .../views/rooms/_MessageComposer.scss | 1 - .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss | 6 ------ .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss | 1 - .../vector/css/vector-web/structures/_LeftPanel.scss | 3 --- .../vector/css/vector-web/structures/_RightPanel.scss | 4 ---- .../css/vector-web/structures/_RoomDirectory.scss | 2 -- .../vector-web/views/globals/_GuestWarningBar.scss | 1 - .../css/vector-web/views/globals/_MatrixToolbar.scss | 1 - 16 files changed, 48 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 6a623855..5e0b902a 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; } @@ -127,7 +126,6 @@ textarea { width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 6c769a3b..2fb1131d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_FilePanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 61eb0170..72f1feff 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,7 +27,6 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -moz-box; display: -ms-flexbox; display: flex; @@ -38,7 +37,6 @@ limitations under the License. } .mx_MatrixToolbar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -46,7 +44,6 @@ limitations under the License. } .mx_GuestWarningBar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -61,11 +58,9 @@ limitations under the License. width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -73,7 +68,6 @@ limitations under the License. } .mx_MatrixChat .mx_LeftPanel { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -87,7 +81,6 @@ limitations under the License. } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -113,13 +106,11 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -moz-box; display: -ms-flexbox; display: flex; } .mx_MatrixChat .mx_RightPanel { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index ed818497..b3f724d8 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_NotificationPanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index dc668236..6a5db95a 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,7 +18,6 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; @@ -27,7 +26,6 @@ limitations under the License. } .mx_RoomView .mx_RoomHeader { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -47,8 +45,6 @@ limitations under the License. padding-right: 12px; margin-left: -12px; - -moz-border-radius-topleft: 10px; - -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; @@ -69,7 +65,6 @@ limitations under the License. } .mx_RoomView_auxPanel { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -85,13 +80,11 @@ limitations under the License. } .mx_RoomView_topUnreadMessagesBar { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; } .mx_RoomView_messagePanel { - -moz-box-ordinal-group: 4; -ms-flex-order: 4; order: 4; @@ -108,7 +101,6 @@ limitations under the License. min-height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; @@ -141,7 +133,6 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -170,7 +161,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -moz-box-ordinal-group: 5; -ms-flex-order: 5; order: 5; @@ -231,7 +221,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -moz-box-ordinal-group: 6; -ms-flex-order: 6; order: 6; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index 2c62a4ec..d190e32c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,14 +20,12 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -35,7 +33,6 @@ limitations under the License. } .mx_UserSettings_body { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 332f313f..90dd2c1e 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,7 +18,6 @@ limitations under the License. width: 100%; height: 100%; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 403de7f9..9c1daa95 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -22,7 +22,6 @@ limitations under the License. flex: 1; - display: -moz-box; display: -ms-flexbox; display: flex; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index a4549c0f..5ecb3441 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -105,7 +105,6 @@ limitations under the License. border: 0px; resize: none; outline: none; - -moz-box-shadow: none; box-shadow: none; color: $primary-fg-color; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 73327ea6..297a3f16 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -27,7 +27,6 @@ limitations under the License. align-items: center; - display: -moz-box; display: -ms-flexbox; display: flex; } @@ -35,7 +34,6 @@ limitations under the License. .mx_RoomHeader_leftRow { margin-left: -2px; - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -45,7 +43,6 @@ limitations under the License. .mx_RoomHeader_spinner { height: 36px; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -63,7 +60,6 @@ limitations under the License. margin-top: -2px; text-align: center; - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -77,7 +73,6 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; @@ -92,7 +87,6 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 0d030ad7..2114e01a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -24,7 +24,6 @@ limitations under the License. justify-content: center; - display: -moz-box; display: -ms-flexbox; display: flex; } diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 36a1e298..030c5367 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; @@ -36,7 +35,6 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -51,7 +49,6 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 000d36b3..a76e5020 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,14 +17,12 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -moz-box; display: -ms-flexbox; display: flex; flex-direction: column; } .mx_RightPanel_header { - -moz-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; @@ -75,14 +73,12 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -moz-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; flex: 1 1 0; } .mx_RightPanel_footer { - -moz-box-ordinal-group: 3; -ms-flex-order: 3; order: 3; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index c80a8d8f..e2b65e68 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,7 +22,6 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; @@ -32,7 +31,6 @@ limitations under the License. .mx_RoomDirectory_list { flex: 1; - display: -moz-box; display: -ms-flexbox; display: flex; diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index 2141f3a8..d9d3cb19 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index 9e21bcb1..a425d8cd 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; From d74dfc9ee7c0affc4bc3ca7e7bf8c6befc7a46e6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 18:58:37 +0000 Subject: [PATCH 042/168] strip out unneeded -ms- prefixes --- src/skins/vector/css/_common.scss | 2 -- .../css/matrix-react-sdk/structures/_FilePanel.scss | 1 - .../css/matrix-react-sdk/structures/_MatrixChat.scss | 9 --------- .../matrix-react-sdk/structures/_NotificationPanel.scss | 1 - .../css/matrix-react-sdk/structures/_RoomView.scss | 9 --------- .../css/matrix-react-sdk/structures/_UserSettings.scss | 3 --- .../css/matrix-react-sdk/structures/login/_Login.scss | 1 - .../css/matrix-react-sdk/views/rooms/_MemberList.scss | 1 - .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss | 6 ------ .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss | 1 - .../vector/css/vector-web/structures/_LeftPanel.scss | 3 --- .../vector/css/vector-web/structures/_RightPanel.scss | 4 ---- .../vector/css/vector-web/structures/_RoomDirectory.scss | 2 -- .../css/vector-web/views/globals/_GuestWarningBar.scss | 1 - .../css/vector-web/views/globals/_MatrixToolbar.scss | 1 - 15 files changed, 45 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 5e0b902a..a2b7399e 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,6 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; } @@ -126,7 +125,6 @@ textarea { width: 100%; height: 100%; - display: -ms-flexbox; display: flex; align-items: center; justify-content: center; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss index 2fb1131d..872085b6 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_FilePanel { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss index 72f1feff..05a39ea7 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss @@ -27,7 +27,6 @@ limitations under the License. } .mx_MatrixChat_wrapper { - display: -ms-flexbox; display: flex; flex-direction: column; @@ -37,14 +36,12 @@ limitations under the License. } .mx_MatrixToolbar { - -ms-flex-order: 1; order: 1; height: 40px; } .mx_GuestWarningBar { - -ms-flex-order: 1; order: 1; height: 40px; @@ -58,17 +55,14 @@ limitations under the License. width: 100%; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-order: 2; order: 2; flex: 1; } .mx_MatrixChat .mx_LeftPanel { - -ms-flex-order: 1; order: 1; background-color: $secondary-accent-color; @@ -81,7 +75,6 @@ limitations under the License. } .mx_MatrixChat .mx_MatrixChat_middlePanel { - -ms-flex-order: 2; order: 2; padding-left: 20px; @@ -106,12 +99,10 @@ limitations under the License. * point, but instead we fudge it and make the middlePanel * flex itself. */ - display: -ms-flexbox; display: flex; } .mx_MatrixChat .mx_RightPanel { - -ms-flex-order: 3; order: 3; flex: 0 0 235px; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss index b3f724d8..ef75678d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_NotificationPanel { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 6a5db95a..919b9f9b 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -18,7 +18,6 @@ limitations under the License. word-wrap: break-word; position: relative; - display: -ms-flexbox; display: flex; width: 100%; @@ -26,7 +25,6 @@ limitations under the License. } .mx_RoomView .mx_RoomHeader { - -ms-flex-order: 1; order: 1; flex: 0 0 70px; @@ -65,7 +63,6 @@ limitations under the License. } .mx_RoomView_auxPanel { - -ms-flex-order: 2; order: 2; min-width: 0px; @@ -80,12 +77,10 @@ limitations under the License. } .mx_RoomView_topUnreadMessagesBar { - -ms-flex-order: 3; order: 3; } .mx_RoomView_messagePanel { - -ms-flex-order: 4; order: 4; flex: 1 1 0; @@ -101,7 +96,6 @@ limitations under the License. min-height: 100%; - display: -ms-flexbox; display: flex; flex-direction: column; @@ -133,7 +127,6 @@ limitations under the License. } .mx_RoomView_invitePrompt { - -ms-flex-order: 2; order: 2; min-width: 0px; @@ -161,7 +154,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea { - -ms-flex-order: 5; order: 5; width: 100%; @@ -221,7 +213,6 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView .mx_MessageComposer { - -ms-flex-order: 6; order: 6; width: 100%; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss index d190e32c..5c1b4c5c 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss @@ -20,20 +20,17 @@ limitations under the License. margin-left: auto; margin-right: auto; - display: -ms-flexbox; display: flex; flex-direction: column; } .mx_UserSettings .mx_RoomHeader { - -ms-flex-order: 1; order: 1; flex: 0 0 70px; } .mx_UserSettings_body { - -ms-flex-order: 2; order: 2; flex: 1 1 0; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss index 90dd2c1e..30231b43 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss @@ -18,7 +18,6 @@ limitations under the License. width: 100%; height: 100%; - display: -ms-flexbox; display: flex; align-items: center; justify-content: center; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss index 9c1daa95..d87bced4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss @@ -22,7 +22,6 @@ limitations under the License. flex: 1; - display: -ms-flexbox; display: flex; flex-direction: column; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 297a3f16..688b8a84 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -27,14 +27,12 @@ limitations under the License. align-items: center; - display: -ms-flexbox; display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - -ms-flex-order: 1; order: 1; flex: 1; @@ -43,7 +41,6 @@ limitations under the License. .mx_RoomHeader_spinner { height: 36px; - -ms-flex-order: 2; order: 2; padding-left: 12px; @@ -60,7 +57,6 @@ limitations under the License. margin-top: -2px; text-align: center; - -ms-flex-order: 2; order: 2; cursor: pointer; @@ -73,7 +69,6 @@ limitations under the License. } .mx_RoomHeader_cancelButton { - -ms-flex-order: 2; order: 2; cursor: pointer; @@ -87,7 +82,6 @@ limitations under the License. background-color: $primary-bg-color; display: flex; align-items: center; - -ms-flex-order: 3; order: 3; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 2114e01a..3814f9c0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -24,7 +24,6 @@ limitations under the License. justify-content: center; - display: -ms-flexbox; display: flex; } diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss index 030c5367..1ce10e51 100644 --- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss @@ -17,7 +17,6 @@ limitations under the License. .mx_LeftPanel { position: relative; - display: -ms-flexbox; display: flex; flex-direction: column; } @@ -35,7 +34,6 @@ limitations under the License. } .mx_LeftPanel .mx_RoomList_scrollbar { - -ms-flex-order: 1; order: 1; flex: 1 1 0; @@ -49,7 +47,6 @@ limitations under the License. } .mx_LeftPanel .mx_BottomLeftMenu { - -ms-flex-order: 3; order: 3; border-top: 1px solid rgba(118, 207, 166, 0.2); diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index a76e5020..96e8698b 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -17,13 +17,11 @@ limitations under the License. .mx_RightPanel { position: relative; - display: -ms-flexbox; display: flex; flex-direction: column; } .mx_RightPanel_header { - -ms-flex-order: 1; order: 1; border-bottom: 1px solid $primary-hairline-color; @@ -73,13 +71,11 @@ limitations under the License. .mx_RightPanel .mx_MemberList, .mx_RightPanel .mx_MemberInfo, .mx_RightPanel_blank { - -ms-flex-order: 2; order: 2; flex: 1 1 0; } .mx_RightPanel_footer { - -ms-flex-order: 3; order: 3; border-top: 1px solid $primary-hairline-color; diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index e2b65e68..f0d4c860 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -22,7 +22,6 @@ limitations under the License. margin-bottom: 12px; color: $primary-fg-color; - display: -ms-flexbox; display: flex; flex-direction: column; @@ -31,7 +30,6 @@ limitations under the License. .mx_RoomDirectory_list { flex: 1; - display: -ms-flexbox; display: flex; flex-direction: column; diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss index d9d3cb19..f5bdbaf9 100644 --- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -ms-flexbox; display: flex; align-items: center; } diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss index a425d8cd..5a0b23ae 100644 --- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss +++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss @@ -18,7 +18,6 @@ limitations under the License. background-color: $accent-color; color: $accent-fg-color; - display: -ms-flexbox; display: flex; align-items: center; } From cab5bf8849395dab0afad1439ca3ae2a1a22b25b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 19:00:44 +0000 Subject: [PATCH 043/168] fix a lone lost opera vendor prefix --- src/skins/vector/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index a2b7399e..09f3fcfb 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -83,7 +83,7 @@ textarea { /* applied to side-panels and messagepanel when in RoomSettings */ .mx_fadable { opacity: 1; - -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; } /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48. From 87fd136e218000c64ed9b7369ce176dc18d1fdc0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 16 Jan 2017 23:13:47 +0000 Subject: [PATCH 044/168] factor out remaining # colours --- .../views/rooms/_EntityTile.scss | 4 ++-- .../views/rooms/_LinkPreviewWidget.scss | 4 ++-- .../views/rooms/_MemberInfo.scss | 1 - .../views/rooms/_MessageComposer.scss | 10 +++++----- .../views/rooms/_RoomHeader.scss | 17 +++-------------- .../views/rooms/_RoomPreviewBar.scss | 6 +----- .../views/rooms/_RoomSettings.scss | 2 +- .../views/rooms/_SearchableEntityList.scss | 4 ++-- .../views/voip/_IncomingCallbox.scss | 4 ++-- src/skins/vector/css/themes/_base.scss | 13 +++++++++++++ src/skins/vector/css/themes/_dark.scss | 13 +++++++++++++ .../vector-web/structures/_RoomDirectory.scss | 4 ++-- .../context_menus/_RoomTagContextMenu.scss | 3 +-- .../vector-web/views/elements/_ImageView.scss | 13 ++++--------- 14 files changed, 51 insertions(+), 47 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss index 2511f07d..3f360e79 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss @@ -77,12 +77,12 @@ limitations under the License. .mx_EntityTile_ellipsis .mx_EntityTile_name { font-style: italic; - font-color: $primary-fg-color; + color: $primary-fg-color; } .mx_EntityTile_invitePlaceholder .mx_EntityTile_name { font-style: italic; - font-color: $primary-fg-color; + color: $primary-fg-color; } .mx_EntityTile_unavailable .mx_EntityTile_avatar, diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss index 0e911541..33f283e0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss @@ -19,8 +19,8 @@ limitations under the License. margin-right: 15px; margin-bottom: 15px; display: flex; - border-left: 4px solid #ddd; - color: #888; + border-left: 4px solid $preview-widget-bar-color; + color: $preview-widget-fg-color; } .mx_LinkPreviewWidget_image { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss index 970c2496..d6fb5a19 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss @@ -69,7 +69,6 @@ limitations under the License. } .mx_MemberInfo_profileField { - font-color: #999999; font-size: 13px; position: relative; background-color: $primary-bg-color; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 5ecb3441..525cc1f6 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -57,7 +57,7 @@ limitations under the License. height: 60px; text-align: center; font-style: italic; - color: #888; + color: $greyed-fg-color; } .mx_MessageComposer_input_wrapper { @@ -90,10 +90,10 @@ limitations under the License. } .mx_MessageComposer_input blockquote { - color: rgb(119, 119, 119); + color: $blockquote-fg-color; margin: 0 0 16px; padding: 0 15px; - border-left: 4px solid rgb(221, 221, 221); + border-left: 4px solid $blockquote-bar-color; } .mx_MessageComposer_input textarea { @@ -151,7 +151,7 @@ limitations under the License. .mx_MessageComposer_formatbar_wrapper { width: 100%; - background-color: #f7f7f7; + background-color: $menu-bg-color; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08); } @@ -168,7 +168,7 @@ limitations under the License. flex-direction: row; align-items: center; font-size: 10px; - color: #888; + color: $greyed-fg-color; } .mx_MessageComposer_formatbar * { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss index 688b8a84..4affc994 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss @@ -16,7 +16,6 @@ limitations under the License. /* add 20px to the height of the header when editing */ .mx_RoomHeader_editing { - -webit-flex: 0 0 93px ! important; flex: 0 0 93px ! important; } @@ -24,25 +23,19 @@ limitations under the License. max-width: 960px; margin: auto; height: 70px; - align-items: center; - display: flex; } .mx_RoomHeader_leftRow { margin-left: -2px; - order: 1; - flex: 1; } .mx_RoomHeader_spinner { height: 36px; - order: 2; - padding-left: 12px; padding-right: 12px; } @@ -56,9 +49,7 @@ limitations under the License. line-height: 34px; margin-top: -2px; text-align: center; - order: 2; - cursor: pointer; /* @@ -70,9 +61,7 @@ limitations under the License. .mx_RoomHeader_cancelButton { order: 2; - cursor: pointer; - padding-left: 12px; padding-right: 12px; } @@ -126,7 +115,7 @@ limitations under the License. } .mx_RoomHeader_settingsHint { - color: #a2a2a2 ! important; + color: $settings-grey-fg-color ! important; } .mx_RoomHeader_searchStatus { @@ -151,7 +140,7 @@ limitations under the License. } .mx_RoomHeader_placeholder { - color: #a2a2a2 ! important; + color: $settings-grey-fg-color ! important; } .mx_RoomHeader_editable { @@ -170,7 +159,7 @@ limitations under the License. vertical-align: bottom; float: left; max-height: 42px; - color: #A2A2A2; + color: $settings-grey-fg-color; font-weight: 300; font-size: 13px; margin-left: 19px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss index 3814f9c0..34ff3a86 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss @@ -17,13 +17,9 @@ limitations under the License. .mx_RoomPreviewBar { text-align: center; height: 176px; - align-items: center; - flex-direction: column; - justify-content: center; - display: flex; } @@ -40,7 +36,7 @@ limitations under the License. .mx_RoomPreviewBar_preview_text { margin-top: 25px; - color: #a4a4a4; + color: $settings-grey-fg-color; } .mx_RoomPreviewBar_join_text a { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss index d9de0e8a..ef115f6e 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss @@ -205,7 +205,7 @@ limitations under the License. } .mx_RoomSettings_aliasPlaceholder { - color: #a2a2a2; + color: $settings-grey-fg-color; } .mx_RoomSettings_buttons { diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss index b404da02..6116dd92 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss @@ -69,8 +69,8 @@ limitations under the License. .mx_SearchableEntityList hr { height: 1px; border: 0px; - color: #e1dddd; - background-color: #e1dddd; + color: $primary-fg-color; + background-color: $primary-fg-color; margin-right: 15px; margin-top: 11px; margin-bottom: 11px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss index d45c4a58..64eac25d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss @@ -61,9 +61,9 @@ limitations under the License. } .mx_IncomingCallBox_buttons_decline { - background-color: #f48080; + background-color: $voip-decline-color; } .mx_IncomingCallBox_buttons_accept { - background-color: #80f480; + background-color: $voip-accept-color; } diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index e623372a..4f47df64 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -55,6 +55,19 @@ $h3-color: #3d3b39; $dialog-background-bg-color: #e9e9e9; $lightbox-background-bg-color: #000; +$greyed-fg-color: #888; + +$preview-widget-bar-color: #ddd; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + // ******************** $roomtile-name-color: rgba(69, 69, 69, 0.8); diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 1d93c1a4..28b80a20 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -55,6 +55,19 @@ $h3-color: $primary-fg-color; $dialog-background-bg-color: #000; $lightbox-background-bg-color: #000; +$greyed-fg-color: #888; + +$preview-widget-bar-color: $menu-bg-color; +$preview-widget-fg-color: $greyed-fg-color; + +$blockquote-bar-color: #ddd; +$blockquote-fg-color: #777; + +$settings-grey-fg-color: #a2a2a2; + +$voip-decline-color: #f48080; +$voip-accept-color: #80f480; + // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index f0d4c860..8c8ceeaf 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -101,7 +101,7 @@ limitations under the License. text-transform: uppercase; font-weight: 600; font-size: 11px; - color: #61c295; + color: $accent-fg-color; } .mx_RoomDirectory_topic { @@ -110,7 +110,7 @@ limitations under the License. .mx_RoomDirectory_alias { font-size: 12px; - color: #b3b3b3; + color: $settings-grey-fg-color; } .mx_RoomDirectory_roomMemberCount { diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss index 0a2e7605..16a3ab79 100644 --- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss +++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss @@ -70,8 +70,7 @@ limitations under the License. border-right-style: none; border-top-style: solid; border-top-width: 1px; - border-color: #bbbbbb; - opacity: 0.4; + border-color: $menu-border-color; } .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon { diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss index d31a9d27..66c26e12 100644 --- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss +++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss @@ -29,10 +29,8 @@ limitations under the License. order: 1; flex: 1 1 10%; min-width: 60px; - /* - background-color: #080; - height: 20px; - */ + // background-color: #080; + // height: 20px; } .mx_ImageView_content { @@ -41,7 +39,6 @@ limitations under the License. min-width: 0px; height: 90%; flex: 15 15 0; - display: flex; align-items: center; justify-content: center; @@ -132,8 +129,6 @@ limitations under the License. order: 3; flex: 1 1 10%; min-width: 300px; - /* - background-color: #800; - height: 20px; - */ + // background-color: #800; + // height: 20px; } From 4f8d3b0e2b02e3c41344e86abd57aff555d7c1e0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 02:00:34 +0000 Subject: [PATCH 045/168] more factoring --- src/skins/vector/css/_common.scss | 4 ++-- .../vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ src/skins/vector/css/vector-web/structures/_RightPanel.scss | 3 ++- .../vector/css/vector-web/structures/_RoomDirectory.scss | 2 +- 6 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 09f3fcfb..01ba81d8 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -266,12 +266,12 @@ textarea { ::-moz-selection { background-color: $accent-color; - color: white; + color: $selection-fg-color; } ::selection { background-color: $accent-color; - color: white; + color: $selection-fg-color; } /** green button with rounded corners */ diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 919b9f9b..d1aeddec 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -46,7 +46,7 @@ limitations under the License. border-top-left-radius: 10px; border-top-right-radius: 10px; - background-color: rgba(255, 255, 255, 0.9); + background-color: $droptarget-bg-color; border: 2px #e1dddd solid; border-bottom: none; position: absolute; diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 4f47df64..6488794d 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -13,6 +13,8 @@ $focus-bg-color: #dddddd; $accent-fg-color: #ffffff; $accent-color: #76CFA6; +$selection-fg-color: $primary-bg-color; + // red warning colour $warning-color: #ff0064; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 28b80a20..62e89a7b 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -13,6 +13,8 @@ $light-fg-color: #747474; $accent-fg-color: $primary-bg-color; $accent-color: #76CFA6; +$selection-fg-color: $primary-bg-color; + // red warning colour $warning-color: #ff0064; diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss index 96e8698b..91034e63 100644 --- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss +++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss @@ -58,7 +58,8 @@ limitations under the License. width: 25px; height: 5px; border-radius: 5px; - background-color: rgba(118, 207, 166, 0.2); + background-color: $accent-color; + opacity: 0.2; } .mx_RightPanel_headerButton_badge { diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss index 8c8ceeaf..6e508ec7 100644 --- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss +++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss @@ -101,7 +101,7 @@ limitations under the License. text-transform: uppercase; font-weight: 600; font-size: 11px; - color: $accent-fg-color; + color: $accent-color; } .mx_RoomDirectory_topic { From 3bdb330f5bb6682764acf781cc2b25aeb834e03d Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 09:57:01 +0000 Subject: [PATCH 046/168] cheeky hack to get the ctxt menu colors right --- src/skins/vector/img/icon_context_message.svg | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg index f2ceccfa..c3d39b1e 100644 --- a/src/skins/vector/img/icon_context_message.svg +++ b/src/skins/vector/img/icon_context_message.svg @@ -4,11 +4,18 @@ ED5D3E59-2561-4AC1-9B43-82FBC51767FC Created with sketchtool. + + + + - - - + + + From ef07a6035ed58184f94464abcee035592e666078 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 10:48:38 +0000 Subject: [PATCH 047/168] Fix links to fonts and images from CSS https://github.com/vector-im/riot-web/pull/2961 put the CSS in a subdirectory, which meant that links from CSS to images and fonts were broken. Fix them up. --- .../views/elements/DirectorySearchBox.css | 4 ++-- .../matrix-react-sdk/views/rooms/RoomTile.css | 2 +- src/skins/vector/css/vector-web/fonts.css | 18 ++++++++++-------- .../vector-web/views/elements/ImageView.css | 2 +- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css index 3a0922bc..5686ecd0 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -46,7 +46,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { padding-right: 10px; background-color: #efefef; border-radius: 3px; - background-image: url('img/icon-return.svg'); + background-image: url('../img/icon-return.svg'); background-position: 8px 70%; background-repeat: no-repeat; text-indent: 18px; @@ -63,7 +63,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { .mx_DirectorySearchBox_clear { display: inline-block; vertical-align: middle; - background: url('img/icon_context_delete.svg'); + background: url('../img/icon_context_delete.svg'); background-position: 0 50%; background-repeat: no-repeat; width: 15px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2822d82e..2411d613 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -65,7 +65,7 @@ limitations under the License. position: absolute; content: ""; border-radius: 40px; - background-image: url("img/icons_ellipsis.svg"); + background-image: url("../img/icons_ellipsis.svg"); background-size: 25px; width: 24px; height: 24px; diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/fonts.css index 719eeebc..a57d9952 100644 --- a/src/skins/vector/css/vector-web/fonts.css +++ b/src/skins/vector/css/vector-web/fonts.css @@ -3,44 +3,46 @@ * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets */ +/* the 'src' links are relative to the bundle.css, which is in a subdirectory. + */ @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); + src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @@ -52,14 +54,14 @@ @font-face { font-family: 'Fira Mono'; - src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Fira Mono'; - src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); + src: url('../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css index 03223f25..0942b593 100644 --- a/src/skins/vector/css/vector-web/views/elements/ImageView.css +++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css @@ -62,7 +62,7 @@ limitations under the License. max-height: 100%; /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ object-fit: contain; - /* background-image: url('img/trans.png'); */ + /* background-image: url('../img/trans.png'); */ pointer-events: all; } From 205676a97da4a756d63eb4b050caf350668b11d4 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 11:30:59 +0000 Subject: [PATCH 048/168] Back to develop js-sdk & react-sdk --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index f169cf9b..b79db54a 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "gfm.css": "^1.1.1", "highlight.js": "^9.0.0", "linkifyjs": "^2.1.3", - "matrix-js-sdk": "0.7.4", - "matrix-react-sdk": "0.8.5", + "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop", + "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop", "modernizr": "^3.1.0", "q": "^1.4.1", "react": "^15.4.0", From 4a1b04e57be363f3c45f356c1862cf5853769e10 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 11:58:30 +0000 Subject: [PATCH 049/168] Add another layer of directory to webpack chunks --- .../views/elements/DirectorySearchBox.css | 4 ++-- .../matrix-react-sdk/views/rooms/RoomTile.css | 2 +- src/skins/vector/css/vector-web/fonts.css | 16 ++++++++-------- .../css/vector-web/views/elements/ImageView.css | 2 +- webpack.config.js | 15 ++++++++++++--- 5 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css index 5686ecd0..c81974eb 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css @@ -46,7 +46,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { padding-right: 10px; background-color: #efefef; border-radius: 3px; - background-image: url('../img/icon-return.svg'); + background-image: url('../../img/icon-return.svg'); background-position: 8px 70%; background-repeat: no-repeat; text-indent: 18px; @@ -63,7 +63,7 @@ input[type=text].mx_DirectorySearchBox_input:focus { .mx_DirectorySearchBox_clear { display: inline-block; vertical-align: middle; - background: url('../img/icon_context_delete.svg'); + background: url('../../img/icon_context_delete.svg'); background-position: 0 50%; background-repeat: no-repeat; width: 15px; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 2411d613..b752d105 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -65,7 +65,7 @@ limitations under the License. position: absolute; content: ""; border-radius: 40px; - background-image: url("../img/icons_ellipsis.svg"); + background-image: url("../../img/icons_ellipsis.svg"); background-size: 25px; width: 24px; height: 24px; diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/fonts.css index a57d9952..52ac95b5 100644 --- a/src/skins/vector/css/vector-web/fonts.css +++ b/src/skins/vector/css/vector-web/fonts.css @@ -7,42 +7,42 @@ */ @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; } @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Open Sans'; - src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); + src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; } @@ -54,14 +54,14 @@ @font-face { font-family: 'Fira Mono'; - src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); + src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Fira Mono'; - src: url('../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); + src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css index 0942b593..73aaaa86 100644 --- a/src/skins/vector/css/vector-web/views/elements/ImageView.css +++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css @@ -62,7 +62,7 @@ limitations under the License. max-height: 100%; /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */ object-fit: contain; - /* background-image: url('../img/trans.png'); */ + /* background-image: url('../../img/trans.png'); */ pointer-events: all; } diff --git a/webpack.config.js b/webpack.config.js index 9c0c6bbb..2a38d139 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,8 +40,17 @@ module.exports = { }, output: { path: path.join(__dirname, "webapp"), - filename: "[hash]/[name].js", - chunkFilename: "[hash]/[name].js", + + // the generated js (and CSS, from the ExtractTextPlugin) are put in a + // unique subdirectory for the build. There will only be one such + // 'bundle' directory in the generated tarball; however, hosting + // servers can collect 'bundles' from multiple versions into one + // directory and symlink it into place - this allows users who loaded + // an older version of the application to continue to access webpack + // chunks even after the app is redeployed. + // + filename: "bundles/[hash]/[name].js", + chunkFilename: "bundles/[hash]/[name].js", devtoolModuleFilenameTemplate: function(info) { // Reading input source maps gives only relative paths here for // everything. Until I figure out how to fix this, this is a @@ -80,7 +89,7 @@ module.exports = { }), new ExtractTextPlugin( - "[hash]/[name].css", + "bundles/[hash]/[name].css", { allChunks: true } From 3b109f761283d1aac5f4ff26462bd4f77ff83155 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 13:16:08 +0000 Subject: [PATCH 050/168] Include current version in update check explicitly Hopefully fix https://github.com/vector-im/riot-web/issues/2847 --- electron/src/electron-main.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 675640a5..3f7c0f07 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -112,7 +112,15 @@ function startAutoUpdate(update_base_url) { // 204 No Content. On windows it takes a base path and looks for // files under that path. if (process.platform == 'darwin') { - electron.autoUpdater.setFeedURL(update_base_url + 'macos/'); + // include the current version in the URL we hit. Electron doesn't add + // it anywhere (apart from the User-Agent) so it's up to us. We could + // (and previously did) just use the User-Agent, but this doesn't + // rely on NSURLConnection setting the User-Agent to what we expect, + // and also acts as a convenient cache-buster between versions. + electron.autoUpdater.setFeedURL( + update_base_url + + 'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion()) + ); } else if (process.platform == 'win32') { electron.autoUpdater.setFeedURL(update_base_url + 'win32/' + process.arch + '/'); } else { From 8371006d90e37d554cc1d05e94f10f6d0f4134b7 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 13:55:33 +0000 Subject: [PATCH 051/168] Update redeploy script to keep old bundles ... so that people using old versions of the master chunk can still load other webpack chunks. --- scripts/redeploy.py | 142 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 118 insertions(+), 24 deletions(-) diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 36585f53..4394f292 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -1,13 +1,32 @@ #!/usr/bin/env python +# +# auto-deploy script for https://riot.im/develop +# +# Listens for HTTP hits. When it gets one, downloads the artifact from jenkins +# and deploys it as the new version. +# +# Requires the following python packages: +# +# - requests +# - flask +# from __future__ import print_function import json, requests, tarfile, argparse, os, errno +import time from urlparse import urljoin from flask import Flask, jsonify, request, abort + app = Flask(__name__) -arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = ( - None, None, None, None, None -) +arg_jenkins_url = None +arg_extract_path = None +arg_bundles_path = None +arg_should_clean = None +arg_symlink = None +arg_config_location = None + +class DeployException(Exception): + pass def download_file(url): local_filename = url.split('/')[-1] @@ -57,6 +76,9 @@ def on_receive_jenkins_poke(): abort(400, "Missing or bad build number") return + return fetch_jenkins_build(job_name, build_num) + +def fetch_jenkins_build(job_name, build_num): artifact_url = urljoin( arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num) ) @@ -106,7 +128,31 @@ def on_receive_jenkins_poke(): arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path) ) - print("Retrieving .tar.gz file: %s" % tar_gz_url) + # we extract into a directory based on the build number. This avoids the + # problem of multiple builds building the same git version and thus having + # the same tarball name. That would lead to two potential problems: + # (a) sometimes jenkins serves corrupted artifacts; we would replace + # a good deploy with a bad one + # (b) we'll be overwriting the live deployment, which means people might + # see half-written files. + build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) + try: + deploy_tarball(tar_gz_url, build_dir) + except DeployException as e: + abort(400, e.message) + + return jsonify({}) + +def deploy_tarball(tar_gz_url, build_dir): + """Download a tarball from jenkins and deploy it as the new version + """ + print("Deploying %s to %s" % (tar_gz_url, build_dir)) + + if os.path.exists(build_dir): + raise DeployException( + "Not deploying. We have previously deployed this build." + ) + os.mkdir(build_dir) # we rely on the fact that flask only serves one request at a time to # ensure that we do not overwrite a tarball from a concurrent request. @@ -114,19 +160,6 @@ def on_receive_jenkins_poke(): print("Downloaded file: %s" % filename) try: - # we extract into a directory based on the build number. This avoids the - # problem of multiple builds building the same git version and thus having - # the same tarball name. That would lead to two potential problems: - # (a) sometimes jenkins serves corrupted artifacts; we would replace - # a good deploy with a bad one - # (b) we'll be overwriting the live deployment, which means people might - # see half-written files. - build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) - if os.path.exists(build_dir): - abort(400, "Not deploying. We have previously deployed this build.") - return - os.mkdir(build_dir) - untar_to(filename, build_dir) print("Extracted to: %s" % build_dir) finally: @@ -139,9 +172,47 @@ def on_receive_jenkins_poke(): if arg_config_location: create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json')) + if arg_bundles_path: + extracted_bundles = os.path.join(extracted_dir, 'bundles') + move_bundles(source=extracted_bundles, dest=arg_bundles_path) + + # replace the (hopefully now empty) extracted_bundles dir with a + # symlink to the common dir. + relpath = os.path.relpath(arg_bundles_path, extracted_dir) + os.rmdir(extracted_bundles) + print ("Symlink %s -> %s" % (extracted_bundles, relpath)) + os.symlink(relpath, extracted_bundles) + create_symlink(source=extracted_dir, linkname=arg_symlink) - return jsonify({}) +def move_bundles(source, dest): + """Move the contents of the 'bundles' directory to a common dir + + We check that we will not be overwriting anything before we proceed. + + Args: + source (str): path to 'bundles' within the extracted tarball + dest (str): target common directory + """ + + if not os.path.isdir(dest): + os.mkdir(dest) + + # build a map from source to destination, checking for non-existence as we go. + renames = {} + for f in os.listdir(source): + dst = os.path.join(dest, f) + if os.path.exists(dst): + raise DeployException( + "Not deploying. The bundle includes '%s' which we have previously deployed." + % f + ) + renames[os.path.join(source, f)] = dst + + for (src, dst) in renames.iteritems(): + print ("Move %s -> %s" % (src, dst)) + os.rename(src, dst) + if __name__ == "__main__": parser = argparse.ArgumentParser("Runs a Vector redeployment server.") @@ -161,6 +232,13 @@ if __name__ == "__main__": "The location to extract .tar.gz files to." ) ) + parser.add_argument( + "-b", "--bundles-dir", dest="bundles_dir", help=( + "A directory to move the contents of the 'bundles' directory to. A \ + symlink to the bundles directory will also be written inside the \ + extracted tarball. Example: './bundles'." + ) + ) parser.add_argument( "-c", "--clean", dest="clean", action="store_true", default=False, help=( "Remove .tar.gz files after they have been downloaded and extracted." @@ -179,18 +257,34 @@ if __name__ == "__main__": To this location." ) ) + parser.add_argument( + "--test", dest="tarball_uri", help=( + "Don't start an HTTP listener. Instead download a build from Jenkins \ + immediately." + ), + ) + args = parser.parse_args() if args.jenkins.endswith("/"): # important for urljoin arg_jenkins_url = args.jenkins else: arg_jenkins_url = args.jenkins + "/" arg_extract_path = args.extract + arg_bundles_path = args.bundles_dir arg_should_clean = args.clean arg_symlink = args.symlink arg_config_location = args.config - print( - "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % - (args.port, arg_extract_path, - " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) - ) - app.run(host="0.0.0.0", port=args.port, debug=True) + + if not os.path.isdir(arg_extract_path): + os.mkdir(arg_extract_path) + + if args.tarball_uri is not None: + build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) + deploy_tarball(args.tarball_uri, build_dir) + else: + print( + "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % + (args.port, arg_extract_path, + " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) + ) + app.run(host="0.0.0.0", port=args.port, debug=True) From cf92e7f64bfc480dd860ce52d8c986c9d8c708df Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 14:04:42 +0000 Subject: [PATCH 052/168] Clarify comment --- electron/src/electron-main.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 3f7c0f07..a03a8755 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -116,7 +116,8 @@ function startAutoUpdate(update_base_url) { // it anywhere (apart from the User-Agent) so it's up to us. We could // (and previously did) just use the User-Agent, but this doesn't // rely on NSURLConnection setting the User-Agent to what we expect, - // and also acts as a convenient cache-buster between versions. + // and also acts as a convenient cache-buster to ensure that when the + // app updates it always gets a fresh value to avoid update-looping. electron.autoUpdater.setFeedURL( update_base_url + 'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion()) From c9c58ab0ecb966aca6d3d710db149b83bb4fa5ba Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 14:10:09 +0000 Subject: [PATCH 053/168] fix up the contextual menu button --- .../matrix-react-sdk/views/rooms/_EventTile.scss | 10 +++++++++- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ src/skins/vector/img/icon_context_message.svg | 13 +++---------- .../vector/img/icon_context_message_dark.svg | 15 +++++++++++++++ 5 files changed, 31 insertions(+), 11 deletions(-) create mode 100644 src/skins/vector/img/icon_context_message_dark.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index a6b10e24..b79db919 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -146,7 +146,12 @@ limitations under the License. z-index: 1; position: relative; width: 90px; - height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */ + + /* Hack to stop the height of this pushing the messages apart. + Replaces margin-top: -6px. This interacts better with a read + marker being in between. Content overflows. */ + height: 1px; + margin-right: 10px; } @@ -172,6 +177,9 @@ limitations under the License. cursor: pointer; top: 6px; right: 6px; + width: 19px; + height: 19px; + background-image: url($edit-button-url); } .mx_EventTile:hover .mx_EventTile_editButton, diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 6488794d..ad18eb49 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -88,6 +88,8 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; +$edit-button-url: "/img/icon_context_message.svg"; + // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 62e89a7b..e3e32e84 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -88,6 +88,8 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; +$edit-button-url: "/img/icon_context_message_dark.svg"; + // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color $e2e-unverified-color: #e8bf37; diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg index c3d39b1e..f2ceccfa 100644 --- a/src/skins/vector/img/icon_context_message.svg +++ b/src/skins/vector/img/icon_context_message.svg @@ -4,18 +4,11 @@ ED5D3E59-2561-4AC1-9B43-82FBC51767FC Created with sketchtool. - - - - - - - + + + diff --git a/src/skins/vector/img/icon_context_message_dark.svg b/src/skins/vector/img/icon_context_message_dark.svg new file mode 100644 index 00000000..b4336cc3 --- /dev/null +++ b/src/skins/vector/img/icon_context_message_dark.svg @@ -0,0 +1,15 @@ + + + + ED5D3E59-2561-4AC1-9B43-82FBC51767FC + Created with sketchtool. + + + + + + + + + + From 323c5d073289998ef4245a36032644927eaab351 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 17 Jan 2017 14:54:55 +0000 Subject: [PATCH 054/168] CSS for 'searching known users' --- .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css index aa1dced8..fe72d57d 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css @@ -63,3 +63,9 @@ limitations under the License. .mx_ChatInviteDialog_cancel object { pointer-events: none; } + +.mx_ChatInviteDialog_addressSelectHeader { + font-weight: bold; + line-height: 150%; + text-indent: 4px; +} From 6c88201e23b7c16a7732dea65a4009ad02efc18f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 19:14:16 +0000 Subject: [PATCH 056/168] use ye olde rel='alternate stylesheets' for theming --- src/vector/index.html | 14 ++++++++++---- src/vector/index.js | 1 - webpack.config.js | 4 ++++ 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index 73cdd2df..1895cc6b 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -20,14 +20,20 @@ - <% for(var i=0; i - - <% } %> + <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { + var file = htmlWebpackPlugin.files.css[i]; + if (file.match(/^theme-(?!light\.)/)) { + %> + + <% } else { %> + + <% } + } %>
- <% for(var i=0; i + <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%> <% } %> diff --git a/src/vector/index.js b/src/vector/index.js index 64b87698..0d254202 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -30,7 +30,6 @@ require('babel-polyfill'); // CSS requires: just putting them here for now as CSS is going to be // refactored "soon" anyway -require('../../build/dark.scss'); require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); diff --git a/webpack.config.js b/webpack.config.js index 1f2a8a60..e05f877a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,6 +15,10 @@ module.exports = { // point, so that it doesn't block the pageload, but that is a separate // problem) "olm": "./src/vector/olm-loader.js", + + // CSS themes + "theme-light": "./build/light.scss", + "theme-dark": "./build/dark.scss", }, module: { preLoaders: [ From 0cd895b417bdc1163511d993c6b24ba1fe0910f3 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Tue, 17 Jan 2017 19:19:30 +0000 Subject: [PATCH 057/168] kill the moofle --- src/skins/vector/css/themes/dark.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss index 0c51486b..5a37d036 100644 --- a/src/skins/vector/css/themes/dark.scss +++ b/src/skins/vector/css/themes/dark.scss @@ -1,4 +1,3 @@ @import "_base.scss"; @import "_dark.scss"; @import "../_components.scss"; -// moofleasdadsasdadsa \ No newline at end of file From 5206410f2126b6b987ecb654bf13829f8a58016c Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 17 Jan 2017 22:25:02 +0000 Subject: [PATCH 058/168] Deployment script Factor some bits out of redeploy.py, so that they can be used in a deployment script suitable for riot.im/app. --- scripts/deploy.py | 158 ++++++++++++++++++++++++++++++++++++++++++++ scripts/redeploy.py | 107 +++++++----------------------- 2 files changed, 182 insertions(+), 83 deletions(-) create mode 100755 scripts/deploy.py diff --git a/scripts/deploy.py b/scripts/deploy.py new file mode 100755 index 00000000..dde13c54 --- /dev/null +++ b/scripts/deploy.py @@ -0,0 +1,158 @@ +#!/usr/bin/env python +# +# download and unpack a riot-web tarball. +# +# Allows `bundles` to be extracted to a common directory, and a link to +# config.json to be added. + +from __future__ import print_function + +import argparse +import os +import os.path +import tarfile +import urllib + +class DeployException(Exception): + pass + +def create_relative_symlink(linkname, target): + relpath = os.path.relpath(target, os.path.dirname(linkname)) + print ("Symlink %s -> %s" % (linkname, relpath)) + os.symlink(relpath, linkname) + + +def move_bundles(source, dest): + """Move the contents of the 'bundles' directory to a common dir + + We check that we will not be overwriting anything before we proceed. + + Args: + source (str): path to 'bundles' within the extracted tarball + dest (str): target common directory + """ + + if not os.path.isdir(dest): + os.mkdir(dest) + + # build a map from source to destination, checking for non-existence as we go. + renames = {} + for f in os.listdir(source): + dst = os.path.join(dest, f) + if os.path.exists(dst): + raise DeployException( + "Not deploying. The bundle includes '%s' which we have previously deployed." + % f + ) + renames[os.path.join(source, f)] = dst + + for (src, dst) in renames.iteritems(): + print ("Move %s -> %s" % (src, dst)) + os.rename(src, dst) + +class Deployer: + def __init__(self): + self.packages_path = "." + self.bundles_path = None + self.should_clean = False + self.config_location = None + + def deploy(self, tarball, extract_path): + """Download a tarball if necessary, and unpack it + + Returns: + (str) the path to the unpacked deployment + """ + print("Deploying %s to %s" % (tarball, extract_path)) + + downloaded = False + if tarball.startswith("http://") or tarball.startswith("https://"): + tarball = self.download_file(tarball) + print("Downloaded file: %s" % tarball) + downloaded = True + + try: + with tarfile.open(tarball) as tar: + tar.extractall(extract_path) + finally: + if self.should_clean and downloaded: + os.remove(tarball) + + name_str = os.path.basename(tarball).replace(".tar.gz", "") + extracted_dir = os.path.join(extract_path, name_str) + print ("Extracted into: %s" % extracted_dir) + + if self.config_location: + create_relative_symlink( + target=self.config_location, + linkname=os.path.join(extracted_dir, 'config.json') + ) + + if self.bundles_path: + extracted_bundles = os.path.join(extracted_dir, 'bundles') + move_bundles(source=extracted_bundles, dest=self.bundles_path) + + # replace the (hopefully now empty) extracted_bundles dir with a + # symlink to the common dir. + os.rmdir(extracted_bundles) + create_relative_symlink( + target=self.bundles_path, + linkname=extracted_bundles, + ) + return extracted_dir + + def download_file(self, url): + if not os.path.isdir(self.packages_path): + os.mkdir(self.packages_path) + local_filename = os.path.join(self.packages_path, + url.split('/')[-1]) + urllib.urlretrieve(url, local_filename) + return local_filename + +if __name__ == "__main__": + parser = argparse.ArgumentParser("Deploy a Riot build on a web server.") + parser.add_argument( + "-p", "--packages-dir", default="./packages", help=( + "The directory to download the tarball into. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-e", "--extract-path", default="./deploys", help=( + "The location to extract .tar.gz files to. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-b", "--bundles-dir", nargs='?', default="./bundles", help=( + "A directory to move the contents of the 'bundles' directory to. A \ + symlink to the bundles directory will also be written inside the \ + extracted tarball. Example: './bundles'. \ + (Default: '%(default)s')" + ) + ) + parser.add_argument( + "-c", "--clean", action="store_true", default=False, help=( + "Remove .tar.gz files after they have been downloaded and extracted. \ + (Default: %(default)s)" + ) + ) + parser.add_argument( + "--config", nargs='?', default='./config.json', help=( + "Write a symlink at config.json in the extracted tarball to this \ + location. (Default: '%(default)s')" + ) + ) + parser.add_argument( + "tarball", help=( + "filename of tarball, or URL to download." + ), + ) + + args = parser.parse_args() + + deployer = Deployer() + deployer.packages_path = args.packages_dir + deployer.bundles_path = args.bundles_dir + deployer.should_clean = args.clean + deployer.config_location = args.config + + deployer.deploy(args.tarball, args.extract_path) diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 4394f292..0796b963 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -14,32 +14,17 @@ from __future__ import print_function import json, requests, tarfile, argparse, os, errno import time from urlparse import urljoin + from flask import Flask, jsonify, request, abort +from deploy import Deployer, DeployException + app = Flask(__name__) arg_jenkins_url = None +deployer = None arg_extract_path = None -arg_bundles_path = None -arg_should_clean = None arg_symlink = None -arg_config_location = None - -class DeployException(Exception): - pass - -def download_file(url): - local_filename = url.split('/')[-1] - r = requests.get(url, stream=True) - with open(local_filename, 'wb') as f: - for chunk in r.iter_content(chunk_size=1024): - if chunk: # filter out keep-alive new chunks - f.write(chunk) - return local_filename - -def untar_to(tarball, dest): - with tarfile.open(tarball) as tar: - tar.extractall(dest) def create_symlink(source, linkname): try: @@ -137,17 +122,20 @@ def fetch_jenkins_build(job_name, build_num): # see half-written files. build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num)) try: - deploy_tarball(tar_gz_url, build_dir) + extracted_dir = deploy_tarball(tar_gz_url, build_dir) except DeployException as e: abort(400, e.message) + create_symlink(source=extracted_dir, linkname=arg_symlink) + return jsonify({}) def deploy_tarball(tar_gz_url, build_dir): - """Download a tarball from jenkins and deploy it as the new version - """ - print("Deploying %s to %s" % (tar_gz_url, build_dir)) + """Download a tarball from jenkins and unpack it + Returns: + (str) the path to the unpacked deployment + """ if os.path.exists(build_dir): raise DeployException( "Not deploying. We have previously deployed this build." @@ -156,62 +144,8 @@ def deploy_tarball(tar_gz_url, build_dir): # we rely on the fact that flask only serves one request at a time to # ensure that we do not overwrite a tarball from a concurrent request. - filename = download_file(tar_gz_url) - print("Downloaded file: %s" % filename) - try: - untar_to(filename, build_dir) - print("Extracted to: %s" % build_dir) - finally: - if arg_should_clean: - os.remove(filename) - - name_str = filename.replace(".tar.gz", "") - extracted_dir = os.path.join(build_dir, name_str) - - if arg_config_location: - create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json')) - - if arg_bundles_path: - extracted_bundles = os.path.join(extracted_dir, 'bundles') - move_bundles(source=extracted_bundles, dest=arg_bundles_path) - - # replace the (hopefully now empty) extracted_bundles dir with a - # symlink to the common dir. - relpath = os.path.relpath(arg_bundles_path, extracted_dir) - os.rmdir(extracted_bundles) - print ("Symlink %s -> %s" % (extracted_bundles, relpath)) - os.symlink(relpath, extracted_bundles) - - create_symlink(source=extracted_dir, linkname=arg_symlink) - -def move_bundles(source, dest): - """Move the contents of the 'bundles' directory to a common dir - - We check that we will not be overwriting anything before we proceed. - - Args: - source (str): path to 'bundles' within the extracted tarball - dest (str): target common directory - """ - - if not os.path.isdir(dest): - os.mkdir(dest) - - # build a map from source to destination, checking for non-existence as we go. - renames = {} - for f in os.listdir(source): - dst = os.path.join(dest, f) - if os.path.exists(dst): - raise DeployException( - "Not deploying. The bundle includes '%s' which we have previously deployed." - % f - ) - renames[os.path.join(source, f)] = dst - - for (src, dst) in renames.iteritems(): - print ("Move %s -> %s" % (src, dst)) - os.rename(src, dst) + return deployer.deploy(tar_gz_url, build_dir) if __name__ == "__main__": @@ -270,21 +204,28 @@ if __name__ == "__main__": else: arg_jenkins_url = args.jenkins + "/" arg_extract_path = args.extract - arg_bundles_path = args.bundles_dir - arg_should_clean = args.clean arg_symlink = args.symlink - arg_config_location = args.config if not os.path.isdir(arg_extract_path): os.mkdir(arg_extract_path) + deployer = Deployer() + deployer.bundles_path = args.bundles_dir + deployer.should_clean = args.clean + deployer.config_location = args.config + if args.tarball_uri is not None: build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) deploy_tarball(args.tarball_uri, build_dir) else: print( "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" % - (args.port, arg_extract_path, - " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location) + (args.port, + arg_extract_path, + " (clean after)" if deployer.should_clean else "", + arg_symlink, + arg_jenkins_url, + deployer.config_location, + ) ) app.run(host="0.0.0.0", port=args.port, debug=True) From 83145e80e5c17339f14dd4ec053843f5b40bbf1a Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 18 Jan 2017 10:39:59 +0000 Subject: [PATCH 059/168] Auto-hide the electron menu bar From https://github.com/vector-im/riot-web/issues/2962 This allows all the shortcuts to still work, and the menu bar can be un-hidden with the alt key. --- electron/src/electron-main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index a03a8755..929b7892 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -175,6 +175,7 @@ electron.app.on('ready', () => { icon: icon_path, width: 1024, height: 768, show: false, + autoHideMenuBar: true, }); mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`); electron.Menu.setApplicationMenu(VectorMenu); From 69bedf0d37384f3039a145180c4ba7834bfa45c7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 12:42:48 +0000 Subject: [PATCH 060/168] review feedback --- package.json | 2 -- src/skins/vector/css/rethemendex.sh | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 1e273dfe..b8fd1574 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,6 @@ "babel-preset-es2017": "^6.16.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-2": "^6.17.0", - "catw": "^1.0.1", "chokidar": "^1.6.1", "cpx": "^1.3.2", "css-raw-loader": "^0.1.1", @@ -113,7 +112,6 @@ "minimist": "^1.2.0", "mkdirp": "^0.5.1", "mocha": "^2.4.5", - "node-sass": "^4.1.1", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", "postcss-cli": "^2.6.0", diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 915b235d..9381c5cd 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -2,7 +2,7 @@ echo "// autogenerated by rethemendex.sh" > _components.scss -for i in `find . -iname _\*.scss | fgrep -v _components.scss`; +for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`; do echo "@import \"$i\";" >> _components.scss done From 708fd640f7af9a641a5b3a66dacbb17392e8410c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 14:06:20 +0000 Subject: [PATCH 061/168] unbreak switching after vdh's webpack changes --- src/vector/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index 1895cc6b..a6c3092d 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -22,9 +22,11 @@ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; - if (file.match(/^theme-(?!light\.)/)) { + var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/); + if (match) { + var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); %> - + <% } else { %> <% } From f10bc8eef17a56b50ba4901184ad325fa181e04c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Wed, 18 Jan 2017 16:49:20 +0100 Subject: [PATCH 062/168] Animate status bar max-height and margin-top When collapsed, the max-height is set to 0px. When expanded, max-height is set to 50px, margin-top is set to 0px. When expanded and when the timeline is not scrolled down to the bottom, margin-top is set to -50px to offset the change in height, keeping it at the same scroll position. Without the animation, there would be a jump when the user starts scrolling up from the bottom whilst the StatusBar is expanded. --- .../matrix-react-sdk/structures/RoomView.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index c3f7ceed..3b3c396f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -202,6 +202,25 @@ hr.mx_RoomView_myReadMarker { width: 100%; -webkit-flex: 0 0 auto; flex: 0 0 auto; + + max-height: 0px; + background-color: #fff; + z-index: 1000; + overflow: hidden; + + -webkit-transition: all .5s ease-in-out; + -moz-transition: all .5s ease-in-out; + -ms-transition: all .5s ease-in-out; + -o-transition: all .5s ease-in-out; +} + +.mx_RoomView_statusArea_expanded { + max-height: 50px; + margin-top: 0px; +} + +.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { + margin-top: -50px; } .mx_RoomView_statusAreaBox { From e9884768f6fa770d6f33e9ab456688928ba50f39 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Wed, 18 Jan 2017 16:00:13 +0000 Subject: [PATCH 063/168] Persist console logs to an IndexedDB instance --- src/vector/index.js | 7 ++ src/vector/rageshake.js | 180 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 187 insertions(+) create mode 100644 src/vector/rageshake.js diff --git a/src/vector/index.js b/src/vector/index.js index 8231950b..b965f01d 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -36,6 +36,13 @@ require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); require('draft-js/dist/Draft.css'); +const rageshake = require("./rageshake"); +rageshake.init().then(() => { + console.log("Initialised rageshake"); +}, (err) => { + console.error("Failed to initialise rageshake: " + err); +}); + // add React and ReactPerf to the global namespace, to make them easier to // access via the console diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js new file mode 100644 index 00000000..fe768630 --- /dev/null +++ b/src/vector/rageshake.js @@ -0,0 +1,180 @@ +/* +Copyright 2017 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows: +// - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily, +// without having to all depend on the same log framework / pass the logger around. +// - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work +// in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored +// in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in +// local storage, which does work in incognito mode. +// - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is +// not responsive (which may be the cause of the bug). + +const FLUSH_RATE_MS = 30 * 1000; + +// A class which monkey-patches the global console and stores log lines. +class ConsoleLogger { + constructor() { + this.logs = ""; + + // Monkey-patch console logging + const consoleFunctionsToLevels = { + log: "I", + info: "I", + error: "E", + }; + Object.keys(consoleFunctionsToLevels).forEach((fnName) => { + const level = consoleFunctionsToLevels[fnName]; + let originalFn = window.console[fnName].bind(window.console); + window.console[fnName] = (...args) => { + this.log(level, ...args); + originalFn(...args); + } + }); + } + + log(level, ...args) { + // We don't know what locale the user may be running so use ISO strings + const ts = new Date().toISOString(); + // Some browsers support string formatting which we're not doing here + // so the lines are a little more ugly but easy to implement / quick to run. + // Example line: + // 2017-01-18T11:23:53.214Z W Failed to set badge count: Error setting badge. Message: Too many badges requests in queue. + const line = `${ts} ${level} ${args.join(' ')}\n`; + // Using + really is the quickest way in JS + // http://jsperf.com/concat-vs-plus-vs-join + this.logs += line; + } + + /** + * Retrieve log lines to flush to disk. + * @return {string} \n delimited log lines to flush. + */ + flush() { + // The ConsoleLogger doesn't care how these end up on disk, it just flushes them to the caller. + const logsToFlush = this.logs; + this.logs = ""; + return logsToFlush; + } +} + +// A class which stores log lines in an IndexedDB instance. +class IndexedDBLogStore { + constructor(indexedDB, logger) { + this.indexedDB = indexedDB; + this.logger = logger; + this.db = null; + } + + /** + * @return {Promise} Resolves when the store is ready. + */ + connect() { + let req = this.indexedDB.open("logs"); + return new Promise((resolve, reject) => { + req.onsuccess = (event) => { + this.db = event.target.result; + // Periodically flush logs to local storage / indexeddb + setInterval(this.flush.bind(this), FLUSH_RATE_MS); + resolve(); + }; + + req.onerror = (event) => { + const err = "Failed to open log database: " + event.target.errorCode; + console.error(err); + reject(new Error(err)); + }; + + // First time: Setup the object store + req.onupgradeneeded = (event) => { + const db = event.target.result; + const objectStore = db.createObjectStore("logs", { + autoIncrement: true + }) + objectStore.transaction.oncomplete = function(event) { + objectStore.add( + new Date() + " ::: Log database was created." + ); + }; + } + }); + } + + /** + * @return {Promise} Resolved when the logs have been flushed. + */ + flush() { + if (!this.db) { + // not connected yet or user rejected access for us to r/w to the db + return Promise.reject(new Error("No connected database")); + } + const lines = this.logger.flush(); + if (lines.length === 0) { + return Promise.resolve(); + } + return new Promise((resolve, reject) => { + let txn = this.db.transaction("logs", "readwrite"); + let objStore = txn.objectStore("logs"); + objStore.add(lines); + txn.oncomplete = (event) => { + resolve(); + }; + txn.onerror = (event) => { + console.error("Failed to flush logs : " + event.target.errorCode); + reject(new Error("Failed to write logs: " + event.target.errorCode)); + } + }); + } +} + + +let store = null; +let inited = false; +module.exports = { + + /** + * Configure rage shaking support for sending bug reports. + * Modifies globals. + */ + init: function() { + if (inited || !window.indexedDB) { + return; + } + store = new IndexedDBLogStore(window.indexedDB, new ConsoleLogger()); + inited = true; + return store.connect(); + }, + + /** + * Force-flush the logs to storage. + * @return {Promise} Resolved when the logs have been flushed. + */ + flush: function() { + if (!store) { + return; + } + return store.flush(); + }, + + /** + * Send a bug report. + * @param {string} userText Any additional user input. + * @return {Promise} Resolved when the bug report is sent. + */ + sendBugReport: function(userText) { + } +}; From acb85b7b7227e107e4f91e8e473b2e8097eb9559 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 16:06:02 +0000 Subject: [PATCH 064/168] f1x0r CSS comment --- src/vector/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index 0d254202..a3892248 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -28,8 +28,9 @@ limitations under the License. // https://babeljs.io/docs/plugins/transform-runtime/ require('babel-polyfill'); -// CSS requires: just putting them here for now as CSS is going to be -// refactored "soon" anyway +// Require common CSS here; this will make webpack process it into bundle.css. +// Our own CSS (which is themed) is imported via separate webpack entry points +// in webpack.config.js require('gemini-scrollbar/gemini-scrollbar.css'); require('gfm.css/gfm.css'); require('highlight.js/styles/github.css'); From 5828ab107707752c76934484bad96ad8b1ff35f5 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Wed, 18 Jan 2017 16:27:11 +0000 Subject: [PATCH 065/168] Generate unique IDs for each JS runtime to accomodate multiple tabs --- src/vector/rageshake.js | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index fe768630..5739a934 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -20,7 +20,8 @@ limitations under the License. // - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work // in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored // in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in -// local storage, which does work in incognito mode. +// local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime +// generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines. // - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is // not responsive (which may be the cause of the bug). @@ -77,6 +78,8 @@ class IndexedDBLogStore { constructor(indexedDB, logger) { this.indexedDB = indexedDB; this.logger = logger; + this.id = "instance-" + Date.now(); + this.index = 0; this.db = null; } @@ -103,13 +106,13 @@ class IndexedDBLogStore { req.onupgradeneeded = (event) => { const db = event.target.result; const objectStore = db.createObjectStore("logs", { - autoIncrement: true - }) - objectStore.transaction.oncomplete = function(event) { - objectStore.add( + keyPath: ["id", "index"] + }); + objectStore.add( + this._generateLogEntry( new Date() + " ::: Log database was created." - ); - }; + ) + ); } }); } @@ -129,7 +132,7 @@ class IndexedDBLogStore { return new Promise((resolve, reject) => { let txn = this.db.transaction("logs", "readwrite"); let objStore = txn.objectStore("logs"); - objStore.add(lines); + objStore.add(this._generateLogEntry(lines)); txn.oncomplete = (event) => { resolve(); }; @@ -139,6 +142,14 @@ class IndexedDBLogStore { } }); } + + _generateLogEntry(lines) { + return { + id: this.id, + lines: lines, + index: this.index++ + }; + } } @@ -176,5 +187,9 @@ module.exports = { * @return {Promise} Resolved when the bug report is sent. */ sendBugReport: function(userText) { + // To gather all the logs, we first query for every log entry with index "0", this will let us + // know all the IDs from different tabs/sessions. + + // Send logs grouped by ID } }; From f20efc57f3beb4e8f0bea05c04980bc4b35b7606 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 17:05:13 +0000 Subject: [PATCH 066/168] simple doc about theming --- docs/theming.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 docs/theming.md diff --git a/docs/theming.md b/docs/theming.md new file mode 100644 index 00000000..defb18bc --- /dev/null +++ b/docs/theming.md @@ -0,0 +1,25 @@ +Theming Riot +============ + +Themes are a very basic way of providing simple alternative look & feels to the +riot-web app via CSS & custom imagery. + +They are *NOT* co be confused with 'skins', which describe apps which sit on top +of matrix-react-sdk - e.g. in theory Riot itself is a react-sdk skin. +As of Jan 2017, skins are not fully supported; riot is the only available skin. + +To define a theme for Riot: + + 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`. + 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss + 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss + 4. Override variables in _teal.css as desired. You may wish to delete ones + which don't differ from _base.scss, to make it clear which are being + overridden. If every single colour is being changed (as per _dark.scss) + then you might as well keep them all. + 5. Add the theme to the list of entrypoints in webpack.config.js + 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js + 7. Sit back and admire your handywork. + +In future, the assets for a theme will probably be gathered together into a +single directory tree. \ No newline at end of file From 811086ac8ec1ea1b7cd5d5b475712d5277ce9af3 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Wed, 18 Jan 2017 17:18:02 +0000 Subject: [PATCH 067/168] Comment how we should consume logs --- src/vector/rageshake.js | 44 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 5739a934..9b6106ed 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -23,7 +23,9 @@ limitations under the License. // local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime // generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines. // - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is -// not responsive (which may be the cause of the bug). +// not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most +// recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this check +// on startup to prevent logs from accumulating. const FLUSH_RATE_MS = 30 * 1000; @@ -143,6 +145,39 @@ class IndexedDBLogStore { }); } + /** + * Consume the most recent logs and return them. Older logs which are not returned are deleted at the same time, + * so this can be called at startup to do house-keeping to keep the logs from growing too large. + * + * @param {boolean} clearAll True to clear the most recent logs returned in addition to the + * older logs. This is desirable when sending bug reports as we do not want to submit the + * same logs twice. This is not desirable when doing house-keeping at startup in case they + * want to submit a bug report later. + * @return {Promise} Resolves to an array of objects. The array is sorted in time (oldest first) based on + * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a + * big string with all the new-line delimited logs. + */ + consume(clearAll) { + const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB + // To gather all the logs, we first query for every log entry with index "0", this will let us + // know all the IDs from different tabs/sessions. + return new Promise((resolve, reject) => { + // let txn = this.db.transaction("logs", "readonly"); + // let objectStore = txn.objectStore("logs"); + + // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs, + // ignoring the logs for now, and sort them to work out the correct log ID ordering. + + // Starting with the most recent ID, fetch the logs (all indices) for said ID and accumulate them + // in order. After fetching ALL the logs for an ID, recheck the total length of the logs to work out + // if we have exceeded the max size cutoff for "recent" logs. + + // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set). + + // Return the logs that are within the cutoff. + }); + } + _generateLogEntry(lines) { return { id: this.id, @@ -187,9 +222,8 @@ module.exports = { * @return {Promise} Resolved when the bug report is sent. */ sendBugReport: function(userText) { - // To gather all the logs, we first query for every log entry with index "0", this will let us - // know all the IDs from different tabs/sessions. - - // Send logs grouped by ID + return store.consume(true).then((data) => { + // Send logs grouped by ID + }); } }; From ec1a2f6abfd73d8b181401eb37285aaf8a9cb55e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 19:29:53 +0000 Subject: [PATCH 068/168] fix CSS regression in searchbox --- .../vector/css/matrix-react-sdk/structures/_SearchBox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index bd335f60..382a07f9 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -44,7 +44,7 @@ limitations under the License. height: 24px; border: 0px ! important; /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ - background-color: transparent; + background-color: transparent ! important; border: 0px; } From 5b95986705d9958545ad5ed4f94ed169da4eefa1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 20:05:18 +0000 Subject: [PATCH 069/168] fix various SCSS snafus --- src/skins/vector/css/_common.scss | 4 ++-- .../vector/css/matrix-react-sdk/structures/_SearchBox.scss | 1 - src/skins/vector/img/icon-call.svg | 2 +- src/skins/vector/img/icons-close-button.svg | 2 +- src/skins/vector/img/icons-search.svg | 2 +- src/skins/vector/img/icons-upload.svg | 2 +- src/skins/vector/img/icons-video.svg | 2 +- 7 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 01ba81d8..94362a2f 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,8 +55,8 @@ a:visited { color: $accent-color; } -input[type=text] { - background-color: $primary-bg-color; +input[type=text], input[type=password] { + background-color: transparent; color: $primary-fg-color; } diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss index 382a07f9..0f34f056 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss @@ -44,7 +44,6 @@ limitations under the License. height: 24px; border: 0px ! important; /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */ - background-color: transparent ! important; border: 0px; } diff --git a/src/skins/vector/img/icon-call.svg b/src/skins/vector/img/icon-call.svg index 2d96b145..0ca5c29e 100644 --- a/src/skins/vector/img/icon-call.svg +++ b/src/skins/vector/img/icon-call.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-close-button.svg b/src/skins/vector/img/icons-close-button.svg index f17940f5..f960d73a 100644 --- a/src/skins/vector/img/icons-close-button.svg +++ b/src/skins/vector/img/icons-close-button.svg @@ -7,7 +7,7 @@ - + diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg index 4f5002ab..d85709e6 100644 --- a/src/skins/vector/img/icons-search.svg +++ b/src/skins/vector/img/icons-search.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg index 9074fcf9..b0101e87 100644 --- a/src/skins/vector/img/icons-upload.svg +++ b/src/skins/vector/img/icons-upload.svg @@ -2,7 +2,7 @@ - + diff --git a/src/skins/vector/img/icons-video.svg b/src/skins/vector/img/icons-video.svg index a35df49b..d367f496 100644 --- a/src/skins/vector/img/icons-video.svg +++ b/src/skins/vector/img/icons-video.svg @@ -7,7 +7,7 @@ - + From 237f4df08eeb0333c451928d5af4adacd1000aca Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 18 Jan 2017 21:30:53 +0000 Subject: [PATCH 070/168] A couple of tweaks to the karma config * allow the imgs to be served from the karma server to avoid 404s * Use the source-map-loader for js --- karma.conf.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 24742169..901832c7 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -29,12 +29,22 @@ module.exports = function (config) { files: [ 'node_modules/babel-polyfill/browser.js', testFile, - {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false}, + + // make the images available via our httpd. They will be avaliable + // below http://localhost:[PORT]/base/. See also `proxies` which + // defines alternative URLs for them. + // + // This isn't required by any of the tests, but it stops karma + // logging warnings when it serves a 404 for them. + { + pattern: 'src/skins/vector/img/*', + watched: false, included: false, served: true, nocache: false, + }, ], - // redirect img links to the karma server proxies: { - "/img/": "/base/vector/img/", + // redirect img links to the karma server. See above. + "/img/": "/base/src/skins/vector/img/", }, // preprocess matching files before serving them to the browser @@ -86,6 +96,12 @@ module.exports = function (config) { webpack: { module: { + preLoaders: [ + // use the source-map-loader for javascript. This means + // that we have a better chance of seeing line numbers from + // the pre-babeled source. + { test: /\.js$/, loader: "source-map-loader" }, + ], loaders: [ { test: /\.json$/, loader: "json" }, { From c5032ba1bc4a7cde6ccd69c370ab336b7d2deac8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 18 Jan 2017 22:46:12 +0000 Subject: [PATCH 071/168] Update theming.md --- docs/theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/theming.md b/docs/theming.md index defb18bc..c6373e52 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -13,7 +13,7 @@ To define a theme for Riot: 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`. 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss - 4. Override variables in _teal.css as desired. You may wish to delete ones + 4. Override variables in _teal.scss as desired. You may wish to delete ones which don't differ from _base.scss, to make it clear which are being overridden. If every single colour is being changed (as per _dark.scss) then you might as well keep them all. @@ -22,4 +22,4 @@ To define a theme for Riot: 7. Sit back and admire your handywork. In future, the assets for a theme will probably be gathered together into a -single directory tree. \ No newline at end of file +single directory tree. From d1fbbf90c088f5d97a2b82882f8755dab5b03d5f Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Wed, 18 Jan 2017 21:51:49 +0000 Subject: [PATCH 072/168] Verify PGP signatures on tarballs when deploying --- scripts/deploy.py | 35 ++++++++++++++++++++++++++++++----- scripts/redeploy.py | 6 ++++++ 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/scripts/deploy.py b/scripts/deploy.py index dde13c54..c96b46e8 100755 --- a/scripts/deploy.py +++ b/scripts/deploy.py @@ -10,8 +10,16 @@ from __future__ import print_function import argparse import os import os.path +import subprocess +import sys import tarfile -import urllib + +try: + # python3 + from urllib.request import urlretrieve +except ImportError: + # python2 + from urllib import urlretrieve class DeployException(Exception): pass @@ -56,6 +64,7 @@ class Deployer: self.bundles_path = None self.should_clean = False self.config_location = None + self.verify_signature = True def deploy(self, tarball, extract_path): """Download a tarball if necessary, and unpack it @@ -65,9 +74,15 @@ class Deployer: """ print("Deploying %s to %s" % (tarball, extract_path)) + name_str = os.path.basename(tarball).replace(".tar.gz", "") + extracted_dir = os.path.join(extract_path, name_str) + if os.path.exists(extracted_dir): + raise DeployException('Cannot unpack %s: %s already exists' % ( + tarball, extracted_dir)) + downloaded = False if tarball.startswith("http://") or tarball.startswith("https://"): - tarball = self.download_file(tarball) + tarball = self.download_and_verify(tarball) print("Downloaded file: %s" % tarball) downloaded = True @@ -78,8 +93,6 @@ class Deployer: if self.should_clean and downloaded: os.remove(tarball) - name_str = os.path.basename(tarball).replace(".tar.gz", "") - extracted_dir = os.path.join(extract_path, name_str) print ("Extracted into: %s" % extracted_dir) if self.config_location: @@ -101,12 +114,24 @@ class Deployer: ) return extracted_dir + def download_and_verify(self, url): + tarball = self.download_file(url) + + if self.verify_signature: + sigfile = self.download_file(url + ".asc") + subprocess.check_call(["gpg", "--verify", sigfile, tarball]) + + return tarball + def download_file(self, url): if not os.path.isdir(self.packages_path): os.mkdir(self.packages_path) local_filename = os.path.join(self.packages_path, url.split('/')[-1]) - urllib.urlretrieve(url, local_filename) + sys.stdout.write("Downloading %s -> %s..." % (url, local_filename)) + sys.stdout.flush() + urlretrieve(url, local_filename) + print ("Done") return local_filename if __name__ == "__main__": diff --git a/scripts/redeploy.py b/scripts/redeploy.py index 0796b963..598f6c52 100755 --- a/scripts/redeploy.py +++ b/scripts/redeploy.py @@ -214,6 +214,12 @@ if __name__ == "__main__": deployer.should_clean = args.clean deployer.config_location = args.config + # we don't pgp-sign jenkins artifacts; instead we rely on HTTPS access to + # the jenkins server (and the jenkins server not being compromised and/or + # github not serving it compromised source). If that's not good enough for + # you, don't use riot.im/develop. + deployer.verify_signature = False + if args.tarball_uri is not None: build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time())) deploy_tarball(args.tarball_uri, build_dir) From c3fa6ff8053f047d6d8dd8270dbb243abed5d587 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 02:48:17 +0000 Subject: [PATCH 073/168] Use the postcss-webpack-loader Use postcss-webpack-loader instead of webpack-cli to process the scss. Doing so mostly means that we avoid the problem that webpack-dev-server fails to start if we haven't already built the CSS. (It also simplifies package.json somewhat, which is no bad thing) --- package.json | 14 ++++++-------- postcss.config.js | 13 +++++++++++++ postcss.config.json | 15 --------------- webpack.config.js | 26 +++++++++++++++++++++----- 4 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 postcss.config.js delete mode 100644 postcss.config.json diff --git a/package.json b/package.json index 722e0cf0..84e05478 100644 --- a/package.json +++ b/package.json @@ -29,21 +29,19 @@ "reskindex": "reskindex -h src/header", "build:res": "node scripts/copy-res.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:css": "mkdirp build && postcss -c postcss.config.json", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p --progress", "build:bundle:dev": "webpack --optimize-occurence-order --progress", "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64", - "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle", - "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev", + "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle", + "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev", "dist": "scripts/package.sh", "start:res": "node scripts/copy-res.js -w", "start:js": "webpack-dev-server -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", - "start:css": "mkdirp build && postcss -c postcss.config.json -w", - "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"", - "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"", - "clean": "rimraf build lib webapp electron/dist", + "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", + "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", + "clean": "rimraf lib webapp electron/dist", "prepublish": "npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test:multi": "karma start" @@ -114,9 +112,9 @@ "mocha": "^2.4.5", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", - "postcss-cli": "^2.6.0", "postcss-extend": "^1.0.5", "postcss-import": "^9.0.0", + "postcss-loader": "^1.2.2", "postcss-mixins": "^5.4.1", "postcss-nested": "^1.0.0", "postcss-scss": "^0.4.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000..5305d9ed --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,13 @@ +module.exports = { + plugins: [ + require("postcss-import")(), + require("autoprefixer")(), + require("postcss-simple-vars")(), + require("postcss-extend")(), + require("postcss-nested")(), + require("postcss-mixins")(), + require("postcss-strip-inline-comments")(), + ], + "parser": "postcss-scss", + "local-plugins": true, +}; diff --git a/postcss.config.json b/postcss.config.json deleted file mode 100644 index 7ed32cda..00000000 --- a/postcss.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "use": [ - "postcss-import", - "autoprefixer", - "postcss-simple-vars", - "postcss-extend", - "postcss-nested", - "postcss-mixins", - "postcss-strip-inline-comments" - ], - "parser": "postcss-scss", - "input": "src/skins/vector/css/themes/[^_]*.scss", - "dir": "build", - "local-plugins": true -} diff --git a/webpack.config.js b/webpack.config.js index 3a701965..136e0af7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,8 +17,8 @@ module.exports = { "olm": "./src/vector/olm-loader.js", // CSS themes - "theme-light": "./build/light.scss", - "theme-dark": "./build/dark.scss", + "theme-light": "./src/skins/vector/css/themes/light.scss", + "theme-dark": "./src/skins/vector/css/themes/dark.scss" }, module: { preLoaders: [ @@ -27,9 +27,25 @@ module.exports = { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, loader: "babel", include: path.resolve('./src') }, - // css-raw-loader loads CSS but doesn't try to treat url()s as require()s - // we're assuming that postcss has already preprocessed SCSS by this point - { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") }, + { + test: /\.scss$/, + + // 1. postcss-loader turns the SCSS into normal CSS. + // 2. css-raw-loader turns the CSS into a javascript module + // whose default export is a string containing the CSS. + // (css-raw-loader is similar to css-loader, but the latter + // would also drag in the imgs and fonts that our CSS refers to + // as webpack inputs.) + // 3. ExtractTextPlugin turns that string into a separate asset. + loader: ExtractTextPlugin.extract( + "css-raw-loader!postcss-loader?config=postcss.config.js" + ), + }, + { + // this works similarly to the scss case, without postcss. + test: /\.css$/, + loader: ExtractTextPlugin.extract("css-raw-loader"), + }, ], noParse: [ // don't parse the languages within highlight.js. They cause stack From e08f97a549925ee6bada12963dac1afdae0de714 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 11:52:15 +0100 Subject: [PATCH 074/168] Reduce animation time to 200ms --- .../vector/css/matrix-react-sdk/structures/RoomView.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 3b3c396f..b7fe0441 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker { z-index: 1000; overflow: hidden; - -webkit-transition: all .5s ease-in-out; - -moz-transition: all .5s ease-in-out; - -ms-transition: all .5s ease-in-out; - -o-transition: all .5s ease-in-out; + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; } .mx_RoomView_statusArea_expanded { From 6b1d1389187c3a0904ae2c04097033cd7631a12d Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 12:45:26 +0100 Subject: [PATCH 075/168] Make scrolling to bottom whilst expanded seem less weird inertially --- .../css/matrix-react-sdk/structures/RoomView.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index b7fe0441..6dc22e2f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker { z-index: 1000; overflow: hidden; - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; + -ms-transition: all .2s ease-out; + -o-transition: all .2s ease-out; } .mx_RoomView_statusArea_expanded { @@ -221,6 +221,11 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { margin-top: -50px; + + -webkit-transition: all .2s ease-in; + -moz-transition: all .2s ease-in; + -ms-transition: all .2s ease-in; + -o-transition: all .2s ease-in; } .mx_RoomView_statusAreaBox { From 89d514a532827f5eb576a43138228a96a1606c02 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 12:02:19 +0000 Subject: [PATCH 076/168] Query IndexedDB for all results with index=0 --- src/vector/rageshake.js | 46 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 9b6106ed..65462d15 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -24,7 +24,7 @@ limitations under the License. // generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines. // - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is // not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most -// recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this check +// recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this purge // on startup to prevent logs from accumulating. const FLUSH_RATE_MS = 30 * 1000; @@ -38,6 +38,7 @@ class ConsoleLogger { const consoleFunctionsToLevels = { log: "I", info: "I", + warn: "W", error: "E", }; Object.keys(consoleFunctionsToLevels).forEach((fnName) => { @@ -110,6 +111,12 @@ class IndexedDBLogStore { const objectStore = db.createObjectStore("logs", { keyPath: ["id", "index"] }); + // Keys in the database look like: [ "instance-148938490", 0 ] + // Later on we need to query for everything with index=0, and query everything for an instance id. + // In order to do this, we need to set up indexes on both "id" and "index". + objectStore.createIndex("index", "index", { unique: false }); + objectStore.createIndex("id", "id", { unique: false }); + objectStore.add( this._generateLogEntry( new Date() + " ::: Log database was created." @@ -161,9 +168,11 @@ class IndexedDBLogStore { const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB // To gather all the logs, we first query for every log entry with index "0", this will let us // know all the IDs from different tabs/sessions. - return new Promise((resolve, reject) => { - // let txn = this.db.transaction("logs", "readonly"); - // let objectStore = txn.objectStore("logs"); + const txn = this.db.transaction("logs", "readonly"); + const objectStore = txn.objectStore("logs"); + return selectQuery(objectStore.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => { + console.log("Instances: ", res); + }); // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs, // ignoring the logs for now, and sort them to work out the correct log ID ordering. @@ -175,7 +184,6 @@ class IndexedDBLogStore { // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set). // Return the logs that are within the cutoff. - }); } _generateLogEntry(lines) { @@ -187,6 +195,34 @@ class IndexedDBLogStore { } } +/** + * Helper method to collect results from a Cursor and promiseify it. + * @param {ObjectStore|Index} store The store to perform openCursor on. + * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor. + * @param {Function} resultMapper A function which is repeatedly called with a Cursor. + * Return the data you want to keep. + * @return {Promise} Resolves to an array of whatever you returned from resultMapper. + */ +function selectQuery(store, keyRange, resultMapper) { + const query = store.openCursor(keyRange); + return new Promise((resolve, reject) => { + let results = []; + query.onerror = (event) => { + reject(new Error("Query failed: " + event.target.errorCode)); + }; + // collect results + query.onsuccess = (event) => { + const cursor = event.target.result; + if (!cursor) { + resolve(results); + return; // end of results + } + results.push(resultMapper(cursor)); + cursor.continue(); + } + }); +} + let store = null; let inited = false; From 231adbcd311359b858dbb7dd7911d4dab9b21891 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 13:02:08 +0000 Subject: [PATCH 077/168] Add copyright header --- electron/src/squirrelhooks.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js index ca0983b6..15ed670f 100644 --- a/electron/src/squirrelhooks.js +++ b/electron/src/squirrelhooks.js @@ -1,3 +1,19 @@ +/* +Copyright 2017 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + const path = require('path'); const spawn = require('child_process').spawn; const app = require('electron').app; From bee4ca2b28babf3cf43ec3c744a6b4e10bf3e624 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 13:25:56 +0000 Subject: [PATCH 078/168] Fixes to electron desktop notifs Merge the notification part of https://github.com/vector-im/riot-web/pull/2960 * Show and focus the window when the notification is clicked, rather than just restoring it. * Implement requestNotificationPermission and return a resolved promise (although in practice it should never be called) --- src/vector/platform/ElectronPlatform.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js index 68df88b0..47bfd990 100644 --- a/src/vector/platform/ElectronPlatform.js +++ b/src/vector/platform/ElectronPlatform.js @@ -97,7 +97,10 @@ export default class ElectronPlatform extends VectorBasePlatform { room_id: room.roomId }); global.focus(); - electron.remote.getCurrentWindow().restore(); + const currentWin = electron.remote.getCurrentWindow(); + currentWin.show(); + currentWin.restore(); + currentWin.focus(); }; return notification; @@ -131,4 +134,8 @@ export default class ElectronPlatform extends VectorBasePlatform { screenCaptureErrorString() { return null; } + + requestNotificationPermission() : Promise { + return q('granted'); + } } From d11bcdad5fdd80c9eed34328a566fb707111b6b6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 14:29:07 +0000 Subject: [PATCH 079/168] Add electron tray icon From https://github.com/vector-im/riot-web/pull/2960 Makes riot minimise to the tray on windows / linux. --- electron/src/electron-main.js | 10 +++++- electron/src/tray.js | 67 +++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 electron/src/tray.js diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 929b7892..653dfd46 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -26,6 +26,8 @@ if (check_squirrel_hooks()) return; const electron = require('electron'); const url = require('url'); +const tray = require('./tray'); + const VectorMenu = require('./vectormenu'); let vectorConfig = {}; @@ -180,6 +182,12 @@ electron.app.on('ready', () => { mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`); electron.Menu.setApplicationMenu(VectorMenu); + // Create trayIcon icon + tray.create(mainWindow, { + icon_path: icon_path, + brand: vectorConfig.brand || 'Riot' + }); + mainWindow.once('ready-to-show', () => { mainWindow.show(); }); @@ -187,7 +195,7 @@ electron.app.on('ready', () => { mainWindow = null; }); mainWindow.on('close', (e) => { - if (process.platform == 'darwin' && !appQuitting) { + if (!appQuitting && (tray.hasTray() || process.platform == 'darwin')) { // On Mac, closing the window just hides it // (this is generally how single-window Mac apps // behave, eg. Mail.app) diff --git a/electron/src/tray.js b/electron/src/tray.js new file mode 100644 index 00000000..2ccdf40c --- /dev/null +++ b/electron/src/tray.js @@ -0,0 +1,67 @@ +/* +Copyright 2017 Karl Glatz +Copyright 2017 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +const path = require('path'); +const electron = require('electron'); + +const app = electron.app; +const Tray = electron.Tray; +const MenuItem = electron.MenuItem; + +let trayIcon = null; + +exports.hasTray = function hasTray() { + return (trayIcon !== null); +} + +exports.create = function (win, config) { + // no trays on darwin + if (process.platform === 'darwin' || trayIcon) { + return; + } + + const toggleWin = function () { + if (win.isVisible() && !win.isMinimized()) { + win.hide(); + } else { + if (win.isMinimized()) win.restore(); + if (!win.isVisible()) win.show(); + win.focus(); + } + }; + + const contextMenu = electron.Menu.buildFromTemplate([ + { + label: 'Show/Hide ' + config.brand, + click: toggleWin + }, + { + type: 'separator' + }, + { + label: 'Quit', + click: function () { + app.quit(); + } + } + ]); + + trayIcon = new Tray(config.icon_path); + trayIcon.setToolTip(config.brand); + trayIcon.setContextMenu(contextMenu); + trayIcon.on('click', toggleWin); +}; From 608c1b02081a75617a9d9a9ed483a962c7f0940a Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 15:03:47 +0000 Subject: [PATCH 080/168] Finish implementing consume() - Fetches all logs in order and concatenates correctly. - Purges old logs correctly. --- src/vector/index.js | 1 + src/vector/rageshake.js | 133 ++++++++++++++++++++++++++++++++++------ 2 files changed, 116 insertions(+), 18 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index b965f01d..d773db85 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -39,6 +39,7 @@ require('draft-js/dist/Draft.css'); const rageshake = require("./rageshake"); rageshake.init().then(() => { console.log("Initialised rageshake"); + rageshake.sendBugReport(); }, (err) => { console.error("Failed to initialise rageshake: " + err); }); diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 65462d15..6093515d 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -166,24 +166,120 @@ class IndexedDBLogStore { */ consume(clearAll) { const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB - // To gather all the logs, we first query for every log entry with index "0", this will let us - // know all the IDs from different tabs/sessions. - const txn = this.db.transaction("logs", "readonly"); - const objectStore = txn.objectStore("logs"); - return selectQuery(objectStore.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => { - console.log("Instances: ", res); + const db = this.db; + + // Returns: a string representing the concatenated logs for this ID. + function fetchLogs(id) { + const o = db.transaction("logs", "readonly").objectStore("logs"); + return selectQuery(o.index("id"), IDBKeyRange.only(id), (cursor) => { + return { + lines: cursor.value.lines, + index: cursor.value.index, + } + }).then((linesArray) => { + // We have been storing logs periodically, so string them all together *in order of index* now + linesArray.sort((a, b) => { + return a.index - b.index; + }) + return linesArray.map((l) => l.lines).join(""); + }); + } + + // Returns: A sorted array of log IDs. (newest first) + function fetchLogIds() { + // To gather all the log IDs, query for every log entry with index "0", this will let us + // know all the IDs from different tabs/sessions. + const o = db.transaction("logs", "readonly").objectStore("logs"); + return selectQuery(o.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => { + // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs, + // ignoring the logs for now, and sort them to work out the correct log ID ordering, newest first. + // E.g. [ "instance-1484827160051", "instance-1374827160051", "instance-1000007160051"] + return res.sort().reverse(); + }); + } + + function deleteLogs(id) { + return new Promise((resolve, reject) => { + const txn = db.transaction("logs", "readwrite"); + const o = txn.objectStore("logs"); + // only load the key path, not the data which may be huge + const query = o.index("id").openKeyCursor(IDBKeyRange.only(id)); + query.onsuccess = (event) => { + const cursor = event.target.result; + if (!cursor) { + return; + } + o.delete(cursor.primaryKey); + cursor.continue(); + } + txn.oncomplete = () => { + resolve(); + }; + txn.onerror = (event) => { + reject(new Error(`Failed to delete logs for '${id}' : ${event.target.errorCode}`)); + } + }); + } + + // Ideally we'd just use coroutines and a for loop but riot-web doesn't support async/await so instead + // recursively fetch logs up to the given threshold. We can't cheat and fetch all the logs + // from all time, but we may OOM if we do so. + // Returns: Promise : Each object having 'id' and 'lines'. Same ordering as logIds. + function fetchLogsToThreshold(logIds, threshold, logs) { + // Base case: check log size and return if bigger than threshold + let size = 0; + logs.forEach((l) => { + size += l.lines.length; + }); + if (size > threshold) { + return Promise.resolve(logs); + } + + // fetch logs for the first element + let logId = logIds.shift(); + if (!logId) { + // no more entries + return Promise.resolve(logs); + } + return fetchLogs(logId).then((lines) => { + // add result to logs + logs.push({ + lines: lines, + id: logId, + }); + // recurse with the next log ID. TODO: Stack overflow risk? + return fetchLogsToThreshold(logIds, threshold, logs); + }) + } + + let allLogIds = []; + return fetchLogIds().then((logIds) => { + allLogIds = logIds.map((id) => id); // deep copy array as we'll modify it when fetching logs + return fetchLogsToThreshold(logIds, MAX_LOG_SIZE, []); + }).then((logs) => { + // Remove all logs that are beyond the threshold (not in logs), or the entire logs if clearAll was set. + let removeLogIds = allLogIds; + if (!clearAll) { + removeLogIds = removeLogIds.filter((id) => { + for (let i = 0; i < logs.length; i++) { + if (logs[i].id === id) { + return false; // do not remove logs that we're about to return to the caller. + } + } + return true; + }); + } + if (removeLogIds.length > 0) { + console.log("Removing logs: ", removeLogIds); + // Don't promise chain this because it's non-fatal if we can't clean up logs. + Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => { + console.log(`Removed ${removeLogIds.length} old logs.`); + }, (err) => { + console.error(err); + }) + } + return logs; }); - - // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs, - // ignoring the logs for now, and sort them to work out the correct log ID ordering. - - // Starting with the most recent ID, fetch the logs (all indices) for said ID and accumulate them - // in order. After fetching ALL the logs for an ID, recheck the total length of the logs to work out - // if we have exceeded the max size cutoff for "recent" logs. - - // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set). - - // Return the logs that are within the cutoff. } _generateLogEntry(lines) { @@ -258,8 +354,9 @@ module.exports = { * @return {Promise} Resolved when the bug report is sent. */ sendBugReport: function(userText) { - return store.consume(true).then((data) => { + return store.consume(false).then((logs) => { // Send logs grouped by ID + console.log(logs); }); } }; From 61c5253dbf41fed7deec32d445bfa3c222833a7a Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 15:40:54 +0000 Subject: [PATCH 081/168] Give the 'Light' theme link a title too ... mostly to make it appear on the Firefox style menu. --- src/vector/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/vector/index.html b/src/vector/index.html index a6c3092d..3ab667cc 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -22,11 +22,13 @@ <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) { var file = htmlWebpackPlugin.files.css[i]; - var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/); + var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/); if (match) { var title = match[1].charAt(0).toUpperCase() + match[1].slice(1); + var light = match[1] == 'light'; %> - + <% } else { %> <% } From 81d437ac1e16104f32fef3c0d694a215fb7129a5 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 15:47:55 +0000 Subject: [PATCH 082/168] POST reports to localhost for now. Also send live console logs --- src/vector/index.js | 2 +- src/vector/rageshake.js | 75 +++++++++++++++++++++++++++++++++++------ 2 files changed, 66 insertions(+), 11 deletions(-) diff --git a/src/vector/index.js b/src/vector/index.js index d773db85..d1d457e9 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -39,7 +39,7 @@ require('draft-js/dist/Draft.css'); const rageshake = require("./rageshake"); rageshake.init().then(() => { console.log("Initialised rageshake"); - rageshake.sendBugReport(); + rageshake.cleanup(); }, (err) => { console.error("Failed to initialise rageshake: " + err); }); diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 6093515d..1f3dbc7d 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +import request from "browser-request"; + // This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows: // - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily, // without having to all depend on the same log framework / pass the logger around. @@ -321,20 +323,27 @@ function selectQuery(store, keyRange, resultMapper) { let store = null; -let inited = false; +let logger = null; +let initPromise = null; module.exports = { /** * Configure rage shaking support for sending bug reports. * Modifies globals. + * @return {Promise} Resolves when set up. */ init: function() { - if (inited || !window.indexedDB) { - return; + if (initPromise) { + return initPromise; } - store = new IndexedDBLogStore(window.indexedDB, new ConsoleLogger()); - inited = true; - return store.connect(); + logger = new ConsoleLogger(); + if (window.indexedDB) { + store = new IndexedDBLogStore(window.indexedDB, logger); + initPromise = store.connect(); + return initPromise; + } + initPromise = Promise.resolve(); + return initPromise; }, /** @@ -343,20 +352,66 @@ module.exports = { */ flush: function() { if (!store) { - return; + return Promise.resolve(); } return store.flush(); }, + /** + * Clean up old logs. + * @return Promise Resolves if cleaned logs. + */ + cleanup: function() { + if (!store) { + return Promise.resolve(); + } + return store.consume(false); + }, + /** * Send a bug report. * @param {string} userText Any additional user input. * @return {Promise} Resolved when the bug report is sent. */ sendBugReport: function(userText) { - return store.consume(false).then((logs) => { - // Send logs grouped by ID - console.log(logs); + if (!logger) { + return Promise.reject(new Error("No console logger, did you forget to call init()?")); + } + // If in incognito mode, store is null, but we still want bug report sending to work going off + // the in-memory console logs. + let promise = Promise.resolve([]); + if (store) { + promise = store.consume(false); // TODO Swap to true to remove all logs + } + return promise.then((logs) => { + // and add the most recent console logs which won't be in the store yet. + const consoleLogs = logger.flush(); // remove logs from console + const currentId = store ? store.id : "-"; + logs.unshift({ + lines: consoleLogs, + id: currentId, + }); + return new Promise((resolve, reject) => { + request({ + method: "POST", + url: "http://localhost:1337", + body: { + logs: logs, + text: userText || "User did not supply any additional text.", + }, + json: true, + }, (err, res) => { + if (err) { + reject(err); + return; + } + if (res.status < 200 || res.status >= 400) { + reject(new Error(`HTTP ${res.status}`)); + return; + } + resolve(); + }) + }); }); } }; From 789c7b60cc238d4b264d444e8e911a60d82c7b50 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Thu, 19 Jan 2017 16:51:41 +0100 Subject: [PATCH 083/168] CSS for avatars that appear when users are typing --- .../structures/_RoomStatusBar.scss | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 5daac88f..12cecffe 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -40,12 +40,12 @@ limitations under the License. opacity: 0.5; position: relative; top: -4px; -/* +/* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; animation-iteration-count: infinite; -*/ +*/ } .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) { @@ -70,6 +70,29 @@ limitations under the License. } } +.mx_RoomStatusBar_typingIndicatorAvatars { + width: 24px; + text-align: left; +} + +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { + margin-right: -12px; +} + +.mx_RoomStatusBar_typingIndicatorRemaining { + display: inline-block; + color: #acacac; + background-color: #ddd; + border-radius: 40px; + width: 24px; + height: 24px; + line-height: 24px; + font-size: 0.8em; + vertical-align: top; + text-align: center; + position: absolute; +} + .mx_RoomStatusBar_scrollDownIndicator { cursor: pointer; } From 537194608e34676450fa916a98d8a099a89af161 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 16:01:37 +0000 Subject: [PATCH 084/168] Make riot desktop single instance So launching a new instance will focus the old one, meaning that if you have Riot minimised to the tray and launch it via the desktop shortcut / start menu, you don't end up with more & more copies of the app. This doesn't really prevent you from running multiple copies of the app to fake multi account support since they share a data directory anyway. --- electron/src/electron-main.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js index 929b7892..1a6ea692 100644 --- a/electron/src/electron-main.js +++ b/electron/src/electron-main.js @@ -159,6 +159,19 @@ electron.ipcMain.on('install_update', installUpdate); electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing'); +const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirectory) => { + // Someone tried to run a second instance, we should focus our window. + if (mainWindow) { + if (!mainWindow.isVisible()) mainWindow.show(); + if (mainWindow.isMinimized()) mainWindow.restore(); + mainWindow.focus(); + } +}); + +if (shouldQuit) { + electron.app.quit() +} + electron.app.on('ready', () => { if (vectorConfig.update_base_url) { console.log("Starting auto update with base URL: " + vectorConfig.update_base_url); From f5d7f3ca9f77f491f93a5573e916463bfb2d5634 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 19 Jan 2017 16:21:43 +0000 Subject: [PATCH 085/168] Add StartupWMClass so GNOME doesn't get confused by the hidden windows --- package.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 84e05478..b7b69d0c 100644 --- a/package.json +++ b/package.json @@ -146,7 +146,10 @@ ], "linux": { "target": "deb", - "maintainer": "support@riot.im" + "maintainer": "support@riot.im", + "desktop": { + "StartupWMClass": "riot-web" + } }, "win": { "target": "squirrel" From bf887e82fec360a237bb1262ed4426311b5f7b18 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 16:40:54 +0000 Subject: [PATCH 086/168] Swap to async/await rather than promise chains Since we do in fact support coroutines! --- src/vector/rageshake.js | 161 ++++++++++++++++------------------------ 1 file changed, 65 insertions(+), 96 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 1f3dbc7d..299a8497 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -166,7 +166,7 @@ class IndexedDBLogStore { * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a * big string with all the new-line delimited logs. */ - consume(clearAll) { + async consume(clearAll) { const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB const db = this.db; @@ -223,65 +223,36 @@ class IndexedDBLogStore { }); } - // Ideally we'd just use coroutines and a for loop but riot-web doesn't support async/await so instead - // recursively fetch logs up to the given threshold. We can't cheat and fetch all the logs - // from all time, but we may OOM if we do so. - // Returns: Promise : Each object having 'id' and 'lines'. Same ordering as logIds. - function fetchLogsToThreshold(logIds, threshold, logs) { - // Base case: check log size and return if bigger than threshold - let size = 0; - logs.forEach((l) => { - size += l.lines.length; + let allLogIds = await fetchLogIds(); + let removeLogIds = []; + let logs = []; + let size = 0; + for (let i = 0; i < allLogIds.length; i++) { + let lines = await fetchLogs(allLogIds[i]); + logs.push({ + lines: lines, + id: allLogIds[i], }); - if (size > threshold) { - return Promise.resolve(logs); + size += lines.length; + if (size > MAX_LOG_SIZE) { + // the remaining log IDs should be removed. If we go out of bounds this is just [] + removeLogIds = allLogIds.slice(i + 1); + break; } - - // fetch logs for the first element - let logId = logIds.shift(); - if (!logId) { - // no more entries - return Promise.resolve(logs); - } - return fetchLogs(logId).then((lines) => { - // add result to logs - logs.push({ - lines: lines, - id: logId, - }); - // recurse with the next log ID. TODO: Stack overflow risk? - return fetchLogsToThreshold(logIds, threshold, logs); - }) } - - let allLogIds = []; - return fetchLogIds().then((logIds) => { - allLogIds = logIds.map((id) => id); // deep copy array as we'll modify it when fetching logs - return fetchLogsToThreshold(logIds, MAX_LOG_SIZE, []); - }).then((logs) => { - // Remove all logs that are beyond the threshold (not in logs), or the entire logs if clearAll was set. - let removeLogIds = allLogIds; - if (!clearAll) { - removeLogIds = removeLogIds.filter((id) => { - for (let i = 0; i < logs.length; i++) { - if (logs[i].id === id) { - return false; // do not remove logs that we're about to return to the caller. - } - } - return true; - }); - } - if (removeLogIds.length > 0) { - console.log("Removing logs: ", removeLogIds); - // Don't promise chain this because it's non-fatal if we can't clean up logs. - Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => { - console.log(`Removed ${removeLogIds.length} old logs.`); - }, (err) => { - console.error(err); - }) - } - return logs; - }); + if (clearAll) { + removeLogIds = allLogIds; + } + if (removeLogIds.length > 0) { + console.log("Removing logs: ", removeLogIds); + // Don't await this because it's non-fatal if we can't clean up logs. + Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => { + console.log(`Removed ${removeLogIds.length} old logs.`); + }, (err) => { + console.error(err); + }) + }console.log("async consumeeeee"); + return logs; } _generateLogEntry(lines) { @@ -350,22 +321,22 @@ module.exports = { * Force-flush the logs to storage. * @return {Promise} Resolved when the logs have been flushed. */ - flush: function() { + flush: async function() { if (!store) { - return Promise.resolve(); + return; } - return store.flush(); + await store.flush(); }, /** * Clean up old logs. * @return Promise Resolves if cleaned logs. */ - cleanup: function() { + cleanup: async function() { if (!store) { - return Promise.resolve(); + return; } - return store.consume(false); + await store.consume(false); }, /** @@ -373,45 +344,43 @@ module.exports = { * @param {string} userText Any additional user input. * @return {Promise} Resolved when the bug report is sent. */ - sendBugReport: function(userText) { + sendBugReport: async function(userText) { if (!logger) { - return Promise.reject(new Error("No console logger, did you forget to call init()?")); + throw new Error("No console logger, did you forget to call init()?"); } // If in incognito mode, store is null, but we still want bug report sending to work going off // the in-memory console logs. - let promise = Promise.resolve([]); + let logs = []; if (store) { - promise = store.consume(false); // TODO Swap to true to remove all logs + logs = await store.consume(false); } - return promise.then((logs) => { - // and add the most recent console logs which won't be in the store yet. - const consoleLogs = logger.flush(); // remove logs from console - const currentId = store ? store.id : "-"; - logs.unshift({ - lines: consoleLogs, - id: currentId, - }); - return new Promise((resolve, reject) => { - request({ - method: "POST", - url: "http://localhost:1337", - body: { - logs: logs, - text: userText || "User did not supply any additional text.", - }, - json: true, - }, (err, res) => { - if (err) { - reject(err); - return; - } - if (res.status < 200 || res.status >= 400) { - reject(new Error(`HTTP ${res.status}`)); - return; - } - resolve(); - }) - }); + // and add the most recent console logs which won't be in the store yet. + const consoleLogs = logger.flush(); // remove logs from console + const currentId = store ? store.id : "-"; + logs.unshift({ + lines: consoleLogs, + id: currentId, + }); + await new Promise((resolve, reject) => { + request({ + method: "POST", + url: "http://localhost:1337", + body: { + logs: logs, + text: userText || "User did not supply any additional text.", + }, + json: true, + }, (err, res) => { + if (err) { + reject(err); + return; + } + if (res.status < 200 || res.status >= 400) { + reject(new Error(`HTTP ${res.status}`)); + return; + } + resolve(); + }) }); } }; From 3996d23b1996434723335ed0c3be423ba7298561 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 16:49:25 +0000 Subject: [PATCH 087/168] Inject bug report endpoint URL from config.json --- config.sample.json | 1 + src/vector/index.js | 1 + src/vector/rageshake.js | 12 ++++++++++-- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/config.sample.json b/config.sample.json index e6384221..a65646ac 100644 --- a/config.sample.json +++ b/config.sample.json @@ -4,6 +4,7 @@ "brand": "Riot", "integrations_ui_url": "https://scalar.vector.im/", "integrations_rest_url": "https://scalar.vector.im/api", + "bug_report_endpoint_url": "https://vector.im/bugs", "enableLabs": true, "roomDirectory": { "servers": [ diff --git a/src/vector/index.js b/src/vector/index.js index d1d457e9..d1d85e06 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -241,6 +241,7 @@ async function loadApp() { let configError; try { configJson = await getConfig(); + rageshake.setBugReportEndpoint(configJson.bug_report_endpoint_url); } catch (e) { configError = e; } diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 299a8497..3fb9efdc 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -251,7 +251,7 @@ class IndexedDBLogStore { }, (err) => { console.error(err); }) - }console.log("async consumeeeee"); + } return logs; } @@ -296,6 +296,7 @@ function selectQuery(store, keyRange, resultMapper) { let store = null; let logger = null; let initPromise = null; +let bugReportEndpoint = null; module.exports = { /** @@ -339,6 +340,10 @@ module.exports = { await store.consume(false); }, + setBugReportEndpoint: function(url) { + bugReportEndpoint = url; + }, + /** * Send a bug report. * @param {string} userText Any additional user input. @@ -348,6 +353,9 @@ module.exports = { if (!logger) { throw new Error("No console logger, did you forget to call init()?"); } + if (!bugReportEndpoint) { + throw new Error("No bug report endpoint has been set."); + } // If in incognito mode, store is null, but we still want bug report sending to work going off // the in-memory console logs. let logs = []; @@ -364,7 +372,7 @@ module.exports = { await new Promise((resolve, reject) => { request({ method: "POST", - url: "http://localhost:1337", + url: bugReportEndpoint, body: { logs: logs, text: userText || "User did not supply any additional text.", From 36450764f3a341e3b07843af6e6975d494a9a374 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 16:58:55 +0000 Subject: [PATCH 088/168] rethemendex fixes - set cwd before doing cwd-specific operations - don't include 'themes' directory, otherwise it's a bit circular. --- src/skins/vector/css/_components.scss | 1 - src/skins/vector/css/rethemendex.sh | 15 ++++++++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 88435236..880c1054 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -49,7 +49,6 @@ @import "./matrix-react-sdk/views/voip/_CallView.scss"; @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss"; @import "./matrix-react-sdk/views/voip/_VideoView.scss"; -@import "./themes/_base.scss"; @import "./vector-web/_fonts.scss"; @import "./vector-web/structures/_CompatibilityPage.scss"; @import "./vector-web/structures/_LeftPanel.scss"; diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh index 9381c5cd..a7d9a657 100755 --- a/src/skins/vector/css/rethemendex.sh +++ b/src/skins/vector/css/rethemendex.sh @@ -1,8 +1,13 @@ #!/bin/bash -echo "// autogenerated by rethemendex.sh" > _components.scss +cd `dirname $0` -for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`; -do - echo "@import \"$i\";" >> _components.scss -done +{ + echo "// autogenerated by rethemendex.sh" + + find . \! \( -path ./themes -prune \) -iname _\*.scss | + fgrep -v _components.scss | LC_ALL=C sort | + while read i; do + echo "@import \"$i\";" + done +} > _components.scss From beba4d2ae36c4499e99a27258fb58b9a8e6e12b7 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 17:40:21 +0000 Subject: [PATCH 089/168] Add version and user agent to bug report --- src/vector/rageshake.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 3fb9efdc..e3cc6661 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg'; import request from "browser-request"; // This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows: @@ -356,6 +357,18 @@ module.exports = { if (!bugReportEndpoint) { throw new Error("No bug report endpoint has been set."); } + + let version = "UNKNOWN"; + try { + version = await PlatformPeg.get().getAppVersion(); + } + catch (err) {} // PlatformPeg already logs this. + + let userAgent = "UNKNOWN"; + if (window.navigator && window.navigator.userAgent) { + userAgent = window.navigator.userAgent; + } + // If in incognito mode, store is null, but we still want bug report sending to work going off // the in-memory console logs. let logs = []; @@ -376,6 +389,8 @@ module.exports = { body: { logs: logs, text: userText || "User did not supply any additional text.", + version: version, + user_agent: userAgent, }, json: true, }, (err, res) => { From 53a16158c75ff0b938b2383ad91829c9d23c891a Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Thu, 19 Jan 2017 17:41:08 +0000 Subject: [PATCH 090/168] Remove logs when submitting bug reports --- src/vector/rageshake.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index e3cc6661..2b4d0b7d 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -373,7 +373,7 @@ module.exports = { // the in-memory console logs. let logs = []; if (store) { - logs = await store.consume(false); + logs = await store.consume(true); } // and add the most recent console logs which won't be in the store yet. const consoleLogs = logger.flush(); // remove logs from console From 8ad0ff24f8f5422a6c15f7744227a241d789aee8 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 19 Jan 2017 18:35:43 +0000 Subject: [PATCH 091/168] Fix link to image for event options menu This has to be relative, because we don't know if riot is going to be mounted at the top-level of the domain or not (it's not, on riot.im). Links are relative to the final location of the CSS, which is under bundles/, so need ../.. --- src/skins/vector/css/themes/_base.scss | 2 +- src/skins/vector/css/themes/_dark.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index ad18eb49..476cf7e0 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -88,7 +88,7 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "/img/icon_context_message.svg"; +$edit-button-url: "../../img/icon_context_message.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index e3e32e84..0f3b77f5 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -88,7 +88,7 @@ $event-notsent-color: #f44; // event timestamp $event-timestamp-color: #acacac; -$edit-button-url: "/img/icon_context_message_dark.svg"; +$edit-button-url: "../../img/icon_context_message_dark.svg"; // e2e $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color From fa535996ae6c979522252f2540c656f09576ebc9 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:22:11 +0000 Subject: [PATCH 092/168] fix textarea bg --- src/skins/vector/css/_common.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss index 94362a2f..bf31bea6 100644 --- a/src/skins/vector/css/_common.scss +++ b/src/skins/vector/css/_common.scss @@ -55,7 +55,7 @@ a:visited { color: $accent-color; } -input[type=text], input[type=password] { +input[type=text], input[type=password], textarea { background-color: transparent; color: $primary-fg-color; } From 4d8f5d4df1c3bb0ef27b53842f3ed1755e9039d8 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:29:56 +0000 Subject: [PATCH 093/168] change selection color & fix MD bg --- .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 4 ++++ src/skins/vector/css/themes/_dark.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss index b79db919..29170a83 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss @@ -294,6 +294,10 @@ limitations under the License. overflow-y: visible; } +.mx_EventTile_content .markdown-body code { + background-color: #f8f8f8; +} + .mx_EventTile_content .markdown-body h1, .mx_EventTile_content .markdown-body h2, .mx_EventTile_content .markdown-body h3, diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 0f3b77f5..03913ca2 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -73,7 +73,7 @@ $voip-accept-color: #80f480; // ******************** $roomtile-name-color: rgba(186, 186, 186, 0.8); -$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8); +$roomtile-selected-bg-color: rgba(255, 255, 255, 0.05); $roomsublist-label-fg-color: $h3-color; $roomsublist-label-bg-color: #454545; From 9b70e2e25f3442374a1fbaeaedf25b29b2ce0539 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 02:34:45 +0000 Subject: [PATCH 094/168] fix RTE bg color --- .../vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss index 9265d4dc..062dd0ba 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss @@ -4,7 +4,7 @@ z-index: 1000; width: 100%; border: 1px solid $primary-hairline-color; - background: white; + background: $primary-bg-color; border-bottom: none; border-radius: 4px 4px 0 0; max-height: 50vh; From ea860807c4fef075767e06aa19c33fd97f702846 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 20 Jan 2017 11:56:11 +0000 Subject: [PATCH 095/168] Add a monkeyPatch function rather than monkey-patching in the constructor --- src/vector/rageshake.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 2b4d0b7d..e12ee329 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -36,7 +36,9 @@ const FLUSH_RATE_MS = 30 * 1000; class ConsoleLogger { constructor() { this.logs = ""; + } + monkeyPatch(consoleObj) { // Monkey-patch console logging const consoleFunctionsToLevels = { log: "I", @@ -46,8 +48,8 @@ class ConsoleLogger { }; Object.keys(consoleFunctionsToLevels).forEach((fnName) => { const level = consoleFunctionsToLevels[fnName]; - let originalFn = window.console[fnName].bind(window.console); - window.console[fnName] = (...args) => { + let originalFn = consoleObj[fnName].bind(consoleObj); + consoleObj[fnName] = (...args) => { this.log(level, ...args); originalFn(...args); } @@ -310,6 +312,7 @@ module.exports = { return initPromise; } logger = new ConsoleLogger(); + logger.monkeyPatch(window.console); if (window.indexedDB) { store = new IndexedDBLogStore(window.indexedDB, logger); initPromise = store.connect(); From ba1e166ac83ae0f6477d617705a3f333f8d4f74e Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 20 Jan 2017 12:02:48 +0000 Subject: [PATCH 096/168] Line length 80 like we're still in the 80s --- src/vector/rageshake.js | 133 ++++++++++++++++++++++++++-------------- 1 file changed, 87 insertions(+), 46 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index e12ee329..a3d39635 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -17,18 +17,26 @@ limitations under the License. import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg'; import request from "browser-request"; -// This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows: -// - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily, -// without having to all depend on the same log framework / pass the logger around. -// - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work -// in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored -// in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in -// local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime -// generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines. -// - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is -// not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most -// recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this purge -// on startup to prevent logs from accumulating. +// This module contains all the code needed to log the console, persist it to +// disk and submit bug reports. Rationale is as follows: +// - Monkey-patching the console is preferable to having a log library because +// we can catch logs by other libraries more easily, without having to all +// depend on the same log framework / pass the logger around. +// - We use IndexedDB to persists logs because it has generous disk space +// limits compared to local storage. IndexedDB does not work in incognito +// mode, in which case this module will not be able to write logs to disk. +// However, the logs will still be stored in-memory, so can still be +// submitted in a bug report should the user wish to: we can also store more +// logs in-memory than in local storage, which does work in incognito mode. +// We also need to handle the case where there are 2+ tabs. Each JS runtime +// generates a random string which serves as the "ID" for that tab/session. +// These IDs are stored along with the log lines. +// - Bug reports are sent as a POST over HTTPS: it purposefully does not use +// Matrix as bug reports may be made when Matrix is not responsive (which may +// be the cause of the bug). We send the most recent N MB of UTF-8 log data, +// starting with the most recent, which we know because the "ID"s are +// actually timestamps. We then purge the remaining logs. We also do this +// purge on startup to prevent logs from accumulating. const FLUSH_RATE_MS = 30 * 1000; @@ -60,9 +68,10 @@ class ConsoleLogger { // We don't know what locale the user may be running so use ISO strings const ts = new Date().toISOString(); // Some browsers support string formatting which we're not doing here - // so the lines are a little more ugly but easy to implement / quick to run. + // so the lines are a little more ugly but easy to implement / quick to + // run. // Example line: - // 2017-01-18T11:23:53.214Z W Failed to set badge count: Error setting badge. Message: Too many badges requests in queue. + // 2017-01-18T11:23:53.214Z W Failed to set badge count const line = `${ts} ${level} ${args.join(' ')}\n`; // Using + really is the quickest way in JS // http://jsperf.com/concat-vs-plus-vs-join @@ -74,7 +83,8 @@ class ConsoleLogger { * @return {string} \n delimited log lines to flush. */ flush() { - // The ConsoleLogger doesn't care how these end up on disk, it just flushes them to the caller. + // The ConsoleLogger doesn't care how these end up on disk, it just + // flushes them to the caller. const logsToFlush = this.logs; this.logs = ""; return logsToFlush; @@ -105,7 +115,9 @@ class IndexedDBLogStore { }; req.onerror = (event) => { - const err = "Failed to open log database: " + event.target.errorCode; + const err = ( + "Failed to open log database: " + event.target.errorCode + ); console.error(err); reject(new Error(err)); }; @@ -117,8 +129,10 @@ class IndexedDBLogStore { keyPath: ["id", "index"] }); // Keys in the database look like: [ "instance-148938490", 0 ] - // Later on we need to query for everything with index=0, and query everything for an instance id. - // In order to do this, we need to set up indexes on both "id" and "index". + // Later on we need to query for everything with index=0, and + // query everything for an instance id. + // In order to do this, we need to set up indexes on both "id" + // and "index". objectStore.createIndex("index", "index", { unique: false }); objectStore.createIndex("id", "id", { unique: false }); @@ -151,23 +165,30 @@ class IndexedDBLogStore { resolve(); }; txn.onerror = (event) => { - console.error("Failed to flush logs : " + event.target.errorCode); - reject(new Error("Failed to write logs: " + event.target.errorCode)); + console.error( + "Failed to flush logs : " + event.target.errorCode + ); + reject( + new Error("Failed to write logs: " + event.target.errorCode) + ); } }); } /** - * Consume the most recent logs and return them. Older logs which are not returned are deleted at the same time, - * so this can be called at startup to do house-keeping to keep the logs from growing too large. + * Consume the most recent logs and return them. Older logs which are not + * returned are deleted at the same time, so this can be called at startup + * to do house-keeping to keep the logs from growing too large. * - * @param {boolean} clearAll True to clear the most recent logs returned in addition to the - * older logs. This is desirable when sending bug reports as we do not want to submit the - * same logs twice. This is not desirable when doing house-keeping at startup in case they - * want to submit a bug report later. - * @return {Promise} Resolves to an array of objects. The array is sorted in time (oldest first) based on - * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a - * big string with all the new-line delimited logs. + * @param {boolean} clearAll True to clear the most recent logs returned in + * addition to the older logs. This is desirable when sending bug reports as + * we do not want to submit the same logs twice. This is not desirable when + * doing house-keeping at startup in case they want to submit a bug report + * later. + * @return {Promise} Resolves to an array of objects. The array is + * sorted in time (oldest first) based on when the log file was created (the + * log ID). The objects have said log ID in an "id" field and "lines" which + * is a big string with all the new-line delimited logs. */ async consume(clearAll) { const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB @@ -176,13 +197,15 @@ class IndexedDBLogStore { // Returns: a string representing the concatenated logs for this ID. function fetchLogs(id) { const o = db.transaction("logs", "readonly").objectStore("logs"); - return selectQuery(o.index("id"), IDBKeyRange.only(id), (cursor) => { + return selectQuery(o.index("id"), IDBKeyRange.only(id), + (cursor) => { return { lines: cursor.value.lines, index: cursor.value.index, } }).then((linesArray) => { - // We have been storing logs periodically, so string them all together *in order of index* now + // We have been storing logs periodically, so string them all + // together *in order of index* now linesArray.sort((a, b) => { return a.index - b.index; }) @@ -192,13 +215,18 @@ class IndexedDBLogStore { // Returns: A sorted array of log IDs. (newest first) function fetchLogIds() { - // To gather all the log IDs, query for every log entry with index "0", this will let us - // know all the IDs from different tabs/sessions. + // To gather all the log IDs, query for every log entry with index + // "0", this will let us know all the IDs from different + // tabs/sessions. const o = db.transaction("logs", "readonly").objectStore("logs"); - return selectQuery(o.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => { - // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs, - // ignoring the logs for now, and sort them to work out the correct log ID ordering, newest first. - // E.g. [ "instance-1484827160051", "instance-1374827160051", "instance-1000007160051"] + return selectQuery(o.index("index"), IDBKeyRange.only(0), + (cursor) => cursor.value.id).then((res) => { + // we know each entry has a unique ID, and we know IDs are + // timestamps, so accumulate all the IDs, ignoring the logs for + // now, and sort them to work out the correct log ID ordering, + // newest first. + // E.g. [ "instance-1484827160051", "instance-1374827160051", + // "instance-1000007160051"] return res.sort().reverse(); }); } @@ -221,7 +249,12 @@ class IndexedDBLogStore { resolve(); }; txn.onerror = (event) => { - reject(new Error(`Failed to delete logs for '${id}' : ${event.target.errorCode}`)); + reject( + new Error( + "Failed to delete logs for " + + `'${id}' : ${event.target.errorCode}` + ) + ); } }); } @@ -238,7 +271,8 @@ class IndexedDBLogStore { }); size += lines.length; if (size > MAX_LOG_SIZE) { - // the remaining log IDs should be removed. If we go out of bounds this is just [] + // the remaining log IDs should be removed. If we go out of + // bounds this is just [] removeLogIds = allLogIds.slice(i + 1); break; } @@ -248,7 +282,8 @@ class IndexedDBLogStore { } if (removeLogIds.length > 0) { console.log("Removing logs: ", removeLogIds); - // Don't await this because it's non-fatal if we can't clean up logs. + // Don't await this because it's non-fatal if we can't clean up + // logs. Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => { console.log(`Removed ${removeLogIds.length} old logs.`); }, (err) => { @@ -271,9 +306,11 @@ class IndexedDBLogStore { * Helper method to collect results from a Cursor and promiseify it. * @param {ObjectStore|Index} store The store to perform openCursor on. * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor. - * @param {Function} resultMapper A function which is repeatedly called with a Cursor. + * @param {Function} resultMapper A function which is repeatedly called with a + * Cursor. * Return the data you want to keep. - * @return {Promise} Resolves to an array of whatever you returned from resultMapper. + * @return {Promise} Resolves to an array of whatever you returned from + * resultMapper. */ function selectQuery(store, keyRange, resultMapper) { const query = store.openCursor(keyRange); @@ -355,7 +392,9 @@ module.exports = { */ sendBugReport: async function(userText) { if (!logger) { - throw new Error("No console logger, did you forget to call init()?"); + throw new Error( + "No console logger, did you forget to call init()?" + ); } if (!bugReportEndpoint) { throw new Error("No bug report endpoint has been set."); @@ -372,8 +411,8 @@ module.exports = { userAgent = window.navigator.userAgent; } - // If in incognito mode, store is null, but we still want bug report sending to work going off - // the in-memory console logs. + // If in incognito mode, store is null, but we still want bug report + // sending to work going off the in-memory console logs. let logs = []; if (store) { logs = await store.consume(true); @@ -391,7 +430,9 @@ module.exports = { url: bugReportEndpoint, body: { logs: logs, - text: userText || "User did not supply any additional text.", + text: ( + userText || "User did not supply any additional text." + ), version: version, user_agent: userAgent, }, From 41c6294be2e3a6b23fad65771173819c74e35f6e Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 20 Jan 2017 13:02:57 +0000 Subject: [PATCH 097/168] Remove clearAll from consume(): we want duplicate logs on multiple reports --- src/vector/rageshake.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index a3d39635..a96b1f28 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -180,17 +180,12 @@ class IndexedDBLogStore { * returned are deleted at the same time, so this can be called at startup * to do house-keeping to keep the logs from growing too large. * - * @param {boolean} clearAll True to clear the most recent logs returned in - * addition to the older logs. This is desirable when sending bug reports as - * we do not want to submit the same logs twice. This is not desirable when - * doing house-keeping at startup in case they want to submit a bug report - * later. * @return {Promise} Resolves to an array of objects. The array is * sorted in time (oldest first) based on when the log file was created (the * log ID). The objects have said log ID in an "id" field and "lines" which * is a big string with all the new-line delimited logs. */ - async consume(clearAll) { + async consume() { const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB const db = this.db; @@ -277,9 +272,6 @@ class IndexedDBLogStore { break; } } - if (clearAll) { - removeLogIds = allLogIds; - } if (removeLogIds.length > 0) { console.log("Removing logs: ", removeLogIds); // Don't await this because it's non-fatal if we can't clean up @@ -378,7 +370,7 @@ module.exports = { if (!store) { return; } - await store.consume(false); + await store.consume(); }, setBugReportEndpoint: function(url) { @@ -415,7 +407,7 @@ module.exports = { // sending to work going off the in-memory console logs. let logs = []; if (store) { - logs = await store.consume(true); + logs = await store.consume(); } // and add the most recent console logs which won't be in the store yet. const consoleLogs = logger.flush(); // remove logs from console From 378126e746bd78088996a82024ea5c4204955b7c Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 20 Jan 2017 14:00:30 +0000 Subject: [PATCH 098/168] Add another store to keep last modified times This makes it easier to get a list of all the log IDs. It also makes it possible to order the logs by the *LAST* log line and not the first as was the case previously, which is important in the case of long-running tabs. --- src/vector/rageshake.js | 69 +++++++++++++++++++++++++---------------- 1 file changed, 43 insertions(+), 26 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index a96b1f28..f4fe4396 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -96,7 +96,7 @@ class IndexedDBLogStore { constructor(indexedDB, logger) { this.indexedDB = indexedDB; this.logger = logger; - this.id = "instance-" + Date.now(); + this.id = "instance-" + Math.random() + Date.now(); this.index = 0; this.db = null; } @@ -125,22 +125,24 @@ class IndexedDBLogStore { // First time: Setup the object store req.onupgradeneeded = (event) => { const db = event.target.result; - const objectStore = db.createObjectStore("logs", { + const logObjStore = db.createObjectStore("logs", { keyPath: ["id", "index"] }); // Keys in the database look like: [ "instance-148938490", 0 ] - // Later on we need to query for everything with index=0, and - // query everything for an instance id. - // In order to do this, we need to set up indexes on both "id" - // and "index". - objectStore.createIndex("index", "index", { unique: false }); - objectStore.createIndex("id", "id", { unique: false }); + // Later on we need to query everything based on an instance id. + // In order to do this, we need to set up indexes "id". + logObjStore.createIndex("id", "id", { unique: false }); - objectStore.add( + logObjStore.add( this._generateLogEntry( new Date() + " ::: Log database was created." ) ); + + const lastModifiedStore = db.createObjectStore("logslastmod", { + keyPath: "id", + }); + lastModifiedStore.add(this._generateLastModifiedTime()); } }); } @@ -158,15 +160,17 @@ class IndexedDBLogStore { return Promise.resolve(); } return new Promise((resolve, reject) => { - let txn = this.db.transaction("logs", "readwrite"); + let txn = this.db.transaction(["logs", "logslastmod"], "readwrite"); let objStore = txn.objectStore("logs"); objStore.add(this._generateLogEntry(lines)); + let lastModStore = txn.objectStore("logslastmod"); + lastModStore.put(this._generateLastModifiedTime()); txn.oncomplete = (event) => { resolve(); }; txn.onerror = (event) => { console.error( - "Failed to flush logs : " + event.target.errorCode + "Failed to flush logs : ", event ); reject( new Error("Failed to write logs: " + event.target.errorCode) @@ -210,25 +214,28 @@ class IndexedDBLogStore { // Returns: A sorted array of log IDs. (newest first) function fetchLogIds() { - // To gather all the log IDs, query for every log entry with index - // "0", this will let us know all the IDs from different - // tabs/sessions. - const o = db.transaction("logs", "readonly").objectStore("logs"); - return selectQuery(o.index("index"), IDBKeyRange.only(0), - (cursor) => cursor.value.id).then((res) => { - // we know each entry has a unique ID, and we know IDs are - // timestamps, so accumulate all the IDs, ignoring the logs for - // now, and sort them to work out the correct log ID ordering, - // newest first. - // E.g. [ "instance-1484827160051", "instance-1374827160051", - // "instance-1000007160051"] - return res.sort().reverse(); + // To gather all the log IDs, query for all records in logslastmod. + const o = db.transaction("logslastmod", "readonly").objectStore( + "logslastmod" + ); + return selectQuery(o, undefined, (cursor) => { + return { + id: cursor.value.id, + ts: cursor.value.ts, + }; + }).then((res) => { + // Sort IDs by timestamp (newest first) + return res.sort((a, b) => { + return b.ts - a.ts; + }).map((a) => a.id); }); } function deleteLogs(id) { return new Promise((resolve, reject) => { - const txn = db.transaction("logs", "readwrite"); + const txn = db.transaction( + ["logs", "logslastmod"], "readwrite" + ); const o = txn.objectStore("logs"); // only load the key path, not the data which may be huge const query = o.index("id").openKeyCursor(IDBKeyRange.only(id)); @@ -250,7 +257,10 @@ class IndexedDBLogStore { `'${id}' : ${event.target.errorCode}` ) ); - } + }; + // delete last modified entries + const lastModStore = txn.objectStore("logslastmod"); + lastModStore.delete(id); }); } @@ -292,6 +302,13 @@ class IndexedDBLogStore { index: this.index++ }; } + + _generateLastModifiedTime() { + return { + id: this.id, + ts: Date.now(), + }; + } } /** From ea063ab8b0b2ce6b2f1a5d36132757e0cb52f8ff Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 20 Jan 2017 14:46:19 +0000 Subject: [PATCH 099/168] Address race conditions when flushing logs --- src/vector/rageshake.js | 94 +++++++++++++++++++++++++++++------------ 1 file changed, 68 insertions(+), 26 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index f4fe4396..7d1a93ef 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -99,6 +99,11 @@ class IndexedDBLogStore { this.id = "instance-" + Math.random() + Date.now(); this.index = 0; this.db = null; + // Promise is not null when a flush is IN PROGRESS + this.flushPromise = null; + // Promise is not null when flush() is called when one is already in + // progress. + this.flushAgainPromise = null; } /** @@ -148,35 +153,80 @@ class IndexedDBLogStore { } /** + * Flush logs to disk. + * + * There are guards to protect against race conditions in order to ensure + * that all previous flushes have completed before the most recent flush. + * Consider without guards: + * - A calls flush() periodically. + * - B calls flush() and wants to send logs immediately afterwards. + * - If B doesn't wait for A's flush to complete, B will be missing the + * contents of A's flush. + * To protect against this, we set 'flushPromise' when a flush is ongoing. + * Subsequent calls to flush() during this period return a new promise + * 'flushAgainPromise' which is chained off the current 'flushPromise'. + * Subsequent calls to flush() when the first flush hasn't completed will + * return the same 'flushAgainPromise' as we can guarantee that we WILL + * do a brand new flush at some point in the future. Once the first flush + * has completed, 'flushAgainPromise' becomes 'flushPromise' and can be + * chained again. + * + * This guarantees that we will always eventually do a flush when flush() is + * called. + * * @return {Promise} Resolved when the logs have been flushed. */ flush() { - if (!this.db) { - // not connected yet or user rejected access for us to r/w to the db - return Promise.reject(new Error("No connected database")); + if (this.flushPromise) { // a flush is ongoing + if (this.flushAgainPromise) { // a flush is queued up, return that. + return this.flushAgainPromise; + } + // queue up a new flush + this.flushAgainPromise = this.flushPromise.then(() => { + // the current flush has completed, so shuffle the promises + // around: + // flushAgainPromise => flushPromise and null flushAgainPromise. + // flushPromise has already nulled itself. + this.flushAgainPromise = null; + return this.flush(); + }); + return this.flushAgainPromise; } - const lines = this.logger.flush(); - if (lines.length === 0) { - return Promise.resolve(); - } - return new Promise((resolve, reject) => { + + this.flushPromise = new Promise((resolve, reject) => { + if (!this.db) { + // not connected yet or user rejected access for us to r/w to + // the db. + this.flushPromise = null; + reject(new Error("No connected database")); + return; + } + const lines = this.logger.flush(); + if (lines.length === 0) { + this.flushPromise = null; + resolve(); + return; + } let txn = this.db.transaction(["logs", "logslastmod"], "readwrite"); let objStore = txn.objectStore("logs"); objStore.add(this._generateLogEntry(lines)); let lastModStore = txn.objectStore("logslastmod"); lastModStore.put(this._generateLastModifiedTime()); txn.oncomplete = (event) => { + this.flushPromise = null; resolve(); }; txn.onerror = (event) => { console.error( "Failed to flush logs : ", event ); + this.flushPromise = null; reject( new Error("Failed to write logs: " + event.target.errorCode) ); } }); + return this.flushPromise; } /** @@ -368,17 +418,6 @@ module.exports = { return initPromise; }, - /** - * Force-flush the logs to storage. - * @return {Promise} Resolved when the logs have been flushed. - */ - flush: async function() { - if (!store) { - return; - } - await store.flush(); - }, - /** * Clean up old logs. * @return Promise Resolves if cleaned logs. @@ -422,17 +461,20 @@ module.exports = { // If in incognito mode, store is null, but we still want bug report // sending to work going off the in-memory console logs. + console.log("Sending bug report."); let logs = []; if (store) { + // flush most recent logs + await store.flush(); logs = await store.consume(); } - // and add the most recent console logs which won't be in the store yet. - const consoleLogs = logger.flush(); // remove logs from console - const currentId = store ? store.id : "-"; - logs.unshift({ - lines: consoleLogs, - id: currentId, - }); + else { + logs.push({ + lines: logger.flush(), + id: "-", + }); + } + await new Promise((resolve, reject) => { request({ method: "POST", From 956deca844505c75f03a1406a5ffd4532804cbde Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 16:59:41 +0100 Subject: [PATCH 100/168] Add bg-color border to typing avatars --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 12cecffe..b7bdeaa0 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -71,18 +71,20 @@ limitations under the License. } .mx_RoomStatusBar_typingIndicatorAvatars { - width: 24px; + width: 52px; text-align: left; } .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { margin-right: -12px; + border:1px solid $primary-bg-color; } .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; background-color: #ddd; + border:1px solid $primary-bg-color; border-radius: 40px; width: 24px; height: 24px; From 9ffedf5e7d8b0962c1b39038ecc8e59b5fc1459c Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 17:00:59 +0100 Subject: [PATCH 101/168] space after colons --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index b7bdeaa0..44e9d983 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -77,14 +77,14 @@ limitations under the License. .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { margin-right: -12px; - border:1px solid $primary-bg-color; + border: 1px solid $primary-bg-color; } .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; background-color: #ddd; - border:1px solid $primary-bg-color; + border: 1px solid $primary-bg-color; border-radius: 40px; width: 24px; height: 24px; From afcf9de8d47f463b83e9b40dcfb37c6f5de47215 Mon Sep 17 00:00:00 2001 From: lukebarnard Date: Fri, 20 Jan 2017 17:35:01 +0100 Subject: [PATCH 102/168] Handle avatars with initials --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index 44e9d983..d3f1439d 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -75,11 +75,16 @@ limitations under the License. text-align: left; } -.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar { +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image { margin-right: -12px; border: 1px solid $primary-bg-color; } +.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial { + padding-left: 1px; + padding-top: 1px; +} + .mx_RoomStatusBar_typingIndicatorRemaining { display: inline-block; color: #acacac; From a9c575b4d095872687969707878f215e23a7a261 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:00:33 +0000 Subject: [PATCH 103/168] fix a bunch of dark-theme buttons --- src/skins/vector/css/themes/_dark.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 03913ca2..776da282 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -101,4 +101,15 @@ $lightbox-fg-color: #ffffff; $lightbox-border-color: #ffffff; // unused? -$progressbar-color: #000; \ No newline at end of file +$progressbar-color: #000; + +// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it +// better match the theme. Typically applied to dark grey 'off' buttons or +// light grey 'on' buttons. +.mx_filterFlipColor { + filter: invert(); +} + +.gm-scrollbar .thumb { + filter: invert(); +} \ No newline at end of file From 5b1fea46cb6a0c9ec45e01a41c7222069a390507 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:09:49 +0000 Subject: [PATCH 104/168] fix badge color --- .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 286a709d..84f8ddde 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -171,7 +171,7 @@ limitations under the License. .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge { - background-color: rgb(214, 214, 214); + background-color: $preview-widget-bar-color; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { From 83272f5cc58fa4a3efc5a8423642d1f4cb6886a1 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:11:28 +0000 Subject: [PATCH 105/168] fix badge color again --- .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss | 2 +- src/skins/vector/css/themes/_base.scss | 2 ++ src/skins/vector/css/themes/_dark.scss | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index 84f8ddde..5ca4ac17 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -171,7 +171,7 @@ limitations under the License. .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton, .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge { - background-color: $preview-widget-bar-color; + background-color: $neutral-badge-color; } .mx_RoomTile_unreadNotify .mx_RoomTile_badge { diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss index 476cf7e0..db921034 100644 --- a/src/skins/vector/css/themes/_base.scss +++ b/src/skins/vector/css/themes/_base.scss @@ -59,6 +59,8 @@ $lightbox-background-bg-color: #000; $greyed-fg-color: #888; +$neutral-badge-color: #dbdbdb; + $preview-widget-bar-color: #ddd; $preview-widget-fg-color: $greyed-fg-color; diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 776da282..4902724f 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -59,6 +59,8 @@ $lightbox-background-bg-color: #000; $greyed-fg-color: #888; +$neutral-badge-color: #888; + $preview-widget-bar-color: $menu-bg-color; $preview-widget-fg-color: $greyed-fg-color; From ef519231d63f1aa765e0f1cd9ea78bb4591253b0 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 20 Jan 2017 21:16:58 +0000 Subject: [PATCH 106/168] fix mute button colors --- .../views/context_menus/NotificationStateContextMenu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js index 243275db..d4b40d17 100644 --- a/src/components/views/context_menus/NotificationStateContextMenu.js +++ b/src/components/views/context_menus/NotificationStateContextMenu.js @@ -120,22 +120,22 @@ module.exports = React.createClass({
- + All messages (loud)
- + All messages
- + Mentions only
- + Mute
From d907421ad46b64144a8690996ad51ffc716c4e8a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 22 Jan 2017 01:25:32 +0100 Subject: [PATCH 107/168] crappy CSS for UnknownDeviceDialog --- src/skins/vector/css/_components.scss | 1 + .../views/dialogs/_UnknownDeviceDialog.scss | 46 +++++++++++++++++++ src/skins/vector/css/themes/_dark.scss | 2 +- 3 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 880c1054..51dd0ada 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -15,6 +15,7 @@ @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss"; +@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss"; @import "./matrix-react-sdk/views/elements/_AddressSelector.scss"; @import "./matrix-react-sdk/views/elements/_AddressTile.scss"; @import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss new file mode 100644 index 00000000..3a9b64d1 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss @@ -0,0 +1,46 @@ +/* +Copyright 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_UnknownDeviceDialog .mx_MemberDeviceInfo { + float: right; + clear: both; + padding: 0px; + padding-top: 8px; +} + +.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton { + border: 0px; + height: 24px; + border-radius: 40px; + border: solid 1px $accent-color; + font-weight: 600; + font-size: 13px; + font-family: 'Open Sans', Arial, Helvetica, Sans-Serif; + margin-left: 0px; + margin-right: 8px; + padding-left: 0.5em; + padding-right: 0.5em; + width: 70px; + outline: none; + cursor: pointer; + color: $accent-color; + background-color: $primary-bg-color; +} + +.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li { + height: 40px; + border-bottom: 1px solid $primary-hairline-color; +} \ No newline at end of file diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss index 4902724f..51930433 100644 --- a/src/skins/vector/css/themes/_dark.scss +++ b/src/skins/vector/css/themes/_dark.scss @@ -114,4 +114,4 @@ $progressbar-color: #000; .gm-scrollbar .thumb { filter: invert(); -} \ No newline at end of file +} From 2ecf65f05702075175b211161f05b5e2c57d9182 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Mon, 23 Jan 2017 09:28:48 +0000 Subject: [PATCH 108/168] Keep the logs if no store exists --- src/vector/rageshake.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 7d1a93ef..3cc15886 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -80,11 +80,15 @@ class ConsoleLogger { /** * Retrieve log lines to flush to disk. + * @param {boolean} keepLogs True to not delete logs after flushing. * @return {string} \n delimited log lines to flush. */ - flush() { + flush(keepLogs) { // The ConsoleLogger doesn't care how these end up on disk, it just // flushes them to the caller. + if (keepLogs) { + return this.logs; + } const logsToFlush = this.logs; this.logs = ""; return logsToFlush; @@ -470,7 +474,7 @@ module.exports = { } else { logs.push({ - lines: logger.flush(), + lines: logger.flush(true), id: "-", }); } From 57126efe86db96396d921651e4d66aea4e3f4c76 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 10:24:23 +0000 Subject: [PATCH 109/168] Reposition typing avatars relative to "is typing" --- .../css/matrix-react-sdk/structures/_RoomStatusBar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss index d3f1439d..d124f9c6 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss @@ -21,10 +21,10 @@ limitations under the License. /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ .mx_RoomStatusBar_indicator { - padding-left: 18px; + padding-left: 17px; padding-right: 12px; margin-left: -73px; - margin-top: 13px; + margin-top: 8px; float: left; width: 24px; text-align: center; From b582cf0a5f24155f4de25320030f34b1b581dbe8 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 13:30:39 +0000 Subject: [PATCH 110/168] Remove CSS for StatusBar mid-timeline --- .../css/matrix-react-sdk/structures/RoomView.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css index 6dc22e2f..43434d3f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css @@ -216,16 +216,6 @@ hr.mx_RoomView_myReadMarker { .mx_RoomView_statusArea_expanded { max-height: 50px; - margin-top: 0px; -} - -.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline { - margin-top: -50px; - - -webkit-transition: all .2s ease-in; - -moz-transition: all .2s ease-in; - -ms-transition: all .2s ease-in; - -o-transition: all .2s ease-in; } .mx_RoomView_statusAreaBox { From b7204bf868cdf93040afb581465b5b04712081a7 Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Mon, 23 Jan 2017 13:33:39 +0000 Subject: [PATCH 111/168] Use primary bg color on statusArea --- src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 9e30b9f2..8623e032 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -160,7 +160,7 @@ hr.mx_RoomView_myReadMarker { flex: 0 0 auto; max-height: 0px; - background-color: #fff; + background-color: $primary-bg-color; z-index: 1000; overflow: hidden; From bc714ba3a051ec64d3726e6933c7e766ecbd92b4 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 23 Jan 2017 14:22:54 +0000 Subject: [PATCH 112/168] Add eslint config An early start that gets some linting in place. --- .eslintignore | 1 + .eslintrc.js | 3 +++ package.json | 7 ++++++- test/.eslintrc.js | 5 +++++ 4 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 test/.eslintrc.js diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..ea40ba29 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +src/vector/modernizr.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..c181384f --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ["./node_modules/matrix-react-sdk/.eslintrc.js"], +} diff --git a/package.json b/package.json index b7b69d0c..f14fe8e7 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,8 @@ "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", + "lint": "eslint src/", + "lintall": "eslint src/ test/", "clean": "rimraf lib webapp electron/dist", "prepublish": "npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", @@ -95,6 +97,9 @@ "electron-builder": "^11.2.4", "electron-builder-squirrel-windows": "^11.2.1", "emojione": "^2.2.3", + "eslint": "^3.14.0", + "eslint-plugin-flowtype": "^2.30.0", + "eslint-plugin-react": "^6.9.0", "expect": "^1.16.0", "fs-extra": "^0.30.0", "html-webpack-plugin": "^2.24.0", @@ -148,7 +153,7 @@ "target": "deb", "maintainer": "support@riot.im", "desktop": { - "StartupWMClass": "riot-web" + "StartupWMClass": "riot-web" } }, "win": { diff --git a/test/.eslintrc.js b/test/.eslintrc.js new file mode 100644 index 00000000..4cc4659d --- /dev/null +++ b/test/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + env: { + mocha: true, + }, +} From 4c3ea1341370a0722c34be6551ca791480c74db6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 23 Jan 2017 15:42:50 +0000 Subject: [PATCH 113/168] Make jenkins run the linter --- scripts/jenkins.sh | 3 +++ 1 file changed, 3 insertions(+) diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh index bd27d6e3..5ccc1991 100755 --- a/scripts/jenkins.sh +++ b/scripts/jenkins.sh @@ -26,6 +26,9 @@ cp -r olm/package node_modules/olm # run the mocha tests npm run test +# run eslint +npm run lintall -- -f checkstyle -o eslint.xml || true + rm dist/vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist # node_modules deps from 'npm install' don't have a .git dir so can't From f3df86872b4e4bc7b4e7a489993cf3e73c6a3637 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Mon, 23 Jan 2017 17:37:57 +0000 Subject: [PATCH 114/168] Fix tightlooping when flush()ing without any logs The promise would resolve immediately, nulling out `flushPromise`. This would then immediately be set from `new Promise((resolve, reject) => {...})` turning it back into non-null `flushPromise`. The resolve handler was called so the next `flush()` would see "oh yes, there is a non-null `flushPromise`" then promptly try to set `flushAgainPromise` which chains off the resolved `flushPromise` which relied on `flushPromise` being `null`ed out after `resolve()`, causing the chained `flush()` to see "oh yes, there is a non-null `flushPromise`" which... ad infinitum. This PR fixes it by making the nulling out asynchronous but the fact it took me this long to debug this issue indicates to me that this is a terrible piece of code. Will re-write. --- src/vector/rageshake.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 3cc15886..a17c829a 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -201,13 +201,11 @@ class IndexedDBLogStore { if (!this.db) { // not connected yet or user rejected access for us to r/w to // the db. - this.flushPromise = null; reject(new Error("No connected database")); return; } const lines = this.logger.flush(); if (lines.length === 0) { - this.flushPromise = null; resolve(); return; } @@ -217,18 +215,20 @@ class IndexedDBLogStore { let lastModStore = txn.objectStore("logslastmod"); lastModStore.put(this._generateLastModifiedTime()); txn.oncomplete = (event) => { - this.flushPromise = null; resolve(); }; txn.onerror = (event) => { console.error( "Failed to flush logs : ", event ); - this.flushPromise = null; reject( new Error("Failed to write logs: " + event.target.errorCode) ); } + }).then(() => { + this.flushPromise = null; + }, (err) => { + this.flushPromise = null; }); return this.flushPromise; } From 706ffbec3c2eb41d67587ace8e01dd3c7df0e03b Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 23 Jan 2017 19:01:22 +0100 Subject: [PATCH 115/168] add riot logos --- src/skins/vector/img/logos/riot-logo-1.svg | 1 + src/skins/vector/img/logos/riot-logo-2.svg | 1 + src/skins/vector/img/logos/riot-logo-3.svg | 1 + src/skins/vector/img/logos/riot-logo-4.svg | 1 + src/skins/vector/img/logos/riot-logo-5.svg | 1 + src/skins/vector/img/logos/riot-logo-bw.svg | 1 + src/skins/vector/img/logos/riot-logo.svg | 32 +++++++++++++++++++++ 7 files changed, 38 insertions(+) create mode 100644 src/skins/vector/img/logos/riot-logo-1.svg create mode 100644 src/skins/vector/img/logos/riot-logo-2.svg create mode 100644 src/skins/vector/img/logos/riot-logo-3.svg create mode 100644 src/skins/vector/img/logos/riot-logo-4.svg create mode 100644 src/skins/vector/img/logos/riot-logo-5.svg create mode 100644 src/skins/vector/img/logos/riot-logo-bw.svg create mode 100644 src/skins/vector/img/logos/riot-logo.svg diff --git a/src/skins/vector/img/logos/riot-logo-1.svg b/src/skins/vector/img/logos/riot-logo-1.svg new file mode 100644 index 00000000..6b79dd9e --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-1.svg @@ -0,0 +1 @@ +Asset 4 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo-2.svg b/src/skins/vector/img/logos/riot-logo-2.svg new file mode 100644 index 00000000..96e0bbb1 --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-2.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo-3.svg b/src/skins/vector/img/logos/riot-logo-3.svg new file mode 100644 index 00000000..985b9c9f --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-3.svg @@ -0,0 +1 @@ +Asset 5 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo-4.svg b/src/skins/vector/img/logos/riot-logo-4.svg new file mode 100644 index 00000000..24a7ddab --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-4.svg @@ -0,0 +1 @@ +Asset 3 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo-5.svg b/src/skins/vector/img/logos/riot-logo-5.svg new file mode 100644 index 00000000..6a2c61df --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-5.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo-bw.svg b/src/skins/vector/img/logos/riot-logo-bw.svg new file mode 100644 index 00000000..cb6d77d6 --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo-bw.svg @@ -0,0 +1 @@ +Asset 6 \ No newline at end of file diff --git a/src/skins/vector/img/logos/riot-logo.svg b/src/skins/vector/img/logos/riot-logo.svg new file mode 100644 index 00000000..cbfaa625 --- /dev/null +++ b/src/skins/vector/img/logos/riot-logo.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + From 597705716b30e0efa9cca8e5ac744bda36bf503e Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 11:26:09 +0000 Subject: [PATCH 116/168] Hopefully, fix intermittent test failure This seeks to fix the intermittent failure of the "MatrixClient rehydrated from stored credentials" tests. The problem appears to be that the 'load_completed' is sometimes taking a while to come through from the dispatcher - or rather, it is taking a long time to get *sent* to the dispatcher: the chain of `q().then().catch().done()` in componentDidMount can take a while to happen. As a workaround, give the test a few goes when waiting for us to start syncing. It's not ideal to be poking into the internal state of MatrixChat like this, but it'll do for now. --- test/app-tests/loading.js | 69 +++++++++++++++++++++++---------------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index 03a4d11e..2fe82e51 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -94,13 +94,13 @@ describe('loading:', function () { loadCompletePromise = loadCompleteDefer.promise; function onNewScreen(screen) { - console.log("newscreen "+screen); + console.log(Date.now() + " newscreen "+screen); if (!appLoaded) { lastLoadedScreen = screen; } else { var hash = '#/' + screen; windowLocation.hash = hash; - console.log("browser URI now "+ windowLocation); + console.log(Date.now() + " browser URI now "+ windowLocation); } } @@ -122,22 +122,22 @@ describe('loading:', function () { ); function routeUrl(location, matrixChat) { - console.log("Routing URL "+location); + console.log(Date.now() + " Routing URL "+location); var fragparts = parseQsFromFragment(location); matrixChat.showScreen(fragparts.location.substring(1), fragparts.params); } // pause for a cycle, then simulate the window.onload handler - q.delay(0).then(() => { - console.log("simulating window.onload"); + window.setTimeout(() => { + console.log(Date.now() + " simulating window.onload"); routeUrl(windowLocation, matrixChat); appLoaded = true; if (lastLoadedScreen) { onNewScreen(lastLoadedScreen); lastLoadedScreen = null; } - }).done(); + }, 0); } describe("Clean load with no stored credentials:", function() { @@ -243,10 +243,8 @@ describe('loading:', function () { loadApp(); - q.delay(1).then(() => { - // we expect a spinner - assertAtSyncingSpinner(matrixChat); - + return awaitSyncingSpinner(matrixChat).then(() => { + // we got a sync spinner - let the sync complete return httpBackend.flush(); }).then(() => { // once the sync completes, we should have a directory @@ -266,10 +264,8 @@ describe('loading:', function () { uriFragment: "#/room/!room:id", }); - q.delay(1).then(() => { - // we expect a spinner - assertAtSyncingSpinner(matrixChat); - + return awaitSyncingSpinner(matrixChat).then(() => { + // we got a sync spinner - let the sync complete return httpBackend.flush(); }).then(() => { // once the sync completes, we should have a room view @@ -300,12 +296,9 @@ describe('loading:', function () { return httpBackend.flush(); }).then(() => { - // Wait for another trip around the event loop for the UI to update - return q.delay(1); + return awaitSyncingSpinner(matrixChat); }).then(() => { - // now we should have a spinner with a logout link - assertAtSyncingSpinner(matrixChat); - + // we got a sync spinner - let the sync complete httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); }).then(() => { @@ -338,12 +331,8 @@ describe('loading:', function () { return httpBackend.flush(); }).then(() => { - // Wait for another trip around the event loop for the UI to update - return q.delay(1); + return awaitSyncingSpinner(matrixChat); }).then(() => { - // now we should have a spinner with a logout link - assertAtSyncingSpinner(matrixChat); - httpBackend.when('GET', '/sync').check(function(req) { expect(req.path).toMatch(new RegExp("^https://homeserver/")); }).respond(200, {}); @@ -377,12 +366,8 @@ describe('loading:', function () { return httpBackend.flush(); }).then(() => { - // Wait for another trip around the event loop for the UI to update - return q.delay(1); + return awaitSyncingSpinner(matrixChat); }).then(() => { - // now we should have a spinner with a logout link - assertAtSyncingSpinner(matrixChat); - httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); }).then(() => { @@ -448,6 +433,32 @@ function assertAtLoadingSpinner(matrixChat) { // we've got login creds, and are waiting for the sync to finish. // the page includes a logout link. +function awaitSyncingSpinner(matrixChat, retryLimit, retryCount) { + if (retryLimit === undefined) { + retryLimit = 5; + } + if (retryCount === undefined) { + retryCount = 0; + } + + if (matrixChat.state.loading) { + console.log(Date.now() + " Awaiting sync spinner: still loading."); + if (retryCount >= retryLimit) { + throw new Error("MatrixChat still not loaded after " + + retryCount + " tries"); + } + return q.delay(0).then(() => { + return awaitSyncingSpinner(matrixChat, retryLimit, retryCount + 1); + }); + } + + console.log(Date.now() + " Awaiting sync spinner: load complete."); + + // state looks good, check the rendered output + assertAtSyncingSpinner(matrixChat); + return q(); +} + function assertAtSyncingSpinner(matrixChat) { var domComponent = ReactDOM.findDOMNode(matrixChat); expect(domComponent.className).toEqual("mx_MatrixChat_splash"); From 6f3b70dbb02bb6edb614209592546fb3ba28854b Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 24 Jan 2017 12:43:18 +0000 Subject: [PATCH 117/168] Use Q promises and isPending to make logic simpler --- src/vector/rageshake.js | 52 ++++++++++++++++------------------------- 1 file changed, 20 insertions(+), 32 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index a17c829a..28f901a3 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -16,6 +16,7 @@ limitations under the License. import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg'; import request from "browser-request"; +import q from "q"; // This module contains all the code needed to log the console, persist it to // disk and submit bug reports. Rationale is as follows: @@ -105,9 +106,6 @@ class IndexedDBLogStore { this.db = null; // Promise is not null when a flush is IN PROGRESS this.flushPromise = null; - // Promise is not null when flush() is called when one is already in - // progress. - this.flushAgainPromise = null; } /** @@ -115,7 +113,7 @@ class IndexedDBLogStore { */ connect() { let req = this.indexedDB.open("logs"); - return new Promise((resolve, reject) => { + return q.Promise((resolve, reject) => { req.onsuccess = (event) => { this.db = event.target.result; // Periodically flush logs to local storage / indexeddb @@ -167,13 +165,10 @@ class IndexedDBLogStore { * - If B doesn't wait for A's flush to complete, B will be missing the * contents of A's flush. * To protect against this, we set 'flushPromise' when a flush is ongoing. - * Subsequent calls to flush() during this period return a new promise - * 'flushAgainPromise' which is chained off the current 'flushPromise'. - * Subsequent calls to flush() when the first flush hasn't completed will - * return the same 'flushAgainPromise' as we can guarantee that we WILL - * do a brand new flush at some point in the future. Once the first flush - * has completed, 'flushAgainPromise' becomes 'flushPromise' and can be - * chained again. + * Subsequent calls to flush() during this period will chain another flush. + * This guarantees that we WILL do a brand new flush at some point in the + * future. Once the flushes have finished, it's safe to clobber the promise + * with a new one to prevent very deep promise chains from building up. * * This guarantees that we will always eventually do a flush when flush() is * called. @@ -181,23 +176,20 @@ class IndexedDBLogStore { * @return {Promise} Resolved when the logs have been flushed. */ flush() { - if (this.flushPromise) { // a flush is ongoing - if (this.flushAgainPromise) { // a flush is queued up, return that. - return this.flushAgainPromise; - } - // queue up a new flush - this.flushAgainPromise = this.flushPromise.then(() => { - // the current flush has completed, so shuffle the promises - // around: - // flushAgainPromise => flushPromise and null flushAgainPromise. - // flushPromise has already nulled itself. - this.flushAgainPromise = null; + // check if a flush() operation is ongoing + if (this.flushPromise && this.flushPromise.isPending()) { + // chain a flush operation after this one has completed to guarantee + // that a complete flush() is done. This does mean that if there are + // 3 calls to flush() in one go, the 2nd and 3rd promises will run + // concurrently, but this is fine since they can safely race when + // collecting logs. + return this.flushPromise.then(() => { return this.flush(); }); - return this.flushAgainPromise; } - - this.flushPromise = new Promise((resolve, reject) => { + // there is no flush promise or there was but it has finished, so do + // a brand new one, destroying the chain which may have been built up. + this.flushPromise = q.Promise((resolve, reject) => { if (!this.db) { // not connected yet or user rejected access for us to r/w to // the db. @@ -225,10 +217,6 @@ class IndexedDBLogStore { new Error("Failed to write logs: " + event.target.errorCode) ); } - }).then(() => { - this.flushPromise = null; - }, (err) => { - this.flushPromise = null; }); return this.flushPromise; } @@ -286,7 +274,7 @@ class IndexedDBLogStore { } function deleteLogs(id) { - return new Promise((resolve, reject) => { + return q.Promise((resolve, reject) => { const txn = db.transaction( ["logs", "logslastmod"], "readwrite" ); @@ -377,7 +365,7 @@ class IndexedDBLogStore { */ function selectQuery(store, keyRange, resultMapper) { const query = store.openCursor(keyRange); - return new Promise((resolve, reject) => { + return q.Promise((resolve, reject) => { let results = []; query.onerror = (event) => { reject(new Error("Query failed: " + event.target.errorCode)); @@ -479,7 +467,7 @@ module.exports = { }); } - await new Promise((resolve, reject) => { + await q.Promise((resolve, reject) => { request({ method: "POST", url: bugReportEndpoint, From 31878d8a448ddab39c17306a648bded4176b22c3 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 24 Jan 2017 13:07:34 +0000 Subject: [PATCH 118/168] Also need eslint-config-google --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f14fe8e7..2aff1859 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "electron-builder-squirrel-windows": "^11.2.1", "emojione": "^2.2.3", "eslint": "^3.14.0", + "eslint-config-google": "^0.7.1", "eslint-plugin-flowtype": "^2.30.0", "eslint-plugin-react": "^6.9.0", "expect": "^1.16.0", From fe64b043390cbbe135f795d2337ae44093c84474 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Tue, 24 Jan 2017 13:35:41 +0000 Subject: [PATCH 119/168] More test resilience Give the tests more than one chance for the roomview to load. --- test/app-tests/loading.js | 45 ++++++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js index 2fe82e51..4504d00b 100644 --- a/test/app-tests/loading.js +++ b/test/app-tests/loading.js @@ -209,14 +209,11 @@ describe('loading:', function () { httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' }); httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); - }).then(() => { - // Wait for another trip around the event loop for the UI to update - return q.delay(1); }).then(() => { // once the sync completes, we should have a room view + return awaitRoomView(matrixChat); + }).then(() => { httpBackend.verifyNoOutstandingExpectation(); - ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.RoomView')); expect(windowLocation.hash).toEqual("#/room/!room:id"); // and the localstorage should have been updated @@ -269,9 +266,9 @@ describe('loading:', function () { return httpBackend.flush(); }).then(() => { // once the sync completes, we should have a room view + return awaitRoomView(matrixChat); + }).then(() => { httpBackend.verifyNoOutstandingExpectation(); - ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.RoomView')); expect(windowLocation.hash).toEqual("#/room/!room:id"); }).done(done, done); @@ -370,14 +367,11 @@ describe('loading:', function () { }).then(() => { httpBackend.when('GET', '/sync').respond(200, {}); return httpBackend.flush(); - }).then(() => { - // Wait for another trip around the event loop for the UI to update - return q.delay(1); }).then(() => { // once the sync completes, we should have a room view + return awaitRoomView(matrixChat); + }).then(() => { httpBackend.verifyNoOutstandingExpectation(); - ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.RoomView')); expect(windowLocation.hash).toEqual("#/room/!room:id"); }).done(done, done); }); @@ -469,3 +463,30 @@ function assertAtSyncingSpinner(matrixChat) { matrixChat, 'a'); expect(logoutLink.text).toEqual("Logout"); } + +function awaitRoomView(matrixChat, retryLimit, retryCount) { + if (retryLimit === undefined) { + retryLimit = 5; + } + if (retryCount === undefined) { + retryCount = 0; + } + + if (!matrixChat.state.ready) { + console.log(Date.now() + " Awaiting room view: not ready yet."); + if (retryCount >= retryLimit) { + throw new Error("MatrixChat still not ready after " + + retryCount + " tries"); + } + return q.delay(0).then(() => { + return awaitRoomView(matrixChat, retryLimit, retryCount + 1); + }); + } + + console.log(Date.now() + " Awaiting room view: now ready."); + + // state looks good, check the rendered output + ReactTestUtils.findRenderedComponentWithType( + matrixChat, sdk.getComponent('structures.RoomView')); + return q(); +} From 307c4f3dd152c47ecc9aca9164db403ba0df623e Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Tue, 24 Jan 2017 14:02:44 +0000 Subject: [PATCH 120/168] Increase the max-height of the expanded status bar This will ensure that errors, unsent messages, etc. will be allowed enough height to display their contents from within the status bar without being chopped. Fixes #3041 --- src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss index 8623e032..55771f79 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss +++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss @@ -171,7 +171,7 @@ hr.mx_RoomView_myReadMarker { } .mx_RoomView_statusArea_expanded { - max-height: 50px; + max-height: 100px; } .mx_RoomView_statusAreaBox { From efbea0e942a40ab38389740fb42dd8cba1e441de Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 24 Jan 2017 14:45:16 +0000 Subject: [PATCH 121/168] Add css for bug report dialog --- src/skins/vector/css/_components.scss | 1 + .../views/dialogs/_BugReportDialog.scss | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index 51dd0ada..323c22e0 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -12,6 +12,7 @@ @import "./matrix-react-sdk/structures/_UserSettings.scss"; @import "./matrix-react-sdk/structures/login/_Login.scss"; @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss"; +@import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss"; @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss new file mode 100644 index 00000000..0f47e974 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss @@ -0,0 +1,20 @@ +/* +Copyright 2017 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_BugReportDialog_input { + width: 100%; + box-sizing: border-box; +} From e225d3e3708bccf6cd458453206d076841011630 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 24 Jan 2017 17:05:01 +0000 Subject: [PATCH 122/168] Preserve ordering of flush()es by not letting subsequent flush()es race --- src/vector/rageshake.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js index 28f901a3..086ab155 100644 --- a/src/vector/rageshake.js +++ b/src/vector/rageshake.js @@ -104,8 +104,9 @@ class IndexedDBLogStore { this.id = "instance-" + Math.random() + Date.now(); this.index = 0; this.db = null; - // Promise is not null when a flush is IN PROGRESS this.flushPromise = null; + // set if flush() is called whilst one is ongoing + this.flushAgainPromise = null; } /** @@ -165,10 +166,8 @@ class IndexedDBLogStore { * - If B doesn't wait for A's flush to complete, B will be missing the * contents of A's flush. * To protect against this, we set 'flushPromise' when a flush is ongoing. - * Subsequent calls to flush() during this period will chain another flush. - * This guarantees that we WILL do a brand new flush at some point in the - * future. Once the flushes have finished, it's safe to clobber the promise - * with a new one to prevent very deep promise chains from building up. + * Subsequent calls to flush() during this period will chain another flush, + * then keep returning that same chained flush. * * This guarantees that we will always eventually do a flush when flush() is * called. @@ -178,14 +177,17 @@ class IndexedDBLogStore { flush() { // check if a flush() operation is ongoing if (this.flushPromise && this.flushPromise.isPending()) { - // chain a flush operation after this one has completed to guarantee - // that a complete flush() is done. This does mean that if there are - // 3 calls to flush() in one go, the 2nd and 3rd promises will run - // concurrently, but this is fine since they can safely race when - // collecting logs. - return this.flushPromise.then(() => { + if (this.flushAgainPromise && this.flushAgainPromise.isPending()) { + // this is the 3rd+ time we've called flush() : return the same + // promise. + return this.flushAgainPromise; + } + // queue up a flush to occur immediately after the pending one + // completes. + this.flushAgainPromise = this.flushPromise.then(() => { return this.flush(); }); + return this.flushAgainPromise; } // there is no flush promise or there was but it has finished, so do // a brand new one, destroying the chain which may have been built up. From 2ca871a0286358cb6f7708b4e849cbd4ea19832e Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 24 Jan 2017 18:18:56 +0000 Subject: [PATCH 123/168] Don't use hash-named directory for dev server Otherwise Chrome thinks you're working on a new file every time you refresh and therefore closes source tabs and removes breakpoints which is very annoying. It also allegedly makes webpack-dev-server run out of memory because it has to remember all the different files. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2aff1859..5528c7c7 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev", "dist": "scripts/package.sh", "start:res": "node scripts/copy-res.js -w", - "start:js": "webpack-dev-server -w --progress", + "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", From eaff0abfb07fddc1f657a1c942c72968e7b47619 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Wed, 25 Jan 2017 10:28:04 +0000 Subject: [PATCH 124/168] Add link to Chrome issue status for fixing line numbers --- src/vector/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vector/index.js b/src/vector/index.js index d1d85e06..c40edd7e 100644 --- a/src/vector/index.js +++ b/src/vector/index.js @@ -38,7 +38,7 @@ require('draft-js/dist/Draft.css'); const rageshake = require("./rageshake"); rageshake.init().then(() => { - console.log("Initialised rageshake"); + console.log("Initialised rageshake: See https://bugs.chromium.org/p/chromium/issues/detail?id=583193 to fix line numbers on Chrome."); rageshake.cleanup(); }, (err) => { console.error("Failed to initialise rageshake: " + err); From 1c926941d34ea328d4505122fe7e72b1a87f2e4c Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 25 Jan 2017 11:28:59 +0000 Subject: [PATCH 125/168] Add --output-chunk-file too --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5528c7c7..915056e6 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev", "dist": "scripts/package.sh", "start:res": "node scripts/copy-res.js -w", - "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js -w --progress", + "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"", "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"", From 0021fb37f3c26692a7906a6503cc26a0409a1a0b Mon Sep 17 00:00:00 2001 From: Luke Barnard Date: Wed, 25 Jan 2017 14:27:25 +0000 Subject: [PATCH 126/168] Set BaseAvatar_image bg colour = #fff --- .../vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss index d481e5c1..f23b929b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss @@ -31,4 +31,5 @@ limitations under the License. .mx_BaseAvatar_image { border-radius: 40px; vertical-align: top; + background-color: #fff; } From 0a9f02abcc527d64f2f7bbdd1d296008d4e94ca6 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Wed, 25 Jan 2017 16:51:26 +0000 Subject: [PATCH 127/168] Glue the dialog to rageshake: honour sendLogs flag. --- src/component-index.js | 60 +++++---- .../views/dialogs/BugReportDialog.js | 126 ++++++++++++++++++ src/vector/rageshake.js | 25 ++-- 3 files changed, 171 insertions(+), 40 deletions(-) create mode 100644 src/components/views/dialogs/BugReportDialog.js diff --git a/src/component-index.js b/src/component-index.js index 3141087c..456f8176 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -27,60 +27,62 @@ limitations under the License. module.exports.components = require('matrix-react-sdk/lib/component-index').components; import structures$BottomLeftMenu from './components/structures/BottomLeftMenu'; -module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu; +structures$BottomLeftMenu && (module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu); import structures$CompatibilityPage from './components/structures/CompatibilityPage'; -module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage; +structures$CompatibilityPage && (module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage); import structures$LeftPanel from './components/structures/LeftPanel'; -module.exports.components['structures.LeftPanel'] = structures$LeftPanel; +structures$LeftPanel && (module.exports.components['structures.LeftPanel'] = structures$LeftPanel); import structures$RightPanel from './components/structures/RightPanel'; -module.exports.components['structures.RightPanel'] = structures$RightPanel; +structures$RightPanel && (module.exports.components['structures.RightPanel'] = structures$RightPanel); import structures$RoomDirectory from './components/structures/RoomDirectory'; -module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory; +structures$RoomDirectory && (module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory); import structures$RoomSubList from './components/structures/RoomSubList'; -module.exports.components['structures.RoomSubList'] = structures$RoomSubList; +structures$RoomSubList && (module.exports.components['structures.RoomSubList'] = structures$RoomSubList); import structures$SearchBox from './components/structures/SearchBox'; -module.exports.components['structures.SearchBox'] = structures$SearchBox; +structures$SearchBox && (module.exports.components['structures.SearchBox'] = structures$SearchBox); import structures$ViewSource from './components/structures/ViewSource'; -module.exports.components['structures.ViewSource'] = structures$ViewSource; +structures$ViewSource && (module.exports.components['structures.ViewSource'] = structures$ViewSource); import views$context_menus$MessageContextMenu from './components/views/context_menus/MessageContextMenu'; -module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu; +views$context_menus$MessageContextMenu && (module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu); import views$context_menus$NotificationStateContextMenu from './components/views/context_menus/NotificationStateContextMenu'; -module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu; +views$context_menus$NotificationStateContextMenu && (module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu); import views$context_menus$RoomTagContextMenu from './components/views/context_menus/RoomTagContextMenu'; -module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu; +views$context_menus$RoomTagContextMenu && (module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu); +import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog'; +views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog); import views$dialogs$ChangelogDialog from './components/views/dialogs/ChangelogDialog'; -module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog; +views$dialogs$ChangelogDialog && (module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog); import views$directory$NetworkDropdown from './components/views/directory/NetworkDropdown'; -module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown; +views$directory$NetworkDropdown && (module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown); import views$elements$ImageView from './components/views/elements/ImageView'; -module.exports.components['views.elements.ImageView'] = views$elements$ImageView; +views$elements$ImageView && (module.exports.components['views.elements.ImageView'] = views$elements$ImageView); import views$elements$Spinner from './components/views/elements/Spinner'; -module.exports.components['views.elements.Spinner'] = views$elements$Spinner; +views$elements$Spinner && (module.exports.components['views.elements.Spinner'] = views$elements$Spinner); import views$globals$GuestWarningBar from './components/views/globals/GuestWarningBar'; -module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar; +views$globals$GuestWarningBar && (module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar); import views$globals$MatrixToolbar from './components/views/globals/MatrixToolbar'; -module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar; +views$globals$MatrixToolbar && (module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar); import views$globals$NewVersionBar from './components/views/globals/NewVersionBar'; -module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar; +views$globals$NewVersionBar && (module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar); import views$login$VectorCustomServerDialog from './components/views/login/VectorCustomServerDialog'; -module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog; +views$login$VectorCustomServerDialog && (module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog); import views$login$VectorLoginFooter from './components/views/login/VectorLoginFooter'; -module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter; +views$login$VectorLoginFooter && (module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter); import views$login$VectorLoginHeader from './components/views/login/VectorLoginHeader'; -module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader; +views$login$VectorLoginHeader && (module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader); import views$messages$DateSeparator from './components/views/messages/DateSeparator'; -module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator; +views$messages$DateSeparator && (module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator); import views$messages$MessageTimestamp from './components/views/messages/MessageTimestamp'; -module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp; +views$messages$MessageTimestamp && (module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp); import views$rooms$DNDRoomTile from './components/views/rooms/DNDRoomTile'; -module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile; +views$rooms$DNDRoomTile && (module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile); import views$rooms$RoomDropTarget from './components/views/rooms/RoomDropTarget'; -module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget; +views$rooms$RoomDropTarget && (module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget); import views$rooms$RoomTooltip from './components/views/rooms/RoomTooltip'; -module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip; +views$rooms$RoomTooltip && (module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip); import views$rooms$SearchBar from './components/views/rooms/SearchBar'; -module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar; +views$rooms$SearchBar && (module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar); import views$settings$IntegrationsManager from './components/views/settings/IntegrationsManager'; -module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager; +views$settings$IntegrationsManager && (module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager); import views$settings$Notifications from './components/views/settings/Notifications'; -module.exports.components['views.settings.Notifications'] = views$settings$Notifications; +views$settings$Notifications && (module.exports.components['views.settings.Notifications'] = views$settings$Notifications); diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js new file mode 100644 index 00000000..e3c8945a --- /dev/null +++ b/src/components/views/dialogs/BugReportDialog.js @@ -0,0 +1,126 @@ +/* +Copyright 2017 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import sdk from 'matrix-react-sdk'; +import rageshake from '../../../vector/rageshake'; + +export default class BugReportDialog extends React.Component { + constructor(props, context) { + super(props, context); + this.state = { + sendLogs: true, + busy: false, + err: null, + text: "", + }; + this._onSubmit = this._onSubmit.bind(this); + this._onCancel = this._onCancel.bind(this); + this._onTextChange = this._onTextChange.bind(this); + this._onSendLogsChange = this._onSendLogsChange.bind(this); + } + + _onCancel(ev) { + this.props.onFinished(false); + } + + _onSubmit(ev) { + const sendLogs = this.state.sendLogs; + const userText = this.state.text; + if (!sendLogs && userText.trim().length === 0) { + this.setState({ + err: "Please describe the bug and/or send logs.", + }); + return; + } + this.setState({ busy: true, err: null }); + rageshake.sendBugReport(userText, sendLogs).then(() => { + this.setState({ busy: false }); + }, (err) => { + this.setState({ busy: false, err: `Failed: ${err.message}` }); + }); + } + + _onTextChange(ev) { + this.setState({ text: ev.target.value }); + } + + _onSendLogsChange(ev) { + this.setState({ sendLogs: ev.target.checked }); + } + + render() { + const Loader = sdk.getComponent("elements.Spinner"); + + let error = null; + if (this.state.err) { + error =
+ {this.state.err} +
; + } + + const okLabel = this.state.busy ? : 'Send'; + + let cancelButton = null; + if (!this.state.busy) { + cancelButton = ; + } + + return ( +
+
+ Report a bug +
+
+

Please describe the bug. What did you do? + What did you expect to happen? + What actually happened?

+