OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues 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

pull/1941/head
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