From 670f6e4f99cf0a9f4029ab701d9af650b1d378fd Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 8 Apr 2019 16:48:42 +0100 Subject: [PATCH 1/4] Simplify settings dialog CSS Stop the settings dialogs from requiring special styles on the mx_Dialog which required passing in a classname from anywhere the settings dialogs were opened (although this still requires static=true). Some of the things have now been adopted for all dialogs (border-radius), others have been moved to within the dialog content. --- res/css/structures/_TabbedView.scss | 2 +- res/css/views/dialogs/_SettingsDialog.scss | 56 ++++++++++------------ src/components/structures/MatrixChat.js | 4 +- src/stores/RoomViewStore.js | 2 +- 4 files changed, 28 insertions(+), 36 deletions(-) diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 29e7c401e6..eef491774a 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -91,4 +91,4 @@ limitations under the License. flex-grow: 1; overflow: auto; min-height: 0; // firefox -} \ No newline at end of file +} diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index 925f966216..ed1738d6b4 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -14,37 +14,29 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_SettingsDialog { - .mx_Dialog { - height: 80%; - border-radius: 4px; - padding-top: 0; - padding-right: 30px; - padding-left: 0; - - .mx_TabbedView { - top: 65px; - } - - .mx_TabbedView .mx_SettingsTab { - box-sizing: border-box; - min-width: 580px; - padding-right: 100px; - - // Put some padding on the bottom to avoid the settings tab from - // colliding harshly with the dialog when scrolled down. - padding-bottom: 100px; - } - - .mx_Dialog_title { - text-align: center; - margin-top: 16px; - margin-bottom: 24px; - } - - .mx_Dialog_fixedWidth { - max-width: 1000px; - width: 90vw; - } +// Not actually a component but things shared by settings components +.mx_UserSettingsDialog, .mx_RoomSettingsDialog { + .mx_TabbedView { + top: 65px; } + + .mx_TabbedView .mx_SettingsTab { + box-sizing: border-box; + min-width: 580px; + padding-right: 100px; + + // Put some padding on the bottom to avoid the settings tab from + // colliding harshly with the dialog when scrolled down. + padding-bottom: 100px; + } + + .mx_Dialog_title { + text-align: center; + margin-bottom: 24px; + } + + max-width: 1000px; + width: 90vw; + // set the height too since tabbed view scrolls itself. + height: 80vh; } diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 19ac145c08..38d6700de7 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -597,8 +597,8 @@ export default React.createClass({ break; case 'view_user_settings': { const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog"); - Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog', - /*isPriority=*/false, /*isStatic=*/true); + Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, + /*className*/null, /*isPriority=*/false, /*isStatic=*/true); // View the welcome or home page if we need something to look at this._viewSomethingBehindModal(); diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js index d8556f661e..37490ecd62 100644 --- a/src/stores/RoomViewStore.js +++ b/src/stores/RoomViewStore.js @@ -120,7 +120,7 @@ class RoomViewStore extends Store { const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog"); Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, { roomId: payload.room_id || this._state.roomId, - }, 'mx_SettingsDialog', /*isPriority=*/false, /*isStatic=*/true); + }, /*className*/null, /*isPriority=*/false, /*isStatic=*/true); break; } } From a04c15d1314f2c71bb3ffe2504ded04661a74946 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 8 Apr 2019 19:10:20 +0100 Subject: [PATCH 2/4] consistent comments --- src/components/structures/MatrixChat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 38d6700de7..28b7528a4c 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -598,7 +598,7 @@ export default React.createClass({ case 'view_user_settings': { const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog"); Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, - /*className*/null, /*isPriority=*/false, /*isStatic=*/true); + /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); // View the welcome or home page if we need something to look at this._viewSomethingBehindModal(); From acdcf6639e4910e34638e51d9506409bced01cc2 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 8 Apr 2019 19:11:04 +0100 Subject: [PATCH 3/4] Put width / height first in css --- res/css/views/dialogs/_SettingsDialog.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index ed1738d6b4..ec813a1a07 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -16,6 +16,11 @@ limitations under the License. // Not actually a component but things shared by settings components .mx_UserSettingsDialog, .mx_RoomSettingsDialog { + width: 90vw; + max-width: 1000px; + // set the height too since tabbed view scrolls itself. + height: 80vh; + .mx_TabbedView { top: 65px; } @@ -34,9 +39,4 @@ limitations under the License. text-align: center; margin-bottom: 24px; } - - max-width: 1000px; - width: 90vw; - // set the height too since tabbed view scrolls itself. - height: 80vh; } From d7509dd4c464c570a10a94f6baeb80b10db42711 Mon Sep 17 00:00:00 2001 From: David Baker Date: Mon, 8 Apr 2019 19:12:04 +0100 Subject: [PATCH 4/4] comment consistency --- src/stores/RoomViewStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stores/RoomViewStore.js b/src/stores/RoomViewStore.js index 37490ecd62..77b02a8744 100644 --- a/src/stores/RoomViewStore.js +++ b/src/stores/RoomViewStore.js @@ -120,7 +120,7 @@ class RoomViewStore extends Store { const RoomSettingsDialog = sdk.getComponent("dialogs.RoomSettingsDialog"); Modal.createTrackedDialog('Room settings', '', RoomSettingsDialog, { roomId: payload.room_id || this._state.roomId, - }, /*className*/null, /*isPriority=*/false, /*isStatic=*/true); + }, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true); break; } }