Merge pull request #2519 from matrix-org/bwindels/roomdirectory-makeover

Redesign: room directory makeover
matrix-org · Jan 29, 2019 · 0cce912 · 0cce912
2 parents a16eb30 + 855dbd7
commit 0cce912
Show file tree

Hide file tree

Showing 13 changed files with 157 additions and 124 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -157,7 +157,7 @@ textarea {
     font-weight: 300;
     font-size: 15px;
     position: relative;
-    padding: 0 58px 36px;
+    padding: 40px 58px 36px 58px;
     width: 60%;
     max-width: 704px;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
@@ -190,15 +190,36 @@ textarea {
     pointer-events: none;
 }
 
-.mx_Dialog_cancelButton {
-    position: absolute;
-    right: 11px;
-    top: 13px;
-    cursor: pointer;
+.mx_Dialog_header {
+    position: relative;
 }
 
-.mx_Dialog_cancelButton object {
-    pointer-events: none;
+.mx_Dialog_title {
+    font-weight: bold;
+    font-size: 22px;
+    line-height: 36px;
+    color: $primary-fg-color;
+}
+
+.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
+    text-align: center;
+}
+
+.mx_Dialog_title.danger {
+    color: $warning-color;
+}
+
+.mx_Dialog_cancelButton {
+    mask: url('$(res)/img/feather-icons/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 36px;
+    height: 36px;
+    background-color: $primary-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
 }
 
 .mx_Dialog_content {
@@ -254,19 +275,6 @@ textarea {
     color: $accent-color;
 }
 
-.mx_Dialog_title {
-    min-height: 16px;
-    padding-top: 40px;
-    font-weight: bold;
-    font-size: 22px;
-    line-height: 1.4;
-    color: $primary-fg-color;
-}
-
-.mx_Dialog_title.danger {
-    color: $warning-color;
-}
-
 .mx_TextInputDialog_label {
     text-align: left;
     padding-bottom: 12px;

diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss
@@ -14,29 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomDirectory {
+.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
     max-width: 960px;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    height: 100%;
+    padding: 20px;
+}
+
+.mx_RoomDirectory_dialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_RoomDirectory {
     margin-bottom: 12px;
     color: $primary-fg-color;
     word-break: break-word;
-
     display: flex;
-
     flex-direction: column;
+    flex: 1;
 }
 
-.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
-    margin-left: 0px;
+.mx_RoomDirectory .gm-scroll-view {
+    // little hack because gemini doesn't seem to detect
+    // the scrollbar width well in this instance
+    // when using css scrollbars
+    scrollbar-width: thin;
+}
+
+.mx_RoomDirectory_createRoom {
+    background-color: $button-bg-color;
+    border-radius: 4px;
+    padding: 8px;
+    color: $button-fg-color;
+    font-weight: 600;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .mx_RoomDirectory_list {
     flex: 1;
-
     display: flex;
-
     flex-direction: column;
 }
 
@@ -45,22 +64,17 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_listheader {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    display: flex;
     margin-top: 12px;
     margin-bottom: 12px;
-    border-spacing: 5px;
 }
 
 .mx_RoomDirectory_searchbox {
-    display: table-cell;
-    vertical-align: middle;
+    flex: 1 !important;
 }
 
 .mx_RoomDirectory_listheader .mx_NetworkDropdown {
-    display: table-cell;
-    width: 200px;
+    flex: 0 0 200px;
 }
 
 .mx_RoomDirectory_tableWrapper {

diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
@@ -35,13 +35,13 @@ limitations under the License.
     height: 0;
     position: absolute;
     right: 10px;
-    top: 14px;
+    top: 16px;
     width: 0
 }
 
 .mx_NetworkDropdown_networkoption {
-    height: 35px;
-    line-height: 35px;
+    height: 37px;
+    line-height: 37px;
     padding-left: 8px;
     padding-right: 8px;
     overflow: hidden;

diff --git a/res/css/views/elements/_DirectorySearchBox.scss b/res/css/views/elements/_DirectorySearchBox.scss
@@ -15,26 +15,10 @@ limitations under the License.
 */
 
 .mx_DirectorySearchBox {
-    position: relative;
-    border-radius: 3px;
-    border: 1px solid $strong-input-border-color;
-}
-
-.mx_DirectorySearchBox_container {
     display: flex;
     padding-left: 9px;
     padding-right: 9px;
-}
-
-.mx_DirectorySearchBox_input {
-    flex-grow: 1;
-    border: 0;
-    padding: 0;
-    font-weight: 300;
-    font-size: 13px;
-}
-input[type=text].mx_DirectorySearchBox_input:focus {
-    border: 0;
+    margin: 0 5px 0 0 !important;
 }
 
 .mx_DirectorySearchBox_joinButton {
@@ -54,16 +38,12 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     cursor: pointer;
 }
 
-.mx_DirectorySearchBox_clear_wrapper {
-    display: table-cell;
-}
-
 .mx_DirectorySearchBox_clear {
-    display: inline-block;
-    vertical-align: middle;
-    background: url('$(res)/img/icon_context_delete.svg');
-    background-position: 0 50%;
-    background-repeat: no-repeat;
+    background-color: $warning-color;
+    mask: url('$(res)/img/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 10px;
     width: 15px;
     height: 15px;
     cursor: pointer;

diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
@@ -243,18 +243,20 @@ $authpage-body-color: #61708b;
 // it has the appearance of a text box so the controls
 // appear to be part of the input
 
-.mx_MatrixChat {
+.mx_Dialog, .mx_MatrixChat {
 
-    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         display: block;
-        margin: 9px;
         box-sizing: border-box;
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
         border: 1px solid #c1c1c1;
+        // these things should probably not be defined
+        // globally
+        margin: 9px;
         flex: 0 0 auto;
     }
 
@@ -290,8 +292,8 @@ input[type=password] {
 }
 
 .dark-panel {
-    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $input-darker-bg-color;
@@ -300,8 +302,8 @@ input[type=password] {
 }
 
 .light-panel {
-    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput):not(.mx_Field) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-lighter-fg-color;
         background-color: $input-lighter-bg-color;

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
@@ -323,8 +323,6 @@ const LoggedInView = React.createClass({
     _onScrollKeyPressed: function(ev) {
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
-        } else if (this.refs.roomDirectory) {
-            this.refs.roomDirectory.handleScrollKey(ev);
         }
     },
 
@@ -422,7 +420,6 @@ const LoggedInView = React.createClass({
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
         const UserSettings = sdk.getComponent('structures.UserSettings');
-        const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
         const HomePage = sdk.getComponent('structures.HomePage');
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
@@ -464,10 +461,7 @@ const LoggedInView = React.createClass({
                 break;
 
             case PageTypes.RoomDirectory:
-                pageElement = <RoomDirectory
-                    ref="roomDirectory"
-                    config={this.props.config.roomDirectory}
-                />;
+                // handled by MatrixChat for now
                 break;
 
             case PageTypes.HomePage:

diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
@@ -614,10 +614,15 @@ export default React.createClass({
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
             }
             break;
-            case 'view_room_directory':
-                this._setPage(PageTypes.RoomDirectory);
-                this.notifyNewScreen('directory');
-                break;
+            case 'view_room_directory': {
+                const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
+                Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
+                    config: this.props.config,
+                }, 'mx_RoomDirectory_dialogWrapper');
+                // this._setPage(PageTypes.RoomDirectory);
+                // this.notifyNewScreen('directory');
+            }
+            break;
             case 'view_my_groups':
                 this._setPage(PageTypes.MyGroups);
                 this.notifyNewScreen('groups');