PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

add icons to top left menu options

Browse source
This commit is contained in:
Bruno Windels 2019-01-29 16:56:07 +01:00
parent 2db0a9c005
commit 6ffc5e093d
4 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/structures/_ContextualMenu.scss
View file

@ -43,10 +43,6 @@ limitations under the License.
right: 8px;
}
.mx_ContextualMenu_noChevron {
border-radius: unset !important;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;

25
res/css/views/context_menus/_TopLeftMenu.scss
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_TopLeftMenu {
min-width: 180px;
border-radius: 4px;
.mx_TopLeftMenu_section:not(:last-child) {
border-bottom: 1px solid $menu-border-color;
@ -26,10 +27,32 @@ limitations under the License.
margin: 5px 0;
padding: 0;
li.mx_TopLeftMenu_icon_settings::after {
mask-image: url('$(res)/img/feather-icons/settings.svg');
}
li.mx_TopLeftMenu_icon_signout::after {
mask-image: url('$(res)/img/feather-icons/sign-out.svg');
}
li::after {
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: 16px;
position: absolute;
width: 16px;
height: 16px;
content: "";
top: 5px;
left: 14px;
background-color: $primary-fg-color;
}
li {
position: relative;
cursor: pointer;
white-space: nowrap;
padding: 5px 20px;
padding: 5px 20px 5px 43px;
}
li:hover {

5
res/img/feather-icons/sign-out.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M5.667 15H2.556C1.696 15 1 14.304 1 13.444V2.556C1 1.696 1.696 1 2.556 1h3.11M11.111 11.889L15 8l-3.889-3.889M15 8H5.667"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 364 B

4
src/components/views/context_menus/TopLeftMenu.js
View file

@ -30,10 +30,10 @@ export class TopLeftMenu extends React.Component {
render() {
return <div className="mx_TopLeftMenu">
<ul className="mx_TopLeftMenu_section">
<li onClick={this.openSettings}>{_t("Settings")}</li>
<li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
</ul>
<ul className="mx_TopLeftMenu_section">
<li onClick={this.signOut}>{_t("Sign out")}</li>
<li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
</ul>
</div>;
}