Styling for apps / widgets

src/skins/vector/css/_components.scss

@@ -55,6 +55,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";

src/skins/vector/css/matrix-react-sdk/views/rooms/_AppsDrawer.scss

@@ -0,0 +1,159 @@
+/*
+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_AppsDrawer {
+}
+
+.mx_AppsContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mx_AddWidget_button {
+    order: 2;
+    cursor: pointer;
+    padding-right: 12px;
+    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-hairline-color;
+    background-color: $primary-bg-color;
+    font-size: 15px;
+}
+
+.mx_AppTile {
+    width: 50%;
+    margin: 0 5px 2px 0;
+    border: 1px solid $primary-hairline-color;
+    border-radius: 2px;
+    // height: 350px;
+    // display: inline-block;
+}
+
+.mx_AppTileFullWidth {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border: 1px solid $primary-hairline-color;
+    border-radius: 2px;
+    // height: 350px;
+    // display: inline-block;
+}
+
+.mx_AppTileMenuBar {
+    // height: 15px;
+    margin: 0;
+    padding: 2px 10px;
+    // background-color: $e2e-verified-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: 350px;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: block;
+}
+
+.mx_CloseAppWidget {
+}
+
+.mx_AppTileMenuBarWidgetPadding {
+    margin-right: 5px;
+}
+
+.mx_AppIconTile {
+    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;
+    border-radius: 3px;
+    margin: 5px;
+    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);
+}
+
+.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 {
+    padding: 10px;
+    width: 75%;
+    max-width:100px;
+    max-height:100px;
+    width: auto;
+    height: auto;
+}
+
+.mx_AppIconTile_imageContainer {
+    text-align: center;
+    width: 100%;
+    background-color: white;
+    border-radius: 3px 3px 0 0;
+    height: 155px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+form.mx_Custom_Widget_Form div {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

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;
 }