Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

Initial pass of the tag menu, still lots of tweaking and bugfixing to do, but most of the mechanics are there now

Browse Source
This commit is contained in:
wmwragg 2016-08-08 16:55:02 +01:00
parent 72ba708bfe
commit 5a97786cc6
8 changed files with 154 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,7 +57,7 @@ module.exports = React.createClass({
// Wrapping this in a q promise, as setRoomMutePushRule can return
// a promise or a value
q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted))
.then(function(s) {
.then(function() {
self.setState({areNotifsMuted: areNotifsMuted});
// delay slightly so that the user can see their state change

128
src/components/views/context_menus/RoomTagContextMenu.js
View File

@ -32,63 +32,85 @@ module.exports = React.createClass({
},
getInitialState: function() {
// var areNotifsMuted = false;
// var cli = MatrixClientPeg.get();
// if (!cli.isGuest()) {
// var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
// if (roomPushRule) {
// if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
// areNotifsMuted = true;
// }
// }
// }
//
// return {
// areNotifsMuted: areNotifsMuted,
// };
return null;
return {
isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
};
},
// _save: function( isMuted ) {
// var self = this;
// const roomId = this.props.room.roomId;
// var cli = MatrixClientPeg.get();
//
// if (!cli.isGuest()) {
// cli.setRoomMutePushRule(
// "global", roomId, isMuted
// ).then(function() {
// self.setState({areNotifsMuted: isMuted});
//
// // delay slightly so that the user can see their state change
// // before closing the menu
// q.delay(500).then(function() {
// // tell everyone that wants to know of the change in
// // notification state
// dis.dispatch({
// action: 'notification_change',
// roomId: self.props.room.roomId,
// isMuted: isMuted,
// });
//
// // Close the context menu
// if (self.props.onFinished) {
// self.props.onFinished();
// };
// });
// }).fail(function(error) {
// // TODO: some form of error notification to the user
// // to inform them that their state change failed.
// });
// }
// },
_toggleTag: function(tagNameOn, tagNameOff) {
console.log("DEBUG: _toggleTag");
console.log("tagNameOn: " + tagNameOn + " tagNameOff: " + tagNameOff);
var self = this;
const roomId = this.props.room.roomId;
var cli = MatrixClientPeg.get();
if (!cli.isGuest()) {
q.delay(500).then(function() {
if (tagNameOff !== null && tagNameOff !== undefined) {
cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).fail(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to remove tag " + tagNameOff + " from room",
description: err.toString()
});
});
}
if (tagNameOn !== null && tagNameOn !== undefined) {
cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
// Close the context menu
if (self.props.onFinished) {
self.props.onFinished();
};
}).fail(function(err) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Failed to add tag " + tagNameOn + " to room",
description: err.toString()
});
});
}
});
}
},
_onClickFavourite: function() {
// Tag room as 'Favourite'
if (!this.state.isFavourite && this.state.isLowPriority) {
this.setState({
isFavourite: true,
isLowPriority: false,
});
this._toggleTag("m.favourite", "m.lowpriority");
} else if (this.state.isFavourite) {
this.setState({isFavourite: false});
this._toggleTag(null, "m.favourite");
} else if (!this.state.isFavourite) {
this.setState({isFavourite: true});
this._toggleTag("m.favourite");
}
},
_onClickLowPriority: function() {
// Tag room as 'Low Priority'
if (!this.state.isLowPriority && this.state.isFavourite) {
this.setState({
isFavourite: false,
isLowPriority: true,
});
this._toggleTag("m.lowpriority", "m.favourite");
} else if (this.state.isLowPriority) {
this.setState({isLowPriority: false});
this._toggleTag(null, "m.lowpriority");
} else if (!this.state.isLowPriority) {
this.setState({isLowPriority: true});
this._toggleTag("m.lowpriority");
}
},
_onClickLeave: function() {
@ -100,13 +122,13 @@ module.exports = React.createClass({
var favouriteClasses = classNames({
'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
'mx_RoomTagContextMenu_fieldDisabled': false,
});
var lowPriorityClasses = classNames({
'mx_RoomTagContextMenu_field': true,
'mx_RoomTagContextMenu_fieldSet': false,
'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
'mx_RoomTagContextMenu_fieldDisabled': false,
});
@ -119,16 +141,16 @@ module.exports = React.createClass({
return (
<div>
<div className={ favouriteClasses } onClick={this._onClickFavourite} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="15" height="15" />
Favourite
</div>
<div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-low.svg" width="15" height="15" />
Low Priority
</div>
<hr className="mx_RoomTagContextMenu_separator" />
<div className={ leaveClasses } onClick={this._onClickLeave} >
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-fave.svg" width="13" height="13" />
<img className="mx_RoomTagContextMenu_icon" src="img/icon-context-delete.svg" width="15" height="15" />
Leave
</div>
</div>

12
src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css
View File

@ -15,15 +15,23 @@ limitations under the License.
*/
.mx_RoomTagContextMenu_field {
padding-top: 4px;
padding-top: 8px;
padding-right: 20px;
padding-bottom: 10px;
padding-bottom: 8px;
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
}
.mx_RoomTagContextMenu_field:first-child {
padding-top: 4px;
}
.mx_RoomTagContextMenu_field:last-child {
padding-bottom: 4px;
}
.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
font-weight: bold;
}

16
src/skins/vector/img/icon-context-delete.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>5E746DC3-8B17-478D-8DB8-DFD20B596F66</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-64.000000, -364.000000)">
<g id="icon_context_delete" transform="translate(62.000000, 361.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<path d="M3.45,3.45 L11.55,11.55" id="Line" stroke="#FF0064" stroke-linecap="round"></path>
<path d="M3.45,3.45 L11.55,11.55" id="Line-Copy-2" stroke="#FF0064" stroke-linecap="round" transform="translate(7.500000, 7.500000) scale(-1, 1) translate(-7.500000, -7.500000) "></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
src/skins/vector/img/icon-context-fave-on.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>DAE17B64-40B5-478A-8E8D-97AD1A6E25C8</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-93.000000, -313.000000)">
<g id="icon_context_fave_on" transform="translate(92.000000, 312.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<polygon id="Star-1" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

15
src/skins/vector/img/icon-context-fave.svg
View File

@ -1,15 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>3658772C-9483-49C3-A6B2-B4E3112661C1</title>
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>8A6E1837-F0F1-432E-A0DA-6F3741F71EBF</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2" stroke-linejoin="round">
<g id="02_15-Context-Menus" transform="translate(-64.000000, -304.000000)" stroke="#000000">
<g id="Rectangle-2-Copy-+-General" transform="translate(48.000000, 293.000000)">
<g id="icon_context_fave" transform="translate(16.000000, 11.000000)">
<polygon id="Star-1" points="6.5 9.75 2.67939586 11.7586105 3.40906632 7.50430523 0.318132644 4.49138954 4.58969793 3.87069477 6.5 0 8.41030207 3.87069477 12.6818674 4.49138954 9.59093368 7.50430523 10.3206041 11.7586105"></polygon>
</g>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
<g id="Extra-icons-sheet" transform="translate(-63.000000, -313.000000)">
<g id="icon_context_fave" transform="translate(62.000000, 312.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<polygon id="Star-1" stroke="#000000" stroke-linejoin="round" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

15
src/skins/vector/img/icon-context-low-on.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>CD51482C-F2D4-4F63-AF9E-86513F9AF87F</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-93.000000, -338.000000)">
<g id="icon_context_low_on" transform="translate(92.000000, 337.000000)">
<rect id="Rectangle-Copy" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
src/skins/vector/img/icon-context-low.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>B160345F-40D3-4BE6-A860-6D04BF223EF7</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Extra-icons-sheet" transform="translate(-63.000000, -338.000000)">
<g id="icon_context_low" transform="translate(62.000000, 337.000000)">
<rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
<path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#000000" stroke-linejoin="round" opacity="0.2"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB