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

Rework custom status context menu

Browse source 
This updates the custom status context menu to match the latest comps.  A single
button is used for setting / clearing, depending on what is appropriate.

The state logic is also changed to depend on events and storage from js-sdk for
the committed status message.  This makes it easy to distinguish the value being
edited from what's currently committed.
This commit is contained in:
J. Ryan Stinnett 2019-01-14 16:41:14 -06:00
parent fc3055f541
commit 5b88b64950
6 changed files with 103 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

55
res/css/views/context_menus/_StatusMessageContextMenu.scss
View file

@ -14,42 +14,43 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_StatusMessageContextMenu_message {
display: inline-block;
border-radius: 3px 0 0 3px;
.mx_StatusMessageContextMenu {
padding: 10px;
}
.mx_StatusMessageContextMenu_form {
display: flex;
flex-direction: column;
}
input.mx_StatusMessageContextMenu_message {
border-radius: 4px;
border: 1px solid $input-border-color;
font-size: 13px;
padding: 7px 7px 7px 9px;
width: 135px;
background-color: $primary-bg-color !important;
padding: 6.5px 11px;
background-color: $primary-bg-color;
font-weight: normal;
margin: 0 0 10px;
}
.mx_StatusMessageContextMenu_submit {
display: inline-block;
.mx_StatusMessageContextMenu_message::placeholder {
color: $memberstatus-placeholder-color;
}
.mx_StatusMessageContextMenu_submitFaded {
opacity: 0.5;
.mx_StatusMessageContextMenu_submit,
.mx_StatusMessageContextMenu_clear {
@mixin mx_DialogButton;
align-self: start;
font-size: 12px;
padding: 6px 1em;
border: 1px solid transparent;
}
.mx_StatusMessageContextMenu_submit img {
vertical-align: middle;
margin-left: 8px;
}
.mx_StatusMessageContextMenu hr {
border: 0.5px solid $menu-border-color;
}
.mx_StatusMessageContextMenu_clearIcon {
margin: 5px 15px 5px 5px;
vertical-align: middle;
.mx_StatusMessageContextMenu_submit[disabled] {
opacity: 0.49;
}
.mx_StatusMessageContextMenu_clear {
padding: 2px;
}
.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear {
color: $warning-color;
background-color: transparent;
border: 1px solid $warning-color;
}

17
res/img/icons-checkmark.svg
View file

@ -1,17 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Tick</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Custom-Status-Copy" transform="translate(-529.000000, -917.000000)" fill-rule="nonzero">
<g id="Tick" transform="translate(530.000000, 918.000000)">
<circle id="Oval" stroke="#6AAC8C" fill="#75CFA6" cx="9" cy="9" r="9"></circle>
<g id="Glyph" transform="translate(8.949747, 7.949747) rotate(-45.000000) translate(-8.949747, -7.949747) translate(4.449747, 5.449747)" fill="#FFFFFF">
<rect id="Rectangle" x="0" y="0" width="2" height="5"></rect>
<rect id="Rectangle" x="0" y="3" width="9" height="2"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -68,7 +68,7 @@ $event-selected-color: #f7f7f7;
$primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
$input-border-color: #e7e7e7;
$input-darker-bg-color: rgba(193, 201, 214, 0.29);
$input-darker-fg-color: #9fa9ba;
$input-lighter-bg-color: #f2f5f8;
@ -192,6 +192,8 @@ $progressbar-color: #000;
$room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
/*** form elements ***/
// .mx_textinput is a container for a text input

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

@ -188,6 +188,8 @@ $progressbar-color: #000;
$room-warning-bg-color: #fff8e3;
$memberstatus-placeholder-color: $roomtile-name-color;
// ***** Mixins! *****
@define-mixin mx_DialogButton {