coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Improve dark mode styling

Browse Source 
fix: Improve user and group list styling
fix: Member list reload when changing permissions, closes #1999
This commit is contained in:
Tom Moor
2021-03-31 20:57:30 -07:00
parent 2ef0caba88
commit 810257bcf5
10 changed files with 47 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/GroupListItem.js
View File

@ -52,7 +52,7 @@ class GroupListItem extends React.Component<Props> {
<ListItem
image={
<Image>
<GroupIcon size={28} />
<GroupIcon size={24} />
</Image>
}
title={
@ -94,10 +94,10 @@ class GroupListItem extends React.Component<Props> {
const Image = styled(Flex)`
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
width: 32px;
height: 32px;
background: ${(props) => props.theme.secondaryBackground};
border-radius: 20px;
border-radius: 32px;
`;
const Title = styled.span`

8
app/components/List/Item.js
View File

@ -27,7 +27,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
const Wrapper = styled.li`
display: flex;
padding: 8px 0;
padding: 10px 0;
margin: 0;
border-bottom: 1px solid ${(props) => props.theme.divider};
@ -38,17 +38,17 @@ const Wrapper = styled.li`
const Image = styled(Flex)`
padding: 0 8px 0 0;
max-height: 40px;
max-height: 32px;
align-items: center;
user-select: none;
flex-shrink: 0;
align-self: flex-start;
align-self: center;
`;
const Heading = styled.p`
font-size: 16px;
font-weight: 500;
line-height: 1.2;
line-height: 1.1;
margin: 0;
`;

3
app/menus/MemberMenu.js
View File

@ -1,5 +1,4 @@
// @flow
import { observer } from "mobx-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
@ -33,4 +32,4 @@ function MemberMenu({ onRemove }: Props) {
);
}
export default observer(MemberMenu);
export default MemberMenu;

11
app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js
View File

@ -49,7 +49,8 @@ const CollectionGroupMemberListItem = ({
}
onChange={(ev) => onUpdate(ev.target.value)}
labelHidden
/>{" "}
/>
<Spacer />
<CollectionGroupMemberMenu
onMembers={openMembersModal}
onRemove={onRemove}
@ -60,10 +61,18 @@ const CollectionGroupMemberListItem = ({
);
};
const Spacer = styled.div`
width: 8px;
`;
const Select = styled(InputSelect)`
margin: 0;
font-size: 14px;
border-color: transparent;
select {
margin: 0;
}
`;
export default CollectionGroupMemberListItem;

30
app/scenes/CollectionPermissions/components/MemberListItem.js
View File

@ -56,23 +56,29 @@ const MemberListItem = ({
{user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
</>
}
image={<Avatar src={user.avatarUrl} size={40} />}
image={<Avatar src={user.avatarUrl} size={32} />}
actions={
<Flex align="center">
{canEdit && onUpdate && (
{onUpdate && (
<Select
label={t("Permissions")}
options={PERMISSIONS}
value={membership ? membership.permission : undefined}
onChange={(ev) => onUpdate(ev.target.value)}
disabled={!canEdit}
labelHidden
/>
)}{" "}
{canEdit && onRemove && <MemberMenu onRemove={onRemove} />}
{canEdit && onAdd && (
<Button onClick={onAdd} neutral>
{t("Add")}
</Button>
)}
{canEdit && (
<>
<Spacer />
{onRemove && <MemberMenu onRemove={onRemove} />}
{onAdd && (
<Button onClick={onAdd} neutral>
{t("Add")}
</Button>
)}
</>
)}
</Flex>
}
@ -80,10 +86,18 @@ const MemberListItem = ({
);
};
const Spacer = styled.div`
width: 8px;
`;
const Select = styled(InputSelect)`
margin: 0;
font-size: 14px;
border-color: transparent;
select {
margin: 0;
}
`;
export default MemberListItem;

2
app/scenes/CollectionPermissions/components/UserListItem.js
View File

@ -21,7 +21,7 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
return (
<ListItem
title={user.name}
image={<Avatar src={user.avatarUrl} size={40} />}
image={<Avatar src={user.avatarUrl} size={32} />}
subtitle={
<>
{user.lastActiveAt ? (

1
app/scenes/CollectionPermissions/index.js
View File

@ -225,6 +225,7 @@ function CollectionPermissions({ collection }: Props) {
/>
{collectionGroups.length ? <Divider /> : null}
<PaginatedList
key={`collection-users-${collection.permission || "none"}`}
items={collectionUsers}
fetch={memberships.fetchPage}
options={fetchOptions}

2
app/scenes/GroupMembers/components/GroupMemberListItem.js
View File

@ -32,7 +32,7 @@ const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
{user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
</>
}
image={<Avatar src={user.avatarUrl} size={40} />}
image={<Avatar src={user.avatarUrl} size={32} />}
actions={
<Flex align="center">
{onRemove && <GroupMemberMenu onRemove={onRemove} />}

2
app/scenes/Settings/components/UserListItem.js
View File

@ -38,7 +38,7 @@ class UserListItem extends React.Component<Props> {
<>
<Avatar
src={user.avatarUrl}
size={40}
size={32}
onClick={this.handleOpenProfile}
/>
<UserProfile

4
shared/styles/theme.js
View File

@ -198,7 +198,7 @@ export const dark = {
menuBackground: lighten(0.015, colors.almostBlack),
menuShadow:
"0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 0 1px rgba(255,255,255,.2)",
divider: darken(0.2, colors.slate),
divider: lighten(0.1, colors.almostBlack),
titleBarDivider: darken(0.4, colors.slate),
inputBorder: colors.slateDark,
inputBorderFocused: colors.slate,
@ -229,7 +229,7 @@ export const dark = {
codeBorder: colors.black50,
codeString: "#3d8fd1",
embedBorder: colors.black50,
horizontalRule: darken(0.2, colors.slate),
horizontalRule: lighten(0.1, colors.almostBlack),
noticeInfoBackground: colors.white10,
noticeInfoText: colors.almostWhite,