mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
6dcdd22792
Summary: Instead of always redirecting new users to the home page or the (teams) welcome page, only redirect when the user signed in for the first time on a personal site, has access to other sites, and isn't already being redirected to a specific page on their personal site. Also tweaks how invalid Choice column values are displayed to match Choice List columns, and fixes a small CSS issue with select by in the page widget picker when there are options with long labels. Test Plan: Browser tests. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D3461
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import {dom, DomContents, DomElementArg, styled} from "grainjs";
|
|
import {colors, vars} from "app/client/ui2018/cssVars";
|
|
import {Style} from 'app/client/models/Styles';
|
|
|
|
export const DEFAULT_FILL_COLOR = colors.mediumGreyOpaque.value;
|
|
export const DEFAULT_TEXT_COLOR = '#000000';
|
|
|
|
export interface IChoiceTokenOptions extends Style {
|
|
invalid?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Creates a colored token representing a choice (e.g. Choice and Choice List values).
|
|
*
|
|
* Tokens are pill-shaped boxes that contain text, with custom fill and text
|
|
* colors. If colors are not specified, a gray fill with black text will be used.
|
|
*
|
|
* Additional styles and other DOM arguments can be passed in to customize the
|
|
* appearance and behavior of the token.
|
|
*
|
|
* @param {DomElementArg} label The text that will appear inside the token.
|
|
* @param {IChoiceTokenOptions} options Options for customizing the token appearance.
|
|
* @param {DOMElementArg[]} args Additional arguments to pass to the token.
|
|
* @returns {DomContents} A colored choice token.
|
|
*/
|
|
export function choiceToken(
|
|
label: DomElementArg,
|
|
options: IChoiceTokenOptions,
|
|
...args: DomElementArg[]
|
|
): DomContents {
|
|
const {fillColor, textColor, fontBold, fontItalic, fontUnderline,
|
|
fontStrikethrough, invalid} = options;
|
|
return cssChoiceToken(
|
|
label,
|
|
dom.style('background-color', fillColor ?? DEFAULT_FILL_COLOR),
|
|
dom.style('color', textColor ?? DEFAULT_TEXT_COLOR),
|
|
dom.cls('font-bold', fontBold ?? false),
|
|
dom.cls('font-underline', fontUnderline ?? false),
|
|
dom.cls('font-italic', fontItalic ?? false),
|
|
dom.cls('font-strikethrough', fontStrikethrough ?? false),
|
|
invalid ? cssChoiceToken.cls('-invalid') : null,
|
|
...args
|
|
);
|
|
}
|
|
|
|
export const cssChoiceToken = styled('div', `
|
|
display: inline-block;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: pre;
|
|
|
|
&-invalid {
|
|
background-color: white !important;
|
|
box-shadow: inset 0 0 0 1px ${colors.error};
|
|
}
|
|
`);
|
|
|
|
const ADD_NEW_HEIGHT = '37px';
|
|
|
|
export const cssChoiceACItem = styled('li', `
|
|
display: block;
|
|
font-family: ${vars.fontFamily};
|
|
white-space: pre;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
outline: none;
|
|
padding: var(--weaseljs-menu-item-padding, 8px 24px);
|
|
cursor: pointer;
|
|
|
|
&.selected {
|
|
background-color: ${colors.mediumGreyOpaque};
|
|
color: ${colors.dark};
|
|
}
|
|
&-with-new {
|
|
scroll-margin-bottom: ${ADD_NEW_HEIGHT};
|
|
}
|
|
&-new {
|
|
display: flex;
|
|
align-items: center;
|
|
color: ${colors.slate};
|
|
position: sticky;
|
|
bottom: 0px;
|
|
height: ${ADD_NEW_HEIGHT};
|
|
background-color: white;
|
|
border-top: 1px solid ${colors.mediumGreyOpaque};
|
|
scroll-margin-bottom: initial;
|
|
}
|
|
&-new.selected {
|
|
color: ${colors.lightGrey};
|
|
}
|
|
`);
|