mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 01:35:49 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make button sizes more consistent and fix untrapped behaviour of join button leaking to parent

Browse source
This commit is contained in:
Michael Telatynski 2021-05-06 13:05:58 +01:00
parent 650933096a
commit d47eecbd24
2 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
res/css/structures/_SpaceRoomDirectory.scss
View file

@ -86,7 +86,7 @@ limitations under the License.
color: $primary-fg-color;
.mx_AccessibleButton {
padding: 4px 8px;
padding: 4px 12px;
font-weight: normal;
& + .mx_AccessibleButton {
@ -94,6 +94,11 @@ limitations under the License.
}
}
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px; // to account for the 1px border
}
> span {
margin-left: auto;
}
@ -246,11 +251,17 @@ limitations under the License.
grid-row: 1/3;
.mx_AccessibleButton {
padding: 8px 18px;
line-height: $font-24px;
padding: 4px 16px;
display: inline-block;
visibility: hidden;
}
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px; // to account for the 1px border
}
.mx_Checkbox {
display: inline-flex;
vertical-align: middle;

14
src/components/structures/SpaceRoomDirectory.tsx
View file

@ -24,7 +24,7 @@ import {sortBy} from "lodash";
import {MatrixClientPeg} from "../../MatrixClientPeg";
import dis from "../../dispatcher/dispatcher";
import {_t} from "../../languageHandler";
import AccessibleButton from "../views/elements/AccessibleButton";
import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton";
import BaseDialog from "../views/dialogs/BaseDialog";
import Spinner from "../views/elements/Spinner";
import SearchBox from "./SearchBox";
@ -108,8 +108,16 @@ const Tile: React.FC<ITileProps> = ({
const cliRoom = cli.getRoom(room.room_id);
const myMembership = cliRoom?.getMyMembership();
const onPreviewClick = () => onViewRoomClick(false);
const onJoinClick = () => onViewRoomClick(true);
const onPreviewClick = (ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
onViewRoomClick(false);
}
const onJoinClick = (ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
onViewRoomClick(true);
}
let button;
if (myMembership === "join") {