Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Re-modularised the context menus

Browse Source
This commit is contained in:
wmwragg 2016-07-27 10:40:57 +01:00
parent 37a7ce809a
commit 5cf164fcc1
5 changed files with 88 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component-index.js
View File

@ -34,6 +34,8 @@ module.exports.components['structures.RoomDirectory'] = require('./components/st
module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList');
module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
@ -46,8 +48,6 @@ module.exports.components['views.messages.DateSeparator'] = require('./component
module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile');
module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile');
module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu');
module.exports.components['views.rooms.NotificationStateContextMenu'] = require('./components/views/rooms/NotificationStateContextMenu');
module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView');
module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');

0
src/components/views/rooms/MessageContextMenu.js → src/components/views/context_menus/MessageContextMenu.js
View File

8
src/components/views/rooms/NotificationStateContextMenu.js → src/components/views/context_menus/NotificationStateContextMenu.js
View File

@ -110,10 +110,14 @@ module.exports = React.createClass({
return (
<div>
<div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
{ !this.state.areNotifsMuted ? "ON" : "OFF" } - All notifications
{ !this.state.areNotifsMuted ? "ON" : "OFF" }
<img src="img/icon-context-mute-off.svg" width="15" height="10" />
All notifications
</div>
<div className={ muteNotifsClasses } onClick={this._onClickMute} >
{ this.state.areNotifsMuted ? "ON" : "OFF" } - Mute
{ this.state.areNotifsMuted ? "ON" : "OFF" }
<img src="img/icon-context-mute.svg" width="15" height="10" />
Mute
</div>
</div>
);

81
src/skins/vector/css/common.css
View File

@ -85,87 +85,6 @@ input[type=text]:focus, textarea:focus {
border-left: 6px solid transparent;
}
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 2000;
}
.mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5);
border-radius: 4px;
background-color: #f6f6f6;
color: #4a4a4a;
position: fixed;
z-index: 2001;
padding: 6px;
font-size: 14px;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
top: 10px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
right: 1px;
}
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
top: 10px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
}
.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet {
font-weight: bold;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: 4000;

80
src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css Normal file
View File

@ -0,0 +1,80 @@
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1.0;
z-index: 2000;
}
.mx_ContextualMenu {
border: solid 1px rgba(187, 187, 187, 0.5);
border-radius: 4px;
background-color: #f6f6f6;
color: #4a4a4a;
position: fixed;
z-index: 2001;
padding: 6px;
font-size: 14px;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
top: 10px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_right:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-left: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
right: 1px;
}
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
top: 10px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_chevron_left:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #f6f6f6;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_ContextualMenu_field {
padding: 3px 6px 3px 6px;
cursor: pointer;
}
.mx_ContextualMenu_field.mx_ContextualMenu_fieldSet {
font-weight: bold;
}
.mx_ContextualMenu_spinner {
display: block;
margin: 0 auto;
}