matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-05 23:10:41 +03:00
Code 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
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; color: $primary-fg-color;
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 4px 8px; padding: 4px 12px;
font-weight: normal; font-weight: normal;
& + .mx_AccessibleButton { & + .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 { > span {
margin-left: auto; margin-left: auto;
} }
@@ -246,11 +251,17 @@ limitations under the License.
grid-row: 1/3; grid-row: 1/3;
.mx_AccessibleButton { .mx_AccessibleButton {
padding: 8px 18px; line-height: $font-24px;
padding: 4px 16px;
display: inline-block; display: inline-block;
visibility: hidden; visibility: hidden;
} }
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px; // to account for the 1px border
}
.mx_Checkbox { .mx_Checkbox {
display: inline-flex; display: inline-flex;
vertical-align: middle; vertical-align: middle;

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

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