From 553c53e7e858a5f0e8f5975bfcc033335874ea7f Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 17 May 2017 12:33:58 +0100 Subject: [PATCH 01/13] Add apps menu icons --- .../views/rooms/_MessageComposer.scss | 6 +++-- src/skins/vector/img/icons-apps-active.svg | 24 +++++++++++++++++++ src/skins/vector/img/icons-apps.svg | 14 +++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 src/skins/vector/img/icons-apps-active.svg create mode 100644 src/skins/vector/img/icons-apps.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index 525cc1f654..ac49722711 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -128,7 +128,8 @@ limitations under the License. .mx_MessageComposer_upload, .mx_MessageComposer_hangup, .mx_MessageComposer_voicecall, -.mx_MessageComposer_videocall { +.mx_MessageComposer_videocall, +.mx_MessageComposer_apps { /*display: table-cell;*/ /*vertical-align: middle;*/ /*padding-left: 10px;*/ @@ -140,7 +141,8 @@ limitations under the License. .mx_MessageComposer_upload object, .mx_MessageComposer_hangup object, .mx_MessageComposer_voicecall object, -.mx_MessageComposer_videocall object { +.mx_MessageComposer_videocall object, +.mx_MessageComposer_apps object { pointer-events: none; } diff --git a/src/skins/vector/img/icons-apps-active.svg b/src/skins/vector/img/icons-apps-active.svg new file mode 100644 index 0000000000..ea222d0511 --- /dev/null +++ b/src/skins/vector/img/icons-apps-active.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/skins/vector/img/icons-apps.svg b/src/skins/vector/img/icons-apps.svg new file mode 100644 index 0000000000..affd8e6408 --- /dev/null +++ b/src/skins/vector/img/icons-apps.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + From 7ea6157b6749d08e0917f6a5338a6ac2e62ef608 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 17 May 2017 21:16:15 +0100 Subject: [PATCH 02/13] App drawer styling --- .../css/matrix-react-sdk/views/rooms/_MessageComposer.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index ac49722711..b7de8dcd93 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -202,3 +202,8 @@ limitations under the License. padding: 4px 4px 4px 0; opacity: 0.8; } + +.mx_AppsDrawer { + height: 50px; + width: 100%; +} From 7a63cfd71746c5626f2ee0ae286939a0421ebcb6 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 17 May 2017 23:17:53 +0100 Subject: [PATCH 03/13] Add stylesheet for apps --- src/skins/vector/css/_components.scss | 1 + .../views/rooms/_AppsDrawer.scss | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss index c22fbc06a3..7d78404d58 100644 --- a/src/skins/vector/css/_components.scss +++ b/src/skins/vector/css/_components.scss @@ -51,6 +51,7 @@ @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss"; @import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss"; @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss"; +@import "./matrix-react-sdk/views/rooms/_AppsDrawer.scss"; @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss"; @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss"; @import "./matrix-react-sdk/views/voip/_CallView.scss"; diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss new file mode 100644 index 0000000000..7b20e4dbf8 --- /dev/null +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -0,0 +1,22 @@ +/* +Copyright 2015, 2016 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_AddWidget_button { + order: 2; + cursor: pointer; + padding-left: 12px; + padding-right: 12px; +} From 8afc9f9a09d9efd00d22dd3dfa3d929383880d68 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Fri, 19 May 2017 17:17:48 +0100 Subject: [PATCH 04/13] Add widget iframes and styling --- .../views/rooms/_AppsDrawer.scss | 44 +++++++++++++++++++ .../views/rooms/_MessageComposer.scss | 5 --- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 7b20e4dbf8..23c4ca4868 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -14,9 +14,53 @@ See the License for the specific language governing permissions and limitations under the License. */ +.mx_AppsDrawer { +} + +.mx_AppsContainer { + display: flex; + flex-direction: row; + align-items: center; +} + .mx_AddWidget_button { order: 2; cursor: pointer; padding-left: 12px; padding-right: 12px; + margin: 0 20px 20px 20px; + color: $accent-color; +} + +.mx_SetAppURLDialog_input { + border-radius: 3px; + border: 1px solid $input-border-color; + padding: 9px; + color: $primary-fg-color; + background-color: $primary-bg-color; + font-size: 15px; +} + +.mx_AppTile { + width: 48%; + margin: 2px 5px; + border: 1px solid $greyed-fg-color; + border-radius: 2px; + height: 200px; + // display: inline-block; +} + +.mx_AppTileMenuBar { + // height: 15px; + margin: 0; + padding: 2px 10px; + // background-color: $e2e-verified-color; + border-bottom: 1px solid $greyed-fg-color; +} + +.mx_AppTileBody iframe { + width: 100%; + height: 175px; + overflow: hidden; + border: none; } diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss index b7de8dcd93..ac49722711 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss @@ -202,8 +202,3 @@ limitations under the License. padding: 4px 4px 4px 0; opacity: 0.8; } - -.mx_AppsDrawer { - height: 50px; - width: 100%; -} From 998739a7dcc0c98b29fa19e016c5f825761a36ac Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Mon, 22 May 2017 18:00:40 +0100 Subject: [PATCH 05/13] Edit icon and styling --- .../views/rooms/_AppsDrawer.scss | 33 ++++++++++++++----- src/skins/vector/img/edit.svg | 13 ++++++++ 2 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 src/skins/vector/img/edit.svg diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 23c4ca4868..bf838b85ee 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -26,25 +26,26 @@ limitations under the License. .mx_AddWidget_button { order: 2; cursor: pointer; - padding-left: 12px; padding-right: 12px; - margin: 0 20px 20px 20px; + padding: 0; + margin: 0 0 5px 0; color: $accent-color; + font-size: 12px; } .mx_SetAppURLDialog_input { border-radius: 3px; border: 1px solid $input-border-color; padding: 9px; - color: $primary-fg-color; + color: $primary-hairline-color; background-color: $primary-bg-color; font-size: 15px; } .mx_AppTile { - width: 48%; - margin: 2px 5px; - border: 1px solid $greyed-fg-color; + width: 50%; + margin: 0 5px 2px 0; + border: 1px solid $primary-hairline-color; border-radius: 2px; height: 200px; // display: inline-block; @@ -55,12 +56,28 @@ limitations under the License. margin: 0; padding: 2px 10px; // background-color: $e2e-verified-color; - border-bottom: 1px solid $greyed-fg-color; + border-bottom: 1px solid $primary-hairline-color; + font-size: 10px; +} + +.mx_AppTileMenuBarWidgets { + float: right; +} +.mx_AppTileMenuBarWidget { + // pointer-events: none; + cursor: pointer; } .mx_AppTileBody iframe { width: 100%; - height: 175px; + height: 181px; overflow: hidden; border: none; } + +.mx_CloseAppWidget { +} + +.mx_AppTileMenuBarWidgetPadding { + margin-right: 5px; +} diff --git a/src/skins/vector/img/edit.svg b/src/skins/vector/img/edit.svg new file mode 100644 index 0000000000..a0be3454e1 --- /dev/null +++ b/src/skins/vector/img/edit.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + From ac9075a82a24234f8b6698f4070549b0d45abcd1 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 30 May 2017 10:47:29 +0100 Subject: [PATCH 06/13] Increase panel height --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index bf838b85ee..ae39e7f781 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -47,7 +47,7 @@ limitations under the License. margin: 0 5px 2px 0; border: 1px solid $primary-hairline-color; border-radius: 2px; - height: 200px; + height: 350px; // display: inline-block; } @@ -70,7 +70,7 @@ limitations under the License. .mx_AppTileBody iframe { width: 100%; - height: 181px; + height: 331px; overflow: hidden; border: none; } From 113533ad6148bcc6d22178293cf9e2dc1cfa5717 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 31 May 2017 10:08:23 +0100 Subject: [PATCH 07/13] Add styling for full-width widgets --- .../css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index ae39e7f781..0d8ada3633 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -51,6 +51,15 @@ limitations under the License. // display: inline-block; } +.mx_AppTileFullWidth { + width: 100%; + margin: 0 5px 2px 0; + border: 1px solid $primary-hairline-color; + border-radius: 2px; + height: 350px; + // display: inline-block; +} + .mx_AppTileMenuBar { // height: 15px; margin: 0; From 0ef800073bac036ed797ff10d6911ff2d39271e4 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Mon, 5 Jun 2017 18:21:52 +0100 Subject: [PATCH 08/13] App drawer styling --- .../matrix-react-sdk/views/rooms/_AppsDrawer.scss | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 0d8ada3633..db2175732f 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -47,16 +47,17 @@ limitations under the License. margin: 0 5px 2px 0; border: 1px solid $primary-hairline-color; border-radius: 2px; - height: 350px; + // height: 350px; // display: inline-block; } .mx_AppTileFullWidth { width: 100%; - margin: 0 5px 2px 0; + margin: 0; + padding: 0; border: 1px solid $primary-hairline-color; border-radius: 2px; - height: 350px; + // height: 350px; // display: inline-block; } @@ -79,9 +80,12 @@ limitations under the License. .mx_AppTileBody iframe { width: 100%; - height: 331px; + height: 350px; overflow: hidden; border: none; + padding: 0; + margin: 0; + display: block; } .mx_CloseAppWidget { From 76880e0de7a7e982283432d141c69acd5520f5e2 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Tue, 6 Jun 2017 23:46:27 +0100 Subject: [PATCH 09/13] App icon tile styling --- .../views/rooms/_AppsDrawer.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index db2175732f..840fd963ca 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -94,3 +94,20 @@ limitations under the License. .mx_AppTileMenuBarWidgetPadding { margin-right: 5px; } + +.mx_AppIconTile { + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; +} + +.mx_AppIconTile:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +.mx_AppIconTile_content { + padding: 2px 16px; +} + +.mx_AppIconTile_image { + width: 100%; +} From 9302c60b47699d42a5dcf08a7b7cca4a564be9f8 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 7 Jun 2017 10:55:35 +0100 Subject: [PATCH 10/13] App icon styling --- .../views/rooms/_AppsDrawer.scss | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 840fd963ca..cc473048c7 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -96,18 +96,48 @@ limitations under the License. } .mx_AppIconTile { + background-color: #666; + border: 1px solid #666; + width: 200px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; + border-radius: 3px; + margin: 5px; + display: inline-block; } .mx_AppIconTile:hover { - box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + border: 1px solid $accent-color; + box-shadow: 0 0 10px 5px rgba(200,200,200,0.5); } .mx_AppIconTile_content { padding: 2px 16px; + height: 60px; + overflow: hidden; +} + +.mx_AppIconTile_content h4 { + margin-top: 5px; + margin-bottom: 2px; +} + +.mx_AppIconTile_content p { + margin-top: 0; + margin-bottom: 5px; + font-size: smaller; } .mx_AppIconTile_image { - width: 100%; + width: 75%; + margin: 10px; + max-height: 100px; +} + +.mx_AppIconTile_imageContainer { + text-align: center; + width: 100%; + background-color: white; + border-radius: 3px 3px 0 0; + max-height: 155px; } From 272d36995bb3886bbc6ddcb932d184bd2fdc0485 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Wed, 7 Jun 2017 15:28:58 +0100 Subject: [PATCH 11/13] Fix active styling --- .../views/rooms/_AppsDrawer.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index cc473048c7..798c9af102 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -96,8 +96,8 @@ limitations under the License. } .mx_AppIconTile { - background-color: #666; - border: 1px solid #666; + background-color: $lightbox-bg-color; + border: 1px solid rgba(0, 0, 0, 0); width: 200px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; @@ -106,6 +106,11 @@ limitations under the License. display: inline-block; } +.mx_AppIconTile.mx_AppIconTile_active { + color: $accent-color; + border-color: $accent-color; +} + .mx_AppIconTile:hover { border: 1px solid $accent-color; box-shadow: 0 0 10px 5px rgba(200,200,200,0.5); @@ -129,9 +134,12 @@ limitations under the License. } .mx_AppIconTile_image { + padding: 10px; width: 75%; - margin: 10px; - max-height: 100px; + max-width:100px; + max-height:100px; + width: auto; + height: auto; } .mx_AppIconTile_imageContainer { From 3588ce7bc518177c0759893a229170ae68df8c14 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Mon, 19 Jun 2017 11:35:20 +0100 Subject: [PATCH 12/13] Fix app tile styling --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index 798c9af102..dceff2a37a 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -147,5 +147,8 @@ limitations under the License. width: 100%; background-color: white; border-radius: 3px 3px 0 0; - max-height: 155px; + height: 155px; + display: flex; + justify-content: center; + align-items: center; } From db70272902b607b19cb5ddcf5ff468788df55983 Mon Sep 17 00:00:00 2001 From: Richard Lewis Date: Mon, 19 Jun 2017 12:05:57 +0100 Subject: [PATCH 13/13] Fix custom widget form styling --- .../vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss index dceff2a37a..0fcabac1f4 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss @@ -152,3 +152,8 @@ limitations under the License. justify-content: center; align-items: center; } + +form.mx_Custom_Widget_Form div { + margin-top: 10px; + margin-bottom: 10px; +}