OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/21833/head
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; 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") {