Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS for CreateGroupDialog to give group ID input suffix and prefix style #5505

Merged
merged 2 commits into from
Nov 3, 2017
Merged

Add CSS for CreateGroupDialog to give group ID input suffix and prefix style #5505

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67bc346
Add CSS for CreateGroupDialog to give group ID input suffix and prefi…
Nov 3, 2017
290a501
Use prefixed class names to avoid collisions with other libraries
Nov 3, 2017
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
27 changes: 27 additions & 0 deletions src/skins/vector/css/matrix-react-sdk/views/dialogs/_CreateGroupDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,30 @@ limitations under the License.
background-color: $primary-bg-color;
}

.mx_CreateGroupDialog_input.has_prefix.has_suffix {
Copy link
Member

Choose a reason for hiding this comment

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

we have to namespace CSS classes correctly, otherwise this will collide with any other random CSS dependency (e.g. markdown, syntax highlighter, etc) which might choose to define a generic class like has_prefix. In this instance, I assume it should be something like mx_CreateGroupDialog_input_hasPrefix.

....however, it's very very unclear and confusing as to what the difference is between mx_CreateGroupDialog_input_prefix and mx_CreateGroupDialog_input.has_prefix here, and so i suspect you need a better name anyway.

Copy link
Contributor Author

@lukebarnard1 lukebarnard1 Nov 3, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

ah, I see what you're saying

let's go with
.mx_CreateGroupDialog_prefix and .mx_CreateGroupDialog_input_hasPrefixAndSuffix

Copy link
Member

Choose a reason for hiding this comment

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

also, i would avoid the .foo.bar.baz selector format - we don't use it in many other places, and instead do the (different) .foo .bar, .foo .baz selector to say "select classes with name bar or baz which are within a parent class called foo". (Unless there's a performance improvement I've forgotten about explicitly having .foo.bar.baz being "select classes which have names foo, bar & baz"? I may also be a bit historically traumatised by .foo.bar.baz not working reliably on IE4 ;P)

border-radius: 0px;
}

.mx_CreateGroupDialog_input_group {
display: flex;
}

.mx_CreateGroupDialog_input_prefix,
.mx_CreateGroupDialog_input_suffix {
height: 35px;
padding: 0px 5px;
line-height: 37px;
background-color: $input-border-color;
border: 1px solid $input-border-color;
text-align: center;
}

.mx_CreateGroupDialog_input_prefix {
border-right: 0px;
border-radius: 3px 0px 0px 3px;
}

.mx_CreateGroupDialog_input_suffix {
border-left: 0px;
border-radius: 0px 3px 3px 0px;
}