Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Split mx_AppPermissionWarning on _AppsDrawer.pcss into two classes #10824

Merged
merged 9 commits into from
May 16, 2023
Merged

Split mx_AppPermissionWarning on _AppsDrawer.pcss into two classes #10824

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c9b45e4
Separate mx_AppWarning and mx_AppPermission
luixxiul May 8, 2023
c855e4d
Remove mx_AppPermission_row for a type selector
luixxiul May 8, 2023
3c1370d
Nest: mx_AppPermission
luixxiul May 8, 2023
eecade7
Run prettier
luixxiul May 8, 2023
23e6b02
Create a CSS file for AppPermission
luixxiul May 8, 2023
7af06ad
Merge branch 'develop' into AppPermission
luixxiul May 11, 2023
5a5c51f
Merge remote-tracking branch 'upstream/develop' into AppPermission
luixxiul May 11, 2023
82f3ea8
Merge branch 'develop' into AppPermission
luixxiul May 11, 2023
272feb3
Merge branch 'develop' into AppPermission
luixxiul May 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions res/css/_components.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
@import "./components/views/dialogs/polls/_PollDetailHeader.pcss";
@import "./components/views/dialogs/polls/_PollListItem.pcss";
@import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
@import "./components/views/elements/_AppPermission.pcss";
@import "./components/views/elements/_FilterDropdown.pcss";
@import "./components/views/elements/_FilterTabGroup.pcss";
@import "./components/views/elements/_LearnMore.pcss";
Expand Down
77 changes: 77 additions & 0 deletions res/css/components/views/elements/_AppPermission.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 - 2023 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_AppPermission {
> div {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mx_AppPermissionWarning_row has been added to every div so I guess the type selector should work better.

margin-bottom: 12px;
}

h4 {
margin: 0;
padding: 0;
}

.mx_AppPermission_smallText {
font-size: $font-12px;
}

.mx_AppPermission_bolder {
font-weight: var(--font-semi-bold);
}

.mx_AppPermission_helpIcon {
margin-top: 1px;
margin-right: 2px;
width: 10px;
height: 10px;
display: inline-block;

&::before {
display: inline-block;
background-color: $accent;
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_AppPermission_tooltip {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;

&.mx_AppPermission_tooltip--dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}

ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}
}
62 changes: 2 additions & 60 deletions res/css/views/rooms/_AppsDrawer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,8 @@ $MinWidth: 240px;
display: block;
}

.mx_AppPermissionWarning {
.mx_AppWarning,
.mx_AppPermission {
text-align: center;
display: flex;
height: 100%;
Expand All @@ -320,65 +321,6 @@ $MinWidth: 240px;
font-size: $font-16px;
}

.mx_AppPermissionWarning_row {
margin-bottom: 12px;
}

.mx_AppPermissionWarning_smallText {
font-size: $font-12px;
}

.mx_AppPermissionWarning_bolder {
font-weight: var(--font-semi-bold);
}

.mx_AppPermissionWarning h4 {
margin: 0;
padding: 0;
}

.mx_AppPermissionWarning_helpIcon {
margin-top: 1px;
margin-right: 2px;
width: 10px;
height: 10px;
display: inline-block;
}

.mx_AppPermissionWarning_helpIcon::before {
display: inline-block;
background-color: $accent;
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 {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;

&.mx_AppPermissionWarning_tooltip--dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}

ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}

.mx_AppTile_loading {
display: flex;
flex-direction: column;
Expand Down
22 changes: 10 additions & 12 deletions src/components/views/elements/AppPermission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,9 @@ export default class AppPermission extends React.Component<IProps, IState> {
const warningTooltip = (
<TextWithTooltip
tooltip={warningTooltipText}
tooltipClass="mx_AppPermissionWarning_tooltip mx_AppPermissionWarning_tooltip--dark"
tooltipClass="mx_AppPermission_tooltip mx_AppPermission_tooltip--dark"
>
<span className="mx_AppPermissionWarning_helpIcon" />
<span className="mx_AppPermission_helpIcon" />
</TextWithTooltip>
);

Expand All @@ -137,20 +137,18 @@ export default class AppPermission extends React.Component<IProps, IState> {
const encryptionWarning = this.props.isRoomEncrypted ? _t("Widgets do not use message encryption.") : null;

return (
<div className="mx_AppPermissionWarning">
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_bolder mx_AppPermissionWarning_smallText">
{_t("Widget added by")}
</div>
<div className="mx_AppPermissionWarning_row">
<div className="mx_AppPermission">
<div className="mx_AppPermission_bolder mx_AppPermission_smallText">{_t("Widget added by")}</div>
<div>
{avatar}
<h4 className="mx_AppPermissionWarning_bolder">{displayName}</h4>
<div className="mx_AppPermissionWarning_smallText">{userId}</div>
<h4 className="mx_AppPermission_bolder">{displayName}</h4>
<div className="mx_AppPermission_smallText">{userId}</div>
</div>
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText">{warning}</div>
<div className="mx_AppPermissionWarning_row mx_AppPermissionWarning_smallText">
<div className="mx_AppPermission_smallText">{warning}</div>
<div className="mx_AppPermission_smallText">
{_t("This widget may use cookies.")}&nbsp;{encryptionWarning}
</div>
<div className="mx_AppPermissionWarning_row">
<div>
<AccessibleButton kind="primary_sm" onClick={this.props.onPermissionGranted}>
{_t("Continue")}
</AccessibleButton>
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/elements/AppWarning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface IProps {

const AppWarning: React.FC<IProps> = (props) => {
return (
<div className="mx_AppPermissionWarning">
<div className="mx_AppWarning">
<div>
<img src={require("../../../../res/img/warning.svg").default} alt="" />
</div>
Expand Down