Merge branch 'experimental' into travis/settings/positive

res/css/_components.scss

@@ -52,10 +52,12 @@
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
+@import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SetMxIdDialog.scss";
 @import "./views/dialogs/_SetPasswordDialog.scss";
+@import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
@@ -70,6 +72,7 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_Field.scss";
+@import "./views/elements/_HexVerify.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
@@ -136,7 +139,9 @@
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
 @import "./views/settings/tabs/_GeneralSettingsTab.scss";
+@import "./views/settings/tabs/_HelpSettingsTab.scss";
 @import "./views/settings/tabs/_PreferencesSettingsTab.scss";
+@import "./views/settings/tabs/_SecuritySettingsTab.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/_VoiceSettingsTab.scss";
 @import "./views/voip/_CallView.scss";

res/css/structures/_RoomSubList.scss

@@ -32,34 +32,13 @@ limitations under the License.
 */
 
 .mx_RoomSubList {
-    min-height: 31px;
-    flex: 0 10000 auto;
     display: flex;
     flex-direction: column;
 }
 
-.mx_RoomSubList.resized-sized {
-    /*
-    flex-basis to 0 so sublists
-    are not shrinking/growing relative
-    to their content (as would be the case with auto),
-    as this intervenes with sizing an item exactly
-    when not available space is available
-    in the flex container
-    */
-    flex: 1 1 0;
-}
-
-.mx_RoomSubList_nonEmpty {
-    min-height: 74px;
-
-    .mx_AutoHideScrollbar_offset {
-        padding-bottom: 4px;
-    }
-}
 
-.mx_RoomSubList_hidden {
-    flex: none !important;
+.mx_RoomSubList_nonEmpty .mx_AutoHideScrollbar_offset {
+    padding-bottom: 4px;
 }
 
 .mx_RoomSubList_labelContainer {

res/css/structures/_TabbedView.scss

@@ -24,7 +24,8 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabels {
-  width: 136px;
+  width: 150px;
+  max-width: 150px;
   height: 100%;
   color: $tab-label-fg-color;
 }
@@ -36,7 +37,7 @@ limitations under the License.
   border-radius: 3px;
   font-size: 12px;
   font-weight: 600;
-  height: 20px;
+  min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
   margin-bottom: 6px;
   position: relative;
 }

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -0,0 +1,34 @@
+/*
+Copyright 2019 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.
+*/
+
+// ICONS
+// ==========================================================
+
+.mx_RoomSettingsDialog_settingsIcon:before {
+  mask-image: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_RoomSettingsDialog_securityIcon:before {
+  mask-image: url('$(res)/img/feather-icons/lock.svg');
+}
+
+.mx_RoomSettingsDialog_rolesIcon:before {
+  mask-image: url('$(res)/img/feather-icons/users-sm.svg');
+}
+
+.mx_RoomSettingsDialog_warningIcon:before {
+  mask-image: url('$(res)/img/feather-icons/warning-triangle.svg');
+}

res/css/views/dialogs/_SettingsDialog.scss

@@ -0,0 +1,70 @@
+/*
+Copyright 2019 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_SettingsDialog {
+  .mx_Dialog {
+    max-width: 784px; // 900px - 58px (left padding) - 58px (right padding)
+    width: 80%;
+    height: 80%;
+    border-radius: 4px;
+
+    .mx_TabbedView_tabLabels {
+      // Force the sidebar to be always visible, letting the rest of the content scroll
+      position: fixed;
+    }
+
+    .mx_TabbedView_tabPanel {
+      max-width: 485px;
+      margin-left: 206px; // 70px margin + 136px for the sidebar
+    }
+
+    .mx_SettingsDialog_header {
+      font-size: 24px;
+      display: block;
+      text-align: center;
+      color: $dialog-title-fg-color;
+      margin-top: 16px;
+      margin-bottom: 24px;
+      padding: 0;
+    }
+
+    .mx_SettingsDialog_close {
+      position: absolute;
+      top: 16px;
+      right: 25px;
+    }
+
+    .mx_SettingsDialog_closeIcon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+    }
+
+    .mx_SettingsDialog_closeIcon:before {
+      mask: url('$(res)/img/feather-icons/cancel.svg');
+      background-color: $dialog-close-fg-color;
+      mask-repeat: no-repeat;
+      mask-size: 16px;
+      mask-position: center;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+}

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -1,39 +1,18 @@
-.mx_UserSettingsDialog_header {
-  font-size: 24px;
-  display: block;
-  text-align: center;
-  color: $dialog-title-fg-color;
-  margin-top: 16px;
-  margin-bottom: 24px;
-  padding: 0;
-}
+/*
+Copyright 2019 New Vector Ltd.
 
-.mx_UserSettingsDialog_close {
-  position: absolute;
-  top: 16px;
-  right: 25px;
-}
+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
 
-.mx_UserSettingsDialog_closeIcon {
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-}
-
-.mx_UserSettingsDialog_closeIcon:before {
-  mask: url('$(res)/img/feather-icons/cancel.svg');
-  background-color: $dialog-close-fg-color;
-  mask-repeat: no-repeat;
-  mask-size: 16px;
-  mask-position: center;
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+    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.
+*/
 
 // ICONS
 // ==========================================================

res/css/views/elements/_HexVerify.scss

@@ -0,0 +1,34 @@
+/*
+Copyright 2019 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_HexVerify {
+    text-align: center;
+}
+
+.mx_HexVerify_pair {
+    display: inline-block;
+    font-weight: bold;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.mx_HexVerify_pair_verified {
+    color: $accent-color;
+}
+
+.mx_HexVerify_pair:hover{
+    color: $accent-color;
+}

res/css/views/elements/_ToggleSwitch.scss

@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// TODO: Fancy transitions
-
 .mx_ToggleSwitch {
+    transition: background-color 0.20s ease-out 0.1s;
     width: 48px;
     height: 24px;
     border-radius: 14px;
@@ -33,6 +32,7 @@ limitations under the License.
 }
 
 .mx_ToggleSwitch_ball {
+    transition: left 0.15s ease-out 0.1s;
     margin: 2px;
     width: 20px;
     height: 20px;
@@ -47,5 +47,5 @@ limitations under the License.
 }
 
 .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
-    right: 2px;
+    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
 }

res/css/views/rooms/_RoomList.scss

@@ -17,13 +17,14 @@ limitations under the License.
 
 .mx_RoomList {
     /* take up remaining space below TopLeftMenu */
-    flex: 1 1 auto;
-    /* use flexbox to layout sublists */
-    display: flex;
-    flex-direction: column;
+    flex: 1;
     min-height: 0;
 }
 
+.mx_RoomList .mx_ResizeHandle {
+    position: relative;
+}
+
 .mx_SearchBox {
     flex: none;
 }

res/css/views/settings/tabs/_HelpSettingsTab.scss

@@ -0,0 +1,24 @@
+/*
+Copyright 2019 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_HelpSettingsTab_debugButton {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mx_HelpSettingsTab span.mx_AccessibleButton {
+  word-break: break-word;
+}