Page MenuHomePhabricator
Differential D8313

[web] Introduce `large` variant of `ColorSelector`
ClosedPublic
Actions

Authored by atul on Jun 26 2023, 9:17 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 31, 3:21 AM
Unknown Object (File)
Thu, Mar 13, 7:18 AM
Unknown Object (File)
Thu, Mar 13, 7:18 AM
Unknown Object (File)
Thu, Mar 13, 7:18 AM
Unknown Object (File)
Thu, Mar 13, 7:18 AM
Unknown Object (File)
Thu, Mar 13, 7:16 AM
Unknown Object (File)
Feb 25 2025, 6:24 PM
Unknown Object (File)
Feb 18 2025, 7:09 AM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
Commits
rCOMM30f18a849fb5: [web] Introduce `large` variant of `ColorSelector`
Summary

In this diff we introduce size prop to ColorSelector component and implement styling/layout for large variant.

This is for use in the EmojiAvatarSelection component.

Test Plan

Here's how it looks:

f788e5.png (1×1 px, 113 KB)

Also ensured that other usages of ColorSelector in web continue to appear as expected (eg ThreadSettings)

Diff Detail

Repository
rCOMM Comm
Branch
arcpatch-D8313 (branched from master)
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

Diff 28169

View Options

web/avatars/emoji-avatar-selection-modal.css

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/avatars/emoji-avatar-selection-modal.react.js

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/modals/threads/color-selector-button.css

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/modals/threads/color-selector-button.react.js

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/modals/threads/color-selector.css

// @flow // @flow
import t, { type TInterface, type TUnion } from 'tcomb'; import t, { type TInterface, type TUnion } from 'tcomb';
import { import {
tHexEncodedPermissionsBitmask, tHexEncodedPermissionsBitmask,
tHexEncodedRolePermission, tHexEncodedRolePermission,
} from './minimally-encoded-thread-permissions.js'; } from './minimally-encoded-thread-permissions.js';
import { specialRoleValidator } from './special-roles.js'; import { specialRoleValidator } from './special-roles.js';
import type { import type {
MemberInfo, MemberInfoWithPermissions,
ThreadCurrentUserInfo, ThreadCurrentUserInfo,
RawThreadInfo, RawThreadInfo,
RoleInfo, RoleInfo,
RoleInfoWithoutSpecialRole, RoleInfoWithoutSpecialRole,
RawThreadInfoWithoutSpecialRole, RawThreadInfoWithoutSpecialRole,
} from '../types/minimally-encoded-thread-permissions-types.js'; } from '../types/minimally-encoded-thread-permissions-types.js';
import { import {
type LegacyRawThreadInfo, type LegacyRawThreadInfo,
Show All 37 Lines tShape<RoleInfoPossiblyWithIsDefaultField>({
id: tID, id: tID,
name: t.String, name: t.String,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: t.list(tHexEncodedRolePermission), permissions: t.list(tHexEncodedRolePermission),
specialRole: t.maybe(specialRoleValidator), specialRole: t.maybe(specialRoleValidator),
isDefault: t.maybe(t.Boolean), isDefault: t.maybe(t.Boolean),
}); });
const memberInfoValidator: TInterface<MemberInfo> = tShape<MemberInfo>({ const memberInfoWithPermissionsValidator: TInterface<MemberInfoWithPermissions> =
tShape<MemberInfoWithPermissions>({
...legacyMemberInfoValidator.meta.props, ...legacyMemberInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
permissions: tHexEncodedPermissionsBitmask, permissions: tHexEncodedPermissionsBitmask,
}); });
const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>( const rawThreadInfoValidator: TInterface<RawThreadInfo> = tShape<RawThreadInfo>(
{ {
...legacyRawThreadInfoValidator.meta.props, ...legacyRawThreadInfoValidator.meta.props,
minimallyEncoded: tBool(true), minimallyEncoded: tBool(true),
members: t.list(memberInfoValidator), members: t.list(memberInfoWithPermissionsValidator),
roles: t.dict(tID, roleInfoValidator), roles: t.dict(tID, roleInfoValidator),
currentUser: threadCurrentUserInfoValidator, currentUser: threadCurrentUserInfoValidator,
}, },
); );
const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> = const roleInfoWithoutSpecialRolesValidator: TInterface<RoleInfoWithoutSpecialRole> =
tShape<RoleInfoWithoutSpecialRole>({ tShape<RoleInfoWithoutSpecialRole>({
...roleInfoValidatorBase, ...roleInfoValidatorBase,
Show All 10 Linesconst mixedRawThreadInfoValidator: TUnion<
LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole, LegacyRawThreadInfo | RawThreadInfo | RawThreadInfoWithoutSpecialRole,
> = t.union([ > = t.union([
legacyRawThreadInfoValidator, legacyRawThreadInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
rawThreadInfoWithoutSpecialRoles, rawThreadInfoWithoutSpecialRoles,
]); ]);
export { export {
memberInfoValidator, memberInfoWithPermissionsValidator,
roleInfoValidator, roleInfoValidator,
persistedRoleInfoValidator, persistedRoleInfoValidator,
threadCurrentUserInfoValidator, threadCurrentUserInfoValidator,
rawThreadInfoValidator, rawThreadInfoValidator,
mixedRawThreadInfoValidator, mixedRawThreadInfoValidator,
}; };
View Options

web/modals/threads/color-selector.react.js

Loading...