Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Redesign: room directory makeover #2519

Merged
merged 5 commits into from
Jan 29, 2019
Merged

Redesign: room directory makeover #2519

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f1b4ac
room directory makeover
bwindels Jan 29, 2019
7c0f463
fix lint
bwindels Jan 29, 2019
57b2f69
fix lint - bis
bwindels Jan 29, 2019
bcd4a53
run i18n
bwindels Jan 29, 2019
855dbd7
Merge branch 'experimental' into bwindels/roomdirectory-makeover
bwindels Jan 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 29 additions & 21 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
50 changes: 32 additions & 18 deletions res/css/structures/_RoomDirectory.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do more specific styles help at all in this case? Something like .mx_RoomDirectory_dialogWrapper .mx_RoomDirectory_searchBox ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried that, but the rule it's trying to override is very very specific (see _dharma.scss:260). The whole mx_textinput/ global input styles need to be better scoped anyways, so rather postpone this till then.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:(

+1 to postponing. It's not a major problem, just a thing we should avoid if possible

}

.mx_RoomDirectory_listheader .mx_NetworkDropdown {
display: table-cell;
width: 200px;
flex: 0 0 200px;
}

.mx_RoomDirectory_tableWrapper {
Expand Down
6 changes: 3 additions & 3 deletions res/css/views/directory/_NetworkDropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
32 changes: 6 additions & 26 deletions res/css/views/elements/_DirectorySearchBox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
18 changes: 10 additions & 8 deletions res/themes/dharma/css/_dharma.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 1 addition & 7 deletions src/components/structures/LoggedInView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
},

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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:
Expand Down
13 changes: 9 additions & 4 deletions src/components/structures/MatrixChat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
Loading