Update feedback prompt to match designs
This commit is contained in:
Michael Telatynski
parent
6123ccb2eb
commit
a5606c72de
4 changed files with 42 additions and 102 deletions
|
|
@ -340,18 +340,12 @@ $SpaceRoomViewInnerWidth: 428px;
|
|||
flex: 0;
|
||||
}
|
||||
|
||||
.mx_SpaceFeedbackPrompt_topRight {
|
||||
.mx_SpaceFeedbackPrompt {
|
||||
padding: 7px; // 8px - 1px border
|
||||
border: 1px solid $menu-border-color;
|
||||
border-radius: 8px;
|
||||
color: $secondary-fg-color;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
float: right;
|
||||
|
||||
& + .mx_BaseAvatar {
|
||||
clear: both;
|
||||
}
|
||||
width: max-content;
|
||||
margin: 0 0 -40px auto; // collapse its own height to not push other components down
|
||||
}
|
||||
|
||||
.mx_SpaceRoomDirectory_list {
|
||||
|
|
|
|||
|
|
@ -104,61 +104,23 @@ $spacePanelWidth: 71px;
|
|||
margin-top: 18px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
> hr {
|
||||
border: none;
|
||||
border-top: 1px solid $input-border-color;
|
||||
margin-bottom: 12px;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
> span {
|
||||
color: $secondary-fg-color;
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
> span {
|
||||
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;
|
||||
}
|
||||
}
|
||||
.mx_AccessibleButton_kind_link {
|
||||
color: $accent-color;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-left: 8px;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,9 +62,8 @@ import IconizedContextMenu, {
|
|||
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
|
||||
import { BetaPill } from "../views/beta/BetaCard";
|
||||
import { UserTab } from "../views/dialogs/UserSettingsDialog";
|
||||
import Modal from "../../Modal";
|
||||
import BetaFeedbackDialog from "../views/dialogs/BetaFeedbackDialog";
|
||||
import { EffectiveMembership, getEffectiveMembership } from "../../utils/membership";
|
||||
import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
|
||||
|
||||
interface IProps {
|
||||
space: Room;
|
||||
|
|
@ -393,19 +392,7 @@ const SpaceLanding = ({ space }) => {
|
|||
};
|
||||
|
||||
return <div className="mx_SpaceRoomView_landing">
|
||||
<div className="mx_SpaceFeedbackPrompt_topRight">
|
||||
{ _t("Spaces are a new feature.") }
|
||||
<AccessibleButton
|
||||
kind="link"
|
||||
onClick={() => {
|
||||
Modal.createTrackedDialog("Beta Feedback", "feature_spaces", BetaFeedbackDialog, {
|
||||
featureId: "feature_spaces",
|
||||
});
|
||||
}}
|
||||
>
|
||||
{ _t("Give feedback.") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<SpaceFeedbackPrompt />
|
||||
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
|
||||
<div className="mx_SpaceRoomView_landing_name">
|
||||
<RoomName room={space}>
|
||||
|
|
|
|||
|
|
@ -66,33 +66,30 @@ const nameToAlias = (name: string, domain: string): string => {
|
|||
};
|
||||
|
||||
// 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;
|
||||
|
||||
return <div className="mx_SpaceFeedbackPrompt">
|
||||
<hr />
|
||||
<div>
|
||||
<span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span>
|
||||
<AccessibleButton
|
||||
kind="link"
|
||||
onClick={() => {
|
||||
if (onClick) onClick();
|
||||
Modal.createTrackedDialog("Spaces Feedback", "", GenericFeatureFeedbackDialog, {
|
||||
title: _t("Spaces feedback"),
|
||||
subheading: _t("Thank you for trying Spaces. " +
|
||||
"Your feedback will help inform the next versions."),
|
||||
rageshakeLabel: "spaces-feedback",
|
||||
rageshakeData: Object.fromEntries([
|
||||
"feature_spaces.all_rooms",
|
||||
"feature_spaces.space_member_dms",
|
||||
"feature_spaces.space_dm_badges",
|
||||
].map(k => [k, SettingsStore.getValue(k)])),
|
||||
});
|
||||
}}
|
||||
>
|
||||
{ _t("Give feedback.") }
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<span className="mx_SpaceFeedbackPrompt_text">{ _t("Spaces are a new feature.") }</span>
|
||||
<AccessibleButton
|
||||
kind="link"
|
||||
onClick={() => {
|
||||
if (onClick) onClick();
|
||||
Modal.createTrackedDialog("Spaces Feedback", "", GenericFeatureFeedbackDialog, {
|
||||
title: _t("Spaces feedback"),
|
||||
subheading: _t("Thank you for trying Spaces. " +
|
||||
"Your feedback will help inform the next versions."),
|
||||
rageshakeLabel: "spaces-feedback",
|
||||
rageshakeData: Object.fromEntries([
|
||||
"feature_spaces.all_rooms",
|
||||
"feature_spaces.space_member_dms",
|
||||
"feature_spaces.space_dm_badges",
|
||||
].map(k => [k, SettingsStore.getValue(k)])),
|
||||
});
|
||||
}}
|
||||
>
|
||||
{ _t("Give feedback.") }
|
||||
</AccessibleButton>
|
||||
</div>;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue