imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial restyle of context menus with drop shadow

Browse source
This commit is contained in:
Bruno Windels 2018-10-23 15:23:59 +02:00
parent 3f6175527c
commit eba91d3edc
7 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,8 +30,8 @@ limitations under the License.
} }
.mx_ContextualMenu { .mx_ContextualMenu {
border: solid 1px $menu-border-color; border-radius: 2px;
border-radius: 4px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $menu-bg-color; background-color: $menu-bg-color;
color: $primary-fg-color; color: $primary-fg-color;
position: absolute; position: absolute;
@ -43,6 +43,10 @@ limitations under the License.
right: 8px; right: 8px;
} }
.mx_ContextualMenu_noChevron {
border-radius: unset !important;
}
.mx_ContextualMenu_chevron_right { .mx_ContextualMenu_chevron_right {
position: absolute; position: absolute;
right: -8px; right: -8px;
@ -50,7 +54,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-left: 8px solid $menu-border-color; border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -77,7 +81,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color; border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -104,7 +108,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-bottom: 8px solid $menu-border-color; border-bottom: 8px solid $menu-bg-color;
border-right: 8px solid transparent; border-right: 8px solid transparent;
} }
@ -131,7 +135,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-left: 8px solid transparent; border-left: 8px solid transparent;
border-top: 8px solid $menu-border-color; border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent; border-right: 8px solid transparent;
} }

4
res/css/views/rooms/_RoomTooltip.scss
View file

@ -21,7 +21,7 @@ limitations under the License.
width: 0; width: 0;
height: 0; height: 0;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color; border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
@ -40,8 +40,8 @@ limitations under the License.
.mx_RoomTooltip { .mx_RoomTooltip {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid $menu-border-color;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $primary-bg-color; background-color: $primary-bg-color;
z-index: 2000; z-index: 2000;
padding: 5px; padding: 5px;

4
res/themes/dark/css/_dark.scss
View file

@ -1,6 +1,6 @@
// typical text (dark-on-white in light skin) // typical text (dark-on-white in light skin)
$primary-fg-color: #dddddd; $primary-fg-color: #212121;
$primary-bg-color: #2d2d2d; $primary-bg-color: #2d2d2d;
// used for focusing form controls // used for focusing form controls
@ -72,9 +72,11 @@ $input-fg-color: $primary-fg-color;
// context menus // context menus
$menu-border-color: rgba(187, 187, 187, 0.5); $menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #373737; $menu-bg-color: #373737;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #2d2d2d; $avatar-initial-color: #2d2d2d;
$avatar-bg-color: #ffffff; $avatar-bg-color: #ffffff;
$menu-selected-color: #f5f8fa;
$h3-color: $primary-fg-color; $h3-color: $primary-fg-color;

5
res/themes/dharma/css/_dharma.scss
View file

@ -76,8 +76,9 @@ $input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9); $input-fg-color: rgba(74, 74, 74, 0.9);
// context menus // context menus
$menu-border-color: rgba(187, 187, 187, 0.5); $menu-border-color: #ebedf8;
$menu-bg-color: #f6f6f6; $menu-bg-color: #fff;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff; $avatar-initial-color: #ffffff;
$avatar-bg-color: #ffffff; $avatar-bg-color: #ffffff;

1
res/themes/light/css/_base.scss
View file

@ -77,6 +77,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9);
// context menus // context menus
$menu-border-color: rgba(187, 187, 187, 0.5); $menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6; $menu-bg-color: #f6f6f6;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #ffffff; $avatar-initial-color: #ffffff;
$avatar-bg-color: #ffffff; $avatar-bg-color: #ffffff;

2
src/components/views/context_menus/MessageContextMenu.js
View file

@ -333,7 +333,7 @@ module.exports = React.createClass({
} }
return ( return (
<div> <div className="mx_MessageContextMenu">
{ resendButton } { resendButton }
{ redactButton } { redactButton }
{ cancelButton } { cancelButton }

2
src/components/views/context_menus/RoomTileContextMenu.js
View file

@ -243,7 +243,7 @@ module.exports = React.createClass({
}); });
return ( return (
<div> <div className="mx_RoomTileContextMenu">
<div className="mx_RoomTileContextMenu_notif_picker" > <div className="mx_RoomTileContextMenu_notif_picker" >
<img src="img/notif-slider.svg" width="20" height="107" /> <img src="img/notif-slider.svg" width="20" height="107" />
</div> </div>