Merge pull request #2347 from matrix-org/travis/custom-status

Custom status messages

res/css/_components.scss

@@ -24,8 +24,10 @@
 @import "./structures/_ViewSource.scss";
 @import "./structures/login/_Login.scss";
 @import "./views/avatars/_BaseAvatar.scss";
+@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_RoomTileContextMenu.scss";
+@import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";

res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -0,0 +1,20 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MemberStatusMessageAvatar_hasStatus {
+    border: 2px solid $accent-color;
+    border-radius: 40px;
+}

res/css/views/context_menus/_StatusMessageContextMenu.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+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;
+    border: 1px solid $input-border-color;
+    font-size: 13px;
+    padding: 7px 7px 7px 9px;
+    width: 135px;
+    background-color: $primary-bg-color !important;
+}
+
+.mx_StatusMessageContextMenu_submit {
+    display: inline-block;
+}
+
+.mx_StatusMessageContextMenu_submitFaded {
+    opacity: 0.5;
+}
+
+.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_clear {
+    padding: 2px;
+}
+
+.mx_StatusMessageContextMenu_hasStatus .mx_StatusMessageContextMenu_clear {
+    color: $warning-color;
+}

res/css/views/rooms/_EntityTile.scss

@@ -111,4 +111,12 @@ limitations under the License.
     opacity: 0.25;
 }
 
+.mx_EntityTile_subtext {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}
+
 

res/css/views/rooms/_MemberInfo.scss

@@ -110,3 +110,10 @@ limitations under the License.
     margin-left: 8px;
 }
 
+.mx_MemberInfo_statusMessage {
+    font-size: 11px;
+    opacity: 0.5;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+}

res/css/views/rooms/_RoomTile.scss

@@ -35,7 +35,19 @@ limitations under the License.
 .mx_RoomTile_nameContainer {
     display: inline-block;
     width: 180px;
-    height: 24px;
+    vertical-align: middle;
+}
+
+.mx_RoomTile_subtext {
+    display: inline-block;
+    font-size: 11px;
+    padding: 0 0 0 7px;
+    margin: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: clip;
+    position: relative;
+    bottom: 4px;
 }
 
 .mx_RoomTile_avatar_container {
@@ -49,10 +61,14 @@ limitations under the License.
     padding-left: 16px;
     padding-right: 6px;
     width: 24px;
-    height: 24px;
     vertical-align: middle;
 }
 
+.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
+    padding-top: 0;
+    vertical-align: super;
+}
+
 .mx_RoomTile_dm {
     display: block;
     position: absolute;

res/img/icons-checkmark.svg

@@ -0,0 +1,17 @@
+<?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>