abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 09:25:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement new auto-size text area.

Browse Source 
Add bars + header + sidebar to channels.
This commit is contained in:
Paul
2021-06-21 21:11:53 +01:00
parent d965b20ee2
commit 602cca1047
27 changed files with 1140 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ui/ComboBox.tsx
View File

@@ -5,4 +5,12 @@ export default styled.select`
border-radius: 2px;
color: var(--secondary-foreground);
background: var(--secondary-background);
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
&:focus {
outline-color: var(--accent);
}
`;

9
src/components/ui/InputBox.tsx
View File

@@ -8,18 +8,21 @@ export default styled.input<Props>`
z-index: 1;
padding: 8px 16px;
border-radius: 6px;
color: var(--foreground);
border: 2px solid transparent;
background: var(--primary-background);
transition: 0.2s ease background-color;
transition: border-color 0.2s ease-in-out;
border: none;
outline: 2px solid transparent;
transition: outline-color 0.2s ease-in-out;
&:hover {
background: var(--secondary-background);
}
&:focus {
border: 2px solid var(--accent);
outline: 2px solid var(--accent);
}
${(props) =>

28
src/components/ui/TextArea.tsx
View File

@@ -7,23 +7,39 @@ import styled, { css } from "styled-components";
export interface TextAreaProps {
code?: boolean;
padding?: number;
lineHeight?: number;
hideBorder?: boolean;
}
export const TEXT_AREA_BORDER_WIDTH = 2;
export const DEFAULT_TEXT_AREA_PADDING = 16;
export const DEFAULT_LINE_HEIGHT = 20;
export default styled.textarea<TextAreaProps>`
width: 100%;
resize: none;
display: block;
border-radius: 4px;
padding: ${ props => props.padding ?? 16 }px;
color: var(--foreground);
border: 2px solid transparent;
background: var(--secondary-background);
transition: border-color .2s ease-in-out;
padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px;
line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px;
${ props => props.hideBorder && css`
border: none;
` }
${ props => !props.hideBorder && css`
border-radius: 4px;
transition: border-color .2s ease-in-out;
border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
` }
&:focus {
outline: none;
border: 2px solid var(--accent);
${ props => !props.hideBorder && css`
border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
` }
}
${ props => props.code ? css`