imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branches 'develop' and 't3chguy/context_menus' of github.com:matrix-org/matrix-react-sdk into t3chguy/context_menus

Browse source 
 Conflicts:
	src/components/views/context_menus/RoomTileContextMenu.js
This commit is contained in:
Michael Telatynski 2019-11-28 16:25:59 +00:00
commit 6d69ec17d9
214 changed files with 6620 additions and 1948 deletions
Download patch file Download diff file Expand all files Collapse all files

21
res/css/_common.scss
View file

@ -30,6 +30,11 @@ body {
color: $primary-fg-color;
border: 0px;
margin: 0px;
// needed to match the designs correctly on macOS
// see https://github.com/vector-im/riot-web/issues/11425
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
pre, code {
@ -550,6 +555,22 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $username-variant8-color;
}
@define-mixin mx_Tooltip_dark {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;
}
// This is a workaround for our mixins not supporting child selectors
.mx_Tooltip_dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}
@define-mixin mx_Settings_fullWidthField {
margin-right: 100px;
}

8
res/css/_components.scss
View file

@ -25,6 +25,7 @@
@import "./structures/_TabbedView.scss";
@import "./structures/_TagPanel.scss";
@import "./structures/_TagPanelButtons.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_TopLeftMenuButton.scss";
@import "./structures/_UploadBar.scss";
@import "./structures/_ViewSource.scss";
@ -48,6 +49,7 @@
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
@import "./views/context_menus/_TopLeftMenu.scss";
@import "./views/context_menus/_WidgetContextMenu.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@ -90,6 +92,8 @@
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss";
@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InlineSpinner.scss";
@import "./views/elements/_InteractiveTooltip.scss";
@ -124,6 +128,7 @@
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_MjolnirBody.scss";
@import "./views/messages/_ReactionsRow.scss";
@import "./views/messages/_ReactionsRowButton.scss";
@import "./views/messages/_ReactionsRowButtonTooltip.scss";
@ -170,7 +175,7 @@
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_IntegrationsManager.scss";
@import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_KeyBackupPanel.scss";
@import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss";
@ -183,6 +188,7 @@
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";

3
res/css/structures/_RoomView.scss
View file

@ -221,6 +221,9 @@ hr.mx_RoomView_myReadMarker {
position: relative;
top: -1px;
z-index: 1;
transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
width: 99%;
opacity: 1;
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

98
res/css/structures/_ToastContainer.scss Normal file
View file

@ -0,0 +1,98 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ToastContainer {
position: absolute;
top: 0;
left: 70px;
z-index: 101;
padding: 4px;
display: grid;
grid-template-rows: 1fr 14px 6px;
&.mx_ToastContainer_stacked::before {
content: "";
margin: 0 4px;
grid-row: 2 / 4;
grid-column: 1;
background-color: white;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
border-radius: 8px;
}
.mx_Toast_toast {
grid-row: 1 / 3;
grid-column: 1;
color: $primary-fg-color;
background-color: $primary-bg-color;
box-shadow: 0px 4px 12px $menu-box-shadow-color;
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 10px;
row-gap: 4px;
padding: 8px;
padding-right: 16px;
&.mx_Toast_hasIcon {
&::after {
content: "";
width: 20px;
height: 20px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
mask-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-fg-color;
}
h2, .mx_Toast_body {
grid-column: 2;
}
}
h2 {
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: 15px;
font-weight: 600;
}
.mx_Toast_body {
grid-column: 1 / 3;
grid-row: 2;
}
.mx_Toast_buttons {
display: flex;
}
.mx_Toast_description {
max-width: 400px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: 12px;
}
}
}

36
res/css/views/context_menus/_WidgetContextMenu.scss Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2019 The Matrix.org Foundaction C.I.C.
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_WidgetContextMenu {
padding: 6px;
.mx_WidgetContextMenu_option {
padding: 3px 6px 3px 6px;
cursor: pointer;
white-space: nowrap;
}
.mx_WidgetContextMenu_separator {
margin-top: 0;
margin-bottom: 0;
border-bottom-style: none;
border-left-style: none;
border-right-style: none;
border-top-style: solid;
border-top-width: 1px;
border-color: $menu-border-color;
}
}

4
res/css/views/dialogs/_TermsDialog.scss
View file

@ -16,10 +16,10 @@ limitations under the License.
/*
* To avoid visual glitching of two modals stacking briefly, we customise the
* terms dialog sizing when it will appear for the integrations manager so that
* terms dialog sizing when it will appear for the integration manager so that
* it gets the same basic size as the IM's own modal.
*/
.mx_TermsDialog_forIntegrationsManager .mx_Dialog {
.mx_TermsDialog_forIntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
box-sizing: border-box;

4
res/css/views/dialogs/_UserSettingsDialog.scss
View file

@ -45,6 +45,10 @@ limitations under the License.
mask-image: url('$(res)/img/feather-customised/flag.svg');
}
.mx_UserSettingsDialog_mjolnirIcon::before {
mask-image: url('$(res)/img/feather-customised/face.svg');
}
.mx_UserSettingsDialog_flairIcon::before {
mask-image: url('$(res)/img/feather-customised/flair.svg');
}

1
res/css/views/elements/_Field.scss
View file

@ -49,6 +49,7 @@ limitations under the License.
color: $primary-fg-color;
background-color: $primary-bg-color;
flex: 1;
min-width: 0;
}
.mx_Field select {

36
res/css/views/elements/_FormButton.scss Normal file
View file

@ -0,0 +1,36 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_FormButton {
line-height: 16px;
padding: 5px 15px;
font-size: 12px;
height: min-content;
&:not(:last-child) {
margin-right: 8px;
}
&.mx_AccessibleButton_kind_primary {
color: $accent-color;
background-color: $accent-bg-color;
}
&.mx_AccessibleButton_kind_danger {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
}

55
res/css/views/elements/_IconButton.scss Normal file
View file

@ -0,0 +1,55 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_IconButton {
width: 32px;
height: 32px;
border-radius: 100%;
background-color: $accent-bg-color;
// don't shrink or grow if in a flex container
flex: 0 0 auto;
&.mx_AccessibleButton_disabled {
background-color: none;
&::before {
background-color: lightgrey;
}
}
&:hover {
opacity: 90%;
}
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 55%;
background-color: $accent-color;
}
&.mx_IconButton_icon_check::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
}
&.mx_IconButton_icon_edit::before {
mask-image: url('$(res)/img/feather-customised/edit.svg');
}
}

20
res/css/views/messages/_MKeyVerificationRequest.scss
View file

@ -25,7 +25,7 @@ limitations under the License.
width: 12px;
height: 16px;
content: "";
mask: url("$(res)/img/e2e/verified.svg");
mask-image: url("$(res)/img/e2e/normal.svg");
mask-repeat: no-repeat;
mask-size: 100%;
margin-top: 4px;
@ -33,6 +33,7 @@ limitations under the License.
}
&.mx_KeyVerification_icon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $accent-color;
}
@ -64,23 +65,6 @@ limitations under the License.
.mx_KeyVerification_buttons {
align-items: center;
display: flex;
.mx_AccessibleButton_kind_decline {
color: $notice-primary-color;
background-color: $notice-primary-bg-color;
}
.mx_AccessibleButton_kind_accept {
color: $accent-color;
background-color: $accent-bg-color;
}
[role=button] {
margin: 10px;
padding: 7px 15px;
border-radius: 5px;
height: min-content;
}
}
.mx_KeyVerification_state {

19
res/css/views/messages/_MjolnirBody.scss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_MjolnirBody {
opacity: 0.4;
}

363
res/css/views/right_panel/_UserInfo.scss
View file

@ -20,156 +20,225 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
}
.mx_UserInfo_profile .mx_E2EIcon {
display: inline;
margin: auto;
padding-right: 25px;
mask-size: contain;
}
.mx_UserInfo_cancel {
height: 16px;
width: 16px;
padding: 10px 0 10px 10px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: 16px center;
background-color: $rightpanel-button-color;
}
.mx_UserInfo_profile h2 {
flex: 1;
overflow-x: auto;
max-height: 50px;
}
.mx_UserInfo h2 {
font-size: 16px;
font-weight: 600;
margin: 16px 0 8px 0;
}
.mx_UserInfo_container {
padding: 0 16px 16px 16px;
border-bottom: 1px solid lightgray;
}
.mx_UserInfo_memberDetailsContainer {
padding-bottom: 0;
}
.mx_UserInfo .mx_RoomTile_nameContainer {
width: 154px;
}
.mx_UserInfo .mx_RoomTile_badge {
display: none;
}
.mx_UserInfo .mx_RoomTile_name {
width: 160px;
}
.mx_UserInfo_avatar {
background: $tagpanel-bg-color;
}
.mx_UserInfo_avatar > img {
height: auto;
width: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
}
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in;
}
.mx_UserInfo h3 {
text-transform: uppercase;
color: $input-darker-fg-color;
font-weight: bold;
font-size: 12px;
margin: 4px 0;
}
.mx_UserInfo_profileField {
font-size: 15px;
position: relative;
text-align: center;
}
.mx_UserInfo_memberDetails {
text-align: center;
}
.mx_UserInfo_field {
cursor: pointer;
font-size: 15px;
color: $primary-fg-color;
margin-left: 8px;
line-height: 23px;
}
.mx_UserInfo_createRoom {
cursor: pointer;
display: flex;
align-items: center;
padding: 0 8px;
}
.mx_UserInfo_createRoom_label {
width: initial !important;
cursor: pointer;
}
.mx_UserInfo_statusMessage {
font-size: 11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.mx_UserInfo .mx_UserInfo_scrollContainer {
flex: 1;
padding-bottom: 16px;
}
.mx_UserInfo .mx_UserInfo_scrollContainer .mx_UserInfo_container {
padding-top: 16px;
padding-bottom: 0;
border-bottom: none;
}
.mx_UserInfo_container_header {
display: flex;
}
.mx_UserInfo_container_header_right {
position: relative;
margin-left: auto;
}
.mx_UserInfo_newDmButton {
background-color: $roomheader-addroom-bg-color;
border-radius: 10px; // 16/2 + 2 padding
height: 16px;
flex: 0 0 16px;
&::before {
background-color: $roomheader-addroom-fg-color;
mask: url('$(res)/img/icons-room-add.svg');
.mx_UserInfo_cancel {
height: 16px;
width: 16px;
padding: 10px 0 10px 10px;
cursor: pointer;
mask-image: url('$(res)/img/minimise.svg');
mask-repeat: no-repeat;
mask-position: center;
content: '';
mask-position: 16px center;
background-color: $rightpanel-button-color;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
h2 {
font-size: 18px;
font-weight: 600;
margin: 18px 0 0 0;
}
.mx_UserInfo_container {
padding: 0 16px 16px 16px;
border-bottom: 1px solid lightgray;
}
.mx_UserInfo_memberDetailsContainer {
padding-bottom: 0;
}
.mx_RoomTile_nameContainer {
width: 154px;
}
.mx_RoomTile_badge {
display: none;
}
.mx_RoomTile_name {
width: 160px;
}
.mx_UserInfo_avatar {
margin: 24px 32px 0 32px;
cursor: pointer;
}
.mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
}
.mx_UserInfo_avatar > div > div {
/* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */
padding-top: 100%;
height: 0;
border-radius: 100%;
box-sizing: content-box;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
cursor: zoom-in;
}
h3 {
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
font-size: 12px;
margin: 4px 0;
}
p {
margin: 5px 0;
}
.mx_UserInfo_profile {
text-align: center;
h2 {
font-size: 18px;
line-height: 25px;
flex: 1;
overflow-x: auto;
max-height: 50px;
display: flex;
justify-content: center;
align-items: center;
.mx_E2EIcon {
margin: 5px;
}
}
.mx_UserInfo_profileStatus {
margin-top: 12px;
}
}
.mx_UserInfo_memberDetails .mx_UserInfo_profileField {
display: flex;
justify-content: center;
align-items: center;
margin: 6px 0;
.mx_IconButton, .mx_Spinner {
margin-left: 20px;
width: 16px;
height: 16px;
&::before {
mask-size: 80%;
}
}
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
// try to make it the same height as the dropdown
margin: 11px 0 12px 0;
.mx_IconButton {
margin-left: 6px;
}
}
.mx_Field {
margin: 0;
}
}
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
line-height: 16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
color: $warning-color;
}
}
.mx_UserInfo_statusMessage {
font-size: 11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.mx_UserInfo_scrollContainer {
flex: 1 1 0;
padding-bottom: 16px;
}
.mx_UserInfo_scrollContainer .mx_UserInfo_container {
padding-top: 16px;
padding-bottom: 0;
border-bottom: none;
> :not(h3) {
margin-left: 8px;
}
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: 8px 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
color: $accent-color;
}
}
&.mx_UserInfo_device_unverified {
.mx_UserInfo_device_trusted {
color: $warning-color;
}
}
.mx_UserInfo_device_name {
flex: 1;
margin-right: 5px;
word-break: break-word;
}
}
// both for icon in expand button and device item
.mx_E2EIcon {
// don't squeeze
flex: 0 0 auto;
margin: 2px 5px 0 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
display: flex;
margin-top: 11px;
color: $accent-color;
}
}
.mx_UserInfo_verify {
display: block;
background-color: $accent-color;
color: $accent-fg-color;
border-radius: 4px;
padding: 7px 1.5em;
text-align: center;
margin: 16px 0;
}
}

94
res/css/views/rooms/_AppsDrawer.scss
View file

@ -153,40 +153,12 @@ $AppsDrawerBodyHeight: 273px;
background-color: $accent-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
mask-image: url('$(res)/img/feather-customised/widget/refresh.svg');
mask-size: 100%;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
mask-image: url('$(res)/img/feather-customised/widget/bin.svg');
background-color: $warning-color;
}
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
}
/* delete ? */
.mx_AppTileMenuBarWidget {
cursor: pointer;
width: 10px;
height: 10px;
padding: 1px;
transition-duration: 500ms;
border: 1px solid transparent;
.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
mask-image: url('$(res)/img/icon_context.svg');
}
.mx_AppTileMenuBarWidgetDelete {
@ -294,49 +266,61 @@ form.mx_Custom_Widget_Form div {
.mx_AppPermissionWarning {
text-align: center;
background-color: $primary-bg-color;
background-color: $widget-menu-bar-bg-color;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 16px;
}
.mx_AppPermissionWarningImage {
margin: 10px 0;
.mx_AppPermissionWarning_row {
margin-bottom: 12px;
}
.mx_AppPermissionWarningImage img {
width: 100px;
.mx_AppPermissionWarning_smallText {
font-size: 12px;
}
.mx_AppPermissionWarningText {
max-width: 90%;
margin: 10px auto 10px auto;
color: $primary-fg-color;
.mx_AppPermissionWarning_bolder {
font-weight: 600;
}
.mx_AppPermissionWarningTextLabel {
font-weight: bold;
display: block;
.mx_AppPermissionWarning h4 {
margin: 0;
padding: 0;
}
.mx_AppPermissionWarningTextURL {
.mx_AppPermissionWarning_helpIcon {
margin-top: 1px;
margin-right: 2px;
width: 10px;
height: 10px;
display: inline-block;
max-width: 100%;
color: $accent-color;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_AppPermissionButton {
border: none;
padding: 5px 20px;
border-radius: 5px;
background-color: $button-bg-color;
color: $button-fg-color;
cursor: pointer;
.mx_AppPermissionWarning_helpIcon::before {
display: inline-block;
background-color: $accent-color;
mask-repeat: no-repeat;
mask-size: 12px;
width: 12px;
height: 12px;
mask-position: center;
content: '';
vertical-align: middle;
mask-image: url('$(res)/img/feather-customised/help-circle.svg');
}
.mx_AppPermissionWarning_tooltip {
@mixin mx_Tooltip_dark;
ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}
.mx_AppLoading {

30
res/css/views/rooms/_E2EIcon.scss
View file

@ -15,19 +15,29 @@ limitations under the License.
*/
.mx_E2EIcon {
width: 25px;
height: 25px;
mask-repeat: no-repeat;
mask-position: center 0;
width: 16px;
height: 16px;
margin: 0 9px;
position: relative;
display: block;
}
.mx_E2EIcon_verified {
mask-image: url('$(res)/img/e2e/lock-verified.svg');
background-color: $accent-color;
.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-repeat: no-repeat;
background-size: contain;
}
.mx_E2EIcon_warning {
mask-image: url('$(res)/img/e2e/lock-warning.svg');
background-color: $warning-color;
.mx_E2EIcon_verified::after {
background-image: url('$(res)/img/e2e/verified.svg');
}
.mx_E2EIcon_warning::after {
background-image: url('$(res)/img/e2e/warning.svg');
}

1
res/css/views/rooms/_MemberDeviceInfo.scss
View file

@ -25,6 +25,7 @@ limitations under the License.
width: 12px;
height: 12px;
mask-repeat: no-repeat;
mask-size: 100%;
}
.mx_MemberDeviceInfo_icon_blacklisted {
mask-image: url('$(res)/img/e2e/blacklisted.svg');

7
res/css/views/rooms/_MessageComposer.scss
View file

@ -23,10 +23,6 @@ limitations under the License.
padding-left: 84px;
}
.mx_MessageComposer_wrapper.mx_MessageComposer_hasE2EIcon {
padding-left: 109px;
}
.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
@ -78,7 +74,8 @@ limitations under the License.
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 60px;
background-color: $composer-e2e-icon-color;
margin-right: 0; // Counteract the E2EIcon class
margin-left: 3px; // Counteract the E2EIcon class
}
.mx_MessageComposer_noperm_error {

1
res/css/views/rooms/_MessageComposerFormatBar.scss
View file

@ -40,6 +40,7 @@ limitations under the License.
&:hover {
border-color: $message-action-bar-hover-border-color;
z-index: 1;
}
&:first-child {

4
res/css/views/rooms/_RoomHeader.scss
View file

@ -17,6 +17,10 @@ limitations under the License.
.mx_RoomHeader {
flex: 0 0 52px;
border-bottom: 1px solid $primary-hairline-color;
.mx_E2EIcon {
margin: 0 5px;
}
}
.mx_RoomHeader_wrapper {

10
res/css/views/settings/_IntegrationsManager.scss → res/css/views/settings/_IntegrationManager.scss
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_IntegrationsManager .mx_Dialog {
.mx_IntegrationManager .mx_Dialog {
width: 60%;
height: 70%;
overflow: hidden;
@ -23,22 +23,22 @@ limitations under the License.
max-height: initial;
}
.mx_IntegrationsManager iframe {
.mx_IntegrationManager iframe {
background-color: #fff;
border: 0px;
width: 100%;
height: 100%;
}
.mx_IntegrationsManager_loading h3 {
.mx_IntegrationManager_loading h3 {
text-align: center;
}
.mx_IntegrationsManager_error {
.mx_IntegrationManager_error {
text-align: center;
padding-top: 20px;
}
.mx_IntegrationsManager_error h3 {
.mx_IntegrationManager_error h3 {
color: $warning-color;
}

12
res/css/views/settings/_SetIntegrationManager.scss
View file

@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_SetIntegrationManager .mx_Field_input {
@mixin mx_Settings_fullWidthField;
}
.mx_SetIntegrationManager {
margin-top: 10px;
margin-bottom: 10px;
@ -32,6 +28,10 @@ limitations under the License.
padding-left: 5px;
}
.mx_SetIntegrationManager_tooltip {
@mixin mx_Settings_tooltip;
.mx_SetIntegrationManager .mx_ToggleSwitch {
display: inline-block;
float: right;
top: 9px;
@mixin mx_Settings_fullWidthField;
}

23
res/css/views/settings/tabs/user/_MjolnirUserSettingsTab.scss Normal file
View file

@ -0,0 +1,23 @@
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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_MjolnirUserSettingsTab .mx_Field {
@mixin mx_Settings_fullWidthField;
}
.mx_MjolnirUserSettingsTab_listItem {
margin-bottom: 2px;
}