OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

initial restyle of context menus with drop shadow

pull/21833/head
Bruno Windels 2018-10-23 15:23:59 +02:00
parent 3f6175527c
commit eba91d3edc
7 changed files with 21 additions and 13 deletions
Show Stats 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 {
border: solid 1px $menu-border-color;
border-radius: 4px;
border-radius: 2px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
@ -43,6 +43,10 @@ limitations under the License.
right: 8px;
}
.mx_ContextualMenu_noChevron {
border-radius: unset !important;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
@ -50,7 +54,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid $menu-border-color;
border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -77,7 +81,7 @@ limitations under the License.
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-border-color;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
@ -104,7 +108,7 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $menu-border-color;
border-bottom: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}
@ -131,7 +135,7 @@ limitations under the License.
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $menu-border-color;
border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}

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

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

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

@ -1,6 +1,6 @@
// typical text (dark-on-white in light skin)
$primary-fg-color: #dddddd;
$primary-fg-color: #212121;
$primary-bg-color: #2d2d2d;
// used for focusing form controls
@ -72,9 +72,11 @@ $input-fg-color: $primary-fg-color;
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #373737;
$menu-selected-color: #f5f8fa;
$avatar-initial-color: #2d2d2d;
$avatar-bg-color: #ffffff;
$menu-selected-color: #f5f8fa;
$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);
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6;
$menu-border-color: #ebedf8;
$menu-bg-color: #fff;
$menu-selected-color: #f5f8fa;
$avatar-initial-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
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6;
$menu-selected-color: #f5f8fa;
$avatar-initial-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 (
<div>
<div className="mx_MessageContextMenu">
{ resendButton }
{ redactButton }
{ cancelButton }

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

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