Factor out stuff commnon to all timeline events into EventTile: makes timestamp & edit button etc appear on everything, not just messages.

2015-10-21 17:52:34 +01:00 · 2015-10-21 17:52:34 +01:00 · 1f3a6e408c
commit 1f3a6e408c
parent 3d3680e42f
6 changed files with 163 additions and 111 deletions
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@ -0,0 +1,112 @@
+/*
+Copyright 2015 OpenMarket 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_EventTile {
+    max-width: 100%;
+    clear: both;
+    margin-top: 32px;
+    margin-left: 56px;
+}
+
+.mx_EventTile_avatar {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -64px;
+    margin-top: -7px;
+    float: left;
+}
+
+.mx_EventTile_avatar img {
+    background-color: #dbdbdb;
+    border-radius: 20px;
+    border: 0px;
+}
+
+.mx_EventTile_continuation {
+    margin-top: 8px ! important;
+}
+
+.mx_EventTile .mx_SenderProfile {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+    margin-bottom: 4px;
+    display: block;
+}
+
+.mx_EventTile .mx_MessageTimestamp {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+    float: right;
+}
+
+.mx_EventTile_content {
+    padding-right: 100px;
+    display: block;
+}
+
+.mx_EventTile_notice .mx_MessageTile_content {
+    opacity: 0.5;
+}
+
+.mx_EventTile_sending {
+    color: #ddd;
+}
+
+.mx_EventTile_notSent {
+    color: #f11;
+}
+
+.mx_EventTile_highlight {
+    color: #FF0064;
+}
+
+.mx_EventTile_msgOption {
+    float: right;
+}
+
+.mx_MessageTimestamp {
+    display: none;
+}
+
+.mx_EventTile_last .mx_MessageTimestamp {
+    display: block;
+}
+
+.mx_EventTile:hover .mx_MessageTimestamp {
+    display: block;
+}
+
+.mx_EventTile_editButton {
+    float: right;
+    display: none;
+    border: 0px;
+    outline: none;
+    margin-right: 3px;
+}
+
+.mx_EventTile:hover .mx_EventTile_editButton {
+    display: inline-block;
+}
+
+.mx_EventTile.menu .mx_EventTile_editButton {
+    display: inline-block;
+}
+
+.mx_EventTile.menu .mx_MessageTimestamp {
+    display: inline-block;
+}