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

Use custom appearance and arrow for field selects #2540

Merged
merged 4 commits into from
Jan 31, 2019
Merged

Use custom appearance and arrow for field selects #2540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de46e6a
Use dropdown-arrow for all toggle arrows
jryans Jan 30, 2019
b093119
Move dropdown arrow to primary element
jryans Jan 30, 2019
d6f55a5
Use custom appearance and arrow for select fields
jryans Jan 30, 2019
6718ae8
Set standard font size for fields
jryans Jan 30, 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
8 changes: 4 additions & 4 deletions res/css/structures/_RoomSubList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,13 @@ limitations under the License.

.mx_RoomSubList_chevron {
pointer-events: none;
background-image: url('$(res)/img/topleft-chevron.svg');
background-repeat: no-repeat;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
Copy link
Member

Choose a reason for hiding this comment

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

hm, shouldn't we only be putting icons from feather into feather-icons?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I wasn't sure what feather-icons meant at first... I guess it started as icons from https://feathericons.com/. I asked this recently, and I was told it has become a place for other new icons as well, so I placed this one there.

Anyway, we can certainly move it; we just need to agree on what goes in the folder.

Copy link
Member

Choose a reason for hiding this comment

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

i strongly suggest we only put icons from feathericons.com in feather-icons. whoever said it had become a place for other random icons is confused :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Okay, we can move this one out then. When I asked @bwindels gave the impression that @nadonomy had also added other non-feather icons there, so it may take some detective work to figure out which should actually be there.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Filed as element-hq/element-web#8348.

mask-repeat: no-repeat;
transition: transform 0.2s ease-in;
width: 10px;
height: 10px;
background-position: center;
height: 6px;
margin-left: 2px;
background-color: $roomsublist-label-fg-color;
}

.mx_RoomSubList_chevronDown {
Expand Down
5 changes: 5 additions & 0 deletions res/css/structures/_TopLeftMenuButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,9 @@ limitations under the License.

.mx_TopLeftMenuButton_chevron {
margin: 0 7px;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
mask-repeat: no-repeat;
width: 10px;
height: 6px;
background-color: $roomsublist-label-fg-color;
}
2 changes: 1 addition & 1 deletion res/css/views/auth/_LanguageSelector.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@ limitations under the License.
color: $authpage-lang-color;
}

.mx_Auth_language .mx_Dropdown_arrow::before {
.mx_Auth_language .mx_Dropdown_arrow {
background: $authpage-lang-color;
}
11 changes: 0 additions & 11 deletions res/css/views/elements/_Dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,9 @@ limitations under the License.
}

.mx_Dropdown_arrow {
display: block;
position: relative;
width: 10px;
height: 6px;
padding-right: 8px;
}

.mx_Dropdown_arrow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
Expand Down
21 changes: 21 additions & 0 deletions res/css/views/elements/_Field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,33 @@ limitations under the License.
.mx_Field textarea {
font-weight: normal;
font-family: $font-family;
font-size: 14px;
border-radius: 4px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
padding: 8px 9px;
}

.mx_Field select {
-moz-appearance: none;
-webkit-appearance: none;
}

// Can't add pseudo-elements to a select directly, so we use its parent.
.mx_Field_select::before {
content: "";
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 6px;
mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
mask-repeat: no-repeat;
background: $primary-fg-color;
z-index: 1;
pointer-events: none;
}

.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
Expand Down
86 changes: 0 additions & 86 deletions res/img/topleft-chevron.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/structures/TopLeftMenuButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default class TopLeftMenuButton extends React.Component {
resizeMethod="crop"
/>
{ nameElement }
<img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
<span className="mx_TopLeftMenuButton_chevron"></span>
</AccessibleButton>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/elements/Field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default class Field extends React.PureComponent {
const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children);

return <div className="mx_Field">
return <div className={`mx_Field mx_Field_${element}`}>
{fieldInput}
<label htmlFor={this.props.id}>{this.props.label}</label>
</div>;
Expand Down