PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update feedback prompt to match designs

Browse source
This commit is contained in:
Michael Telatynski 2021-07-28 17:56:57 +01:00
parent 6123ccb2eb
commit a5606c72de
4 changed files with 42 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/structures/_SpaceRoomView.scss
View file

@ -340,18 +340,12 @@ $SpaceRoomViewInnerWidth: 428px;
flex: 0; flex: 0;
} }
.mx_SpaceFeedbackPrompt_topRight { .mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border padding: 7px; // 8px - 1px border
border: 1px solid $menu-border-color; border: 1px solid $menu-border-color;
border-radius: 8px; border-radius: 8px;
color: $secondary-fg-color; width: max-content;
font-size: $font-15px; margin: 0 0 -40px auto; // collapse its own height to not push other components down
line-height: $font-24px;
float: right;
& + .mx_BaseAvatar {
clear: both;
}
} }
.mx_SpaceRoomDirectory_list { .mx_SpaceRoomDirectory_list {

70
res/css/views/spaces/_SpaceCreateMenu.scss
View file

@ -104,61 +104,23 @@ $spacePanelWidth: 71px;
margin-top: 18px; margin-top: 18px;
margin-bottom: 12px; margin-bottom: 12px;
> hr { font-size: $font-15px;
border: none; line-height: $font-24px;
border-top: 1px solid $input-border-color;
margin-bottom: 12px; > span {
color: $secondary-fg-color;
position: relative;
font-size: inherit;
line-height: inherit;
margin-right: auto;
} }
> div { .mx_AccessibleButton_kind_link {
display: flex; color: $accent-color;
flex-direction: row; position: relative;
font-size: $font-15px; padding: 0;
line-height: $font-24px; margin-left: 8px;
font-size: inherit;
> span { line-height: inherit;
color: $secondary-fg-color;
position: relative;
padding-left: 32px;
font-size: inherit;
line-height: inherit;
margin-right: auto;
&::before {
content: '';
position: absolute;
left: 0;
top: 2px;
height: 20px;
width: 20px;
background-color: $secondary-fg-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
mask-position: center;
}
}
.mx_AccessibleButton_kind_link {
color: $accent-color;
position: relative;
padding: 0 0 0 24px;
margin-left: 8px;
font-size: inherit;
line-height: inherit;
&::before {
content: '';
position: absolute;
left: 0;
height: 16px;
width: 16px;
background-color: $accent-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
mask-position: center;
}
}
} }
} }

17
src/components/structures/SpaceRoomView.tsx
View file

@ -62,9 +62,8 @@ import IconizedContextMenu, {
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { BetaPill } from "../views/beta/BetaCard"; import { BetaPill } from "../views/beta/BetaCard";
import { UserTab } from "../views/dialogs/UserSettingsDialog"; import { UserTab } from "../views/dialogs/UserSettingsDialog";
import Modal from "../../Modal";
import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership"; import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
interface IProps { interface IProps {
space: Room; space: Room;
@ -393,19 +392,7 @@ const SpaceLanding = ({ space }) => {
}; };
return <div className="mx_SpaceRoomView_landing"> return <div className="mx_SpaceRoomView_landing">
<div className="mx_SpaceFeedbackPrompt_topRight"> <SpaceFeedbackPrompt />
{ _t("Spaces are a new feature.") }&nbsp;
<AccessibleButton
kind="link"
onClick={() => {
Modal.createTrackedDialog("Beta Feedback", "feature_spaces", BetaFeedbackDialog, {
featureId: "feature_spaces",
});
}}
>
{ _t("Give feedback.") }
</AccessibleButton>
</div>
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} /> <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
<div className="mx_SpaceRoomView_landing_name"> <div className="mx_SpaceRoomView_landing_name">
<RoomName room={space}> <RoomName room={space}>

45
src/components/views/spaces/SpaceCreateMenu.tsx
View file

@ -66,33 +66,30 @@ const nameToAlias = (name: string, domain: string): string => {
}; };
// XXX: Temporary for the Spaces release only // XXX: Temporary for the Spaces release only
const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => { export const SpaceFeedbackPrompt = ({ onClick }: { onClick?: () => void }) => {
if (!SdkConfig.get().bug_report_endpoint_url) return null; if (!SdkConfig.get().bug_report_endpoint_url) return null;
return <div className="mx_SpaceFeedbackPrompt"> return <div className="mx_SpaceFeedbackPrompt">
<hr /> <span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span>
<div> <AccessibleButton
<span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span> kind="link"
<AccessibleButton onClick={() => {
kind="link" if (onClick) onClick();
onClick={() => { Modal.createTrackedDialog("Spaces Feedback", "", GenericFeatureFeedbackDialog, {
if (onClick) onClick(); title: _t("Spaces feedback"),
Modal.createTrackedDialog("Spaces Feedback", "", GenericFeatureFeedbackDialog, { subheading: _t("Thank you for trying Spaces. " +
title: _t("Spaces feedback"), "Your feedback will help inform the next versions."),
subheading: _t("Thank you for trying Spaces. " + rageshakeLabel: "spaces-feedback",
"Your feedback will help inform the next versions."), rageshakeData: Object.fromEntries([
rageshakeLabel: "spaces-feedback", "feature_spaces.all_rooms",
rageshakeData: Object.fromEntries([ "feature_spaces.space_member_dms",
"feature_spaces.all_rooms", "feature_spaces.space_dm_badges",
"feature_spaces.space_member_dms", ].map(k => [k, SettingsStore.getValue(k)])),
"feature_spaces.space_dm_badges", });
].map(k => [k, SettingsStore.getValue(k)])), }}
}); >
}} { _t("Give feedback.") }
> </AccessibleButton>
{ _t("Give feedback.") }
</AccessibleButton>
</div>
</div>; </div>;
}; };