Merge remote-tracking branch 'vector-im/develop' into travis/presence

2017-10-25 11:27:22 -06:00
parent 53185fc23d bc3df74c2f
commit 45ca890f68
57 changed files with 10231 additions and 841 deletions
--- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
@@ -19,6 +19,9 @@ limitations under the License.
    width: 100%;
    margin-left: auto;
    margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }

 .mx_GroupView_error {
@@ -27,15 +30,15 @@ limitations under the License.

 .mx_GroupView_header {
    max-width: 960px;
-    margin: auto;
-    height: 70px;
+    min-height: 70px;
    align-items: center;
    display: flex;
-    margin-bottom: 20px;
+    padding-bottom: 10px;
 }

 .mx_GroupView_header_view {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
+    padding-bottom: 0px;
 }

 .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@@ -53,6 +56,23 @@ limitations under the License.
    pointer-events: none;
 }

+.mx_GroupView_editable {
+    border-bottom: 1px solid $strong-input-border-color ! important;
+    min-width: 150px;
+    cursor: text;
+}
+
+.mx_GroupView_editable:focus {
+    border-bottom: 1px solid $accent-color ! important;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_GroupView_header_name:hover div:not(.mx_GroupView_editable) {
+    color: $accent-color;
+    cursor: pointer;
+}
+
 .mx_GroupView_avatarPicker {
    position: relative;
 }
@@ -102,10 +122,6 @@ limitations under the License.
    border-bottom: 1px solid transparent;
 }

-.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input {
-    width: 400px;
-}
-
 .mx_GroupView_header_shortDesc {
    vertical-align: bottom;
    float: left;
@@ -133,10 +149,68 @@ limitations under the License.
    top: 5px;
 }

+.mx_GroupView_body  {
+    flex-grow: 1;
+}
+
+.mx_GroupView_rooms {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    user-select: none;
+}
+
+.mx_GroupView h3 {
+    text-transform: uppercase;
+    color: $h3-color;
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+    padding-left: 14px;
+    margin-bottom: 14px;
+    height: 24px;
+}
+
+.mx_GroupView_group {
+    border-top: 1px solid $primary-hairline-color;
+}
+
+.mx_GroupView_group_disabled {
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.mx_GroupView_rooms_header_addRow_button {
+    display: inline-block;
+}
+
+.mx_GroupView_rooms_header_addRow_button object {
+    pointer-events: none;
+}
+
+.mx_GroupView_rooms_header_addRow_label {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 24px;
+    padding-left: 28px;
+    color: $accent-color;
+}
+
+.mx_GroupView_rooms .mx_RoomDetailList {
+    flex-grow: 1;
+    border-top: 1px solid $primary-hairline-color;
+    padding-top: 10px;
+}
+
+.mx_GroupView .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
 .mx_GroupView_membershipSection {
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 11px;
    color: $greyed-fg-color;
 }

@@ -158,6 +232,15 @@ limitations under the License.
    margin-left: 8px;
 }

+.mx_GroupView_memberSettings_toggle label {
+    cursor: pointer;
+    user-select: none;
+}
+
+.mx_GroupView_memberSettings input {
+    margin-right: 6px;
+}
+
 .mx_GroupView_featuredThings {
    margin-top: 20px;
 }
@@ -215,7 +298,11 @@ limitations under the License.
    display: none;
 }

-.mx_GroupView_editLongDesc {
-    width: 100%;
+.mx_GroupView_body .gm-scroll-view > *{
+    margin: 0px 50px 11px 68px;
+}
+
+.mx_GroupView_groupDesc textarea {
+    width: 50%;
    height: 150px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -24,14 +24,38 @@ limitations under the License.
    margin-left: 0px;
 }

-.mx_MyGroups_joinCreateBox {
-    display: table;
-    margin-bottom: 30px;
+.mx_MyGroups_header {
+    /* Keep mid-point of create button aligned with icon in page header */
+    margin-left: 2px;
+    display: flex;
+    flex-wrap: wrap;
 }

-.mx_MyGroups_createBox, .mx_MyGroups_joinBox {
-    display: table-cell;
-    width: 40%;
+.mx_MyGroups_headerCard {
+    flex: 1 0 50%;
+    margin-bottom: 30px;
+    min-width: 400px;
+    display: flex;
+    align-items: center;
+}
+
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+    margin-right: 13px;
+    height: 50px;
+}
+
+.mx_MyGroups_headerCard_button object {
+    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
+    pointer-events: none;
+}
+
+.mx_MyGroups_headerCard_header {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.mx_MyGroups_headerCard_content {
+    padding-right: 15px;
 }

 /* Until the button is wired up */
@@ -39,21 +63,61 @@ limitations under the License.
    visibility: hidden;
 }

-.mx_MyGroups_joinCreateHeader {
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.mx_MyGroups_joinCreateButton {
-    float: left;
-    margin: 10px;
-}
-
-.mx_MyGroups_joinCreateButton object {
-    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
-    pointer-events: none;
-}
-
 .mx_MyGroups_content {
-    clear: left;
+    margin-left: 2px;
+}
+
+.mx_MyGroups_placeholder {
+    background-color: $group-my-groups-placeholder-bg;
+    color: $group-my-groups-placeholder-fg;
+    line-height: 400px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.mx_MyGroups_joinedGroups {
+    display: flex;
+    flex-direction: row;
+    flex-flow: wrap;
+    justify-content: space-around;
+}
+
+.mx_MyGroups_joinedGroups .mx_GroupTile {
+    min-width: 300px;
+    flex: 1 0 25%;
+    height: 75px;
+    margin-bottom: 15px;
+    margin-right: 10px;
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+}
+
+.mx_GroupTile_profile {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.mx_GroupTile_profile h3.mx_GroupTile_name {
+    margin: 0px;
+    font-size: 15px;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+    font-size: 13px;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    font-size: 13px;
+    max-height: 36px;
+    overflow: hidden;
+}
+
+.mx_GroupTile_profile .mx_GroupTile_groupId {
+    opacity: 0.7;
 }
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -80,17 +80,32 @@ limitations under the License.
    max-width: 1920px ! important;
 }

-.mx_RoomView_topUnreadMessagesBar {
+
+.mx_RoomView_body {
+    order: 3;
+    flex: 1 1 0;
+    flex-direction: column;
+    display: flex;
+}
+
+.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
+    order: 1;
+}
+
+.mx_RoomView_body .mx_RoomView_messagePanel {
+    order: 2;
+}
+
+.mx_RoomView_body .mx_RoomView_statusArea {
    order: 3;
 }

-.mx_RoomView_messagePanel {
+.mx_RoomView_body .mx_MessageComposer {
    order: 4;
+}

-    flex: 1 1 0;
-
+.mx_RoomView_messagePanel {
    width: 100%;
-
    overflow-y: auto;
 }

@@ -131,18 +146,6 @@ limitations under the License.
    clear: both;
 }

-.mx_RoomView_invitePrompt {
-    order: 2;
-
-    min-width: 0px;
-    max-width: 960px;
-    width: 100%;
-    margin: auto;
-
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
 li.mx_RoomView_myReadMarker_container {
    height: 0px;
    margin: 0px;
@@ -160,8 +163,6 @@ hr.mx_RoomView_myReadMarker {
 }

 .mx_RoomView_statusArea {
-    order: 5;
-
    width: 100%;
    flex: 0 0 auto;

@@ -236,8 +237,6 @@ hr.mx_RoomView_myReadMarker {
 }

 .mx_RoomView .mx_MessageComposer {
-    order: 6;
-
    width: 100%;
    flex: 0 0 auto;
    margin-right: 2px;