Add iconography to Create Room Dialog dropdown

Remove unused old stale feather-customised/globe.svg
This commit is contained in:
Michael Telatynski 2021-07-21 11:20:41 +01:00
parent 390b05617c
commit fd64d37305
7 changed files with 47 additions and 16 deletions

View file

@ -120,6 +120,44 @@ limitations under the License.
.mx_Dropdown_input {
border: 1px solid $input-border-color;
}
.mx_Dropdown_option {
font-size: $font-14px;
line-height: $font-32px;
height: 32px;
> div {
padding-left: 30px;
position: relative;
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 6px;
top: 8px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-fg-color;
}
}
}
.mx_CreateRoomDialog_dropdown_invite::before {
mask-image: url('$(res)/img/element-icons/lock.svg');
mask-size: contain;
}
.mx_CreateRoomDialog_dropdown_public::before {
mask-image: url('$(res)/img/globe.svg');
mask-size: 12px;
}
.mx_CreateRoomDialog_dropdown_restricted::before {
mask-image: url('$(res)/img/element-icons/community-members.svg');
mask-size: contain;
}
}
}

View file

@ -1,7 +0,0 @@
<svg height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg">
<g style="stroke:#454545;stroke-width:.8;fill:none;fill-rule:evenodd;stroke-linecap:round;stroke-linejoin:round" transform="translate(1 1)">
<circle cx="5" cy="5" r="5"/>
<path d="m0 5h10"/>
<path d="m5 0c1.25064019 1.36917645 1.96137638 3.14601693 2 5-.03862362 1.85398307-.74935981 3.63082355-2 5-1.25064019-1.36917645-1.96137638-3.14601693-2-5 .03862362-1.85398307.74935981-3.63082355 2-5z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 524 B

View file

@ -322,16 +322,16 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
}
const options = [
<div key={JoinRule.Invite} className="">
<div key={JoinRule.Invite} className="mx_CreateRoomDialog_dropdown_invite">
{ _t("Private room (invite only)") }
</div>,
<div key={JoinRule.Public} className="">
<div key={JoinRule.Public} className="mx_CreateRoomDialog_dropdown_public">
{ _t("Public room") }
</div>,
];
if (this.supportsRestricted) {
options.unshift(<div key={JoinRule.Restricted} className="">
options.unshift(<div key={JoinRule.Restricted} className="mx_CreateRoomDialog_dropdown_restricted">
{ _t("Visible to space members") }
</div>);
}

View file

@ -117,7 +117,7 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
>
<p>
{ _t("Decide which spaces can access this room. " +
"If a space is selected its members will be able to find and join <RoomName/>.", {}, {
"If a space is selected, its members can find and join <RoomName/>.", {}, {
RoomName: () => <b>{ room.name }</b>,
})}
</p>

View file

@ -419,7 +419,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
return (
<div className="mx_SecurityRoomSettingsTab_joinRule">
<div className="mx_SettingsTab_subsectionText">
<span>{ _t("Decide who can view and join %(roomName)s.", {
<span>{ _t("Decide who can join %(roomName)s.", {
roomName: client.getRoom(this.props.roomId)?.name,
}) }</span>
</div>

View file

@ -772,7 +772,7 @@
"General": "General",
"Security & Privacy": "Security & Privacy",
"Roles & Permissions": "Roles & Permissions",
"This make it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.": "This make it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.",
"This makes it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.": "This makes it easy for rooms to stay private to a space, while letting people in the space find and join them. All new rooms in a space will have this option available.",
"Skip": "Skip",
"You joined the call": "You joined the call",
"%(senderName)s joined the call": "%(senderName)s joined the call",
@ -1440,7 +1440,7 @@
"Anyone in %(spaceName)s can find and join. You can select other spaces too.": "Anyone in %(spaceName)s can find and join. You can select other spaces too.",
"Anyone in a space can find and join. You can select multiple spaces.": "Anyone in a space can find and join. You can select multiple spaces.",
"Space members": "Space members",
"Decide who can view and join %(roomName)s.": "Decide who can view and join %(roomName)s.",
"Decide who can join %(roomName)s.": "Decide who can join %(roomName)s.",
"Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)",
"Members only (since they were invited)": "Members only (since they were invited)",
"Members only (since they joined)": "Members only (since they joined)",
@ -2365,7 +2365,7 @@
"%(count)s rooms|one": "%(count)s room",
"You're removing all spaces. Access will default to invite only": "You're removing all spaces. Access will default to invite only",
"Select spaces": "Select spaces",
"Decide which spaces can access this room. If a space is selected its members will be able to find and join <RoomName/>.": "Decide which spaces can access this room. If a space is selected its members will be able to find and join <RoomName/>.",
"Decide which spaces can access this room. If a space is selected, its members can find and join <RoomName/>.": "Decide which spaces can access this room. If a space is selected, its members can find and join <RoomName/>.",
"Search spaces": "Search spaces",
"Spaces you know that contain this room": "Spaces you know that contain this room",
"Other spaces or rooms you might not know": "Other spaces or rooms you might not know",

View file

@ -232,7 +232,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
</div>
</div>
<p>{ _t("This make it easy for rooms to stay private to a space, " +
<p>{ _t("This makes it easy for rooms to stay private to a space, " +
"while letting people in the space find and join them. " +
"All new rooms in a space will have this option available.")}</p>
</>,