rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile workspaces (#1093)

Browse Source
This commit is contained in:
Vardan Hakobyan
2022-06-21 15:42:43 +04:00
committed by GitHub
parent 1f903f17d1
commit 7d60dfee73
71 changed files with 599 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/mobile/src/Components/Button.tsx
View File

@@ -55,7 +55,7 @@ const ButtonLabel = styled.Text<{ primary?: boolean }>`
color: ${({ theme, primary }) => {
return primary ? theme.stylekitInfoContrastColor : theme.stylekitForegroundColor
}};
font-size: ${props => props.theme.mainTextFontSize}px;
font-size: ${(props) => props.theme.mainTextFontSize}px;
`
export const Button: React.FC<Props> = ({ onPress, label, primary, fullWidth, last }: Props) => {

10
packages/mobile/src/Components/ButtonCell.tsx
View File

@@ -17,7 +17,7 @@ type Props = {
}
type ContainerProps = Pick<Props, 'maxHeight'> & TableCellProps
const Container = styled(SectionedTableCellTouchableHighlight).attrs(props => ({
const Container = styled(SectionedTableCellTouchableHighlight).attrs((props) => ({
underlayColor: props.theme.stylekitBorderColor,
}))<ContainerProps>`
padding-top: ${12}px;
@@ -32,9 +32,9 @@ const ButtonContainer = styled.View``
type ButtonLabelProps = Pick<Props, 'leftAligned' | 'bold' | 'disabled' | 'important'>
const ButtonLabel = styled.Text<ButtonLabelProps>`
text-align: ${props => (props.leftAligned ? 'left' : 'center')};
text-align: ${(props) => (props.leftAligned ? 'left' : 'center')};
text-align-vertical: center;
color: ${props => {
color: ${(props) => {
let color = Platform.OS === 'android' ? props.theme.stylekitForegroundColor : props.theme.stylekitInfoColor
if (props.disabled) {
color = 'gray'
@@ -43,7 +43,7 @@ const ButtonLabel = styled.Text<ButtonLabelProps>`
}
return color
}};
font-size: ${props => props.theme.mainTextFontSize}px;
font-size: ${(props) => props.theme.mainTextFontSize}px;
${({ bold }) =>
bold &&
css`
@@ -56,7 +56,7 @@ const ButtonLabel = styled.Text<ButtonLabelProps>`
`}
`
export const ButtonCell: React.FC<Props> = props => (
export const ButtonCell: React.FC<Props> = (props) => (
<Container
first={props.first}
last={props.last}

10
packages/mobile/src/Components/Circle.ts
View File

@@ -7,10 +7,10 @@ type Props = {
}
export const Circle = styled.View<Props>`
width: ${props => props.size ?? 12}px;
height: ${props => props.size ?? 12}px;
border-radius: ${props => (props.size ?? 12) / 2}px;
background-color: ${props => props.backgroundColor};
border-color: ${props => props.borderColor};
width: ${(props) => props.size ?? 12}px;
height: ${(props) => props.size ?? 12}px;
border-radius: ${(props) => (props.size ?? 12) / 2}px;
background-color: ${(props) => props.backgroundColor};
border-color: ${(props) => props.borderColor};
border-width: 1px;
`

10
packages/mobile/src/Components/HeaderTitleView.tsx
View File

@@ -9,14 +9,14 @@ type Props = {
}
const Container = styled.View`
/* background-color: ${props => props.theme.stylekitContrastBackgroundColor}; */
/* background-color: ${(props) => props.theme.stylekitContrastBackgroundColor}; */
flex: 1;
justify-content: center;
${Platform.OS === 'android' && 'align-items: flex-start; min-width: 100px;'}
`
const Title = styled.Text`
color: ${props => props.theme.stylekitForegroundColor};
color: ${(props) => props.theme.stylekitForegroundColor};
font-weight: bold;
font-size: 18px;
text-align: center;
@@ -25,13 +25,13 @@ const SubTitle = styled.Text.attrs(() => ({
adjustsFontSizeToFit: true,
numberOfLines: 1,
}))<{ color?: string }>`
color: ${props => props.color ?? props.theme.stylekitForegroundColor};
opacity: ${props => (props.color ? 1 : 0.6)};
color: ${(props) => props.color ?? props.theme.stylekitForegroundColor};
opacity: ${(props) => (props.color ? 1 : 0.6)};
font-size: ${Platform.OS === 'android' ? 13 : 12}px;
${Platform.OS === 'ios' && 'text-align: center'}
`
export const HeaderTitleView: React.FC<Props> = props => (
export const HeaderTitleView: React.FC<Props> = (props) => (
<Container>
<Title>{props.title}</Title>
{props.subtitle && props.subtitle.length > 0 ? (

24
packages/mobile/src/Components/SectionHeader.tsx
View File

@@ -17,19 +17,19 @@ const Container = styled.View<Pick<Props, 'backgroundColor'>>`
/* flex-grow: 0; */
justify-content: space-between;
flex-direction: row;
padding-right: ${props => props.theme.paddingLeft}px;
padding-right: ${(props) => props.theme.paddingLeft}px;
padding-bottom: 10px;
padding-top: 10px;
background-color: ${props => props.backgroundColor ?? props.theme.stylekitBackgroundColor};
background-color: ${(props) => props.backgroundColor ?? props.theme.stylekitBackgroundColor};
`
const TitleContainer = styled.View``
const Title = styled.Text<Pick<Props, 'tinted'>>`
background-color: ${props => props.theme.stylekitBackgroundColor};
font-size: ${props => {
background-color: ${(props) => props.theme.stylekitBackgroundColor};
font-size: ${(props) => {
return Platform.OS === 'android' ? props.theme.mainTextFontSize - 2 : props.theme.mainTextFontSize - 4
}}px;
padding-left: ${props => props.theme.paddingLeft}px;
color: ${props => {
padding-left: ${(props) => props.theme.paddingLeft}px;
color: ${(props) => {
if (props.tinted) {
return props.theme.stylekitInfoColor
}
@@ -39,11 +39,11 @@ const Title = styled.Text<Pick<Props, 'tinted'>>`
font-weight: ${Platform.OS === 'android' ? 'bold' : 'normal'};
`
const SubTitle = styled.Text`
background-color: ${props => props.theme.stylekitBackgroundColor};
font-size: ${props => props.theme.mainTextFontSize - 5}px;
background-color: ${(props) => props.theme.stylekitBackgroundColor};
font-size: ${(props) => props.theme.mainTextFontSize - 5}px;
margin-top: 4px;
padding-left: ${props => props.theme.paddingLeft}px;
color: ${props => props.theme.stylekitNeutralColor};
padding-left: ${(props) => props.theme.paddingLeft}px;
color: ${(props) => props.theme.stylekitNeutralColor};
`
const ButtonContainer = styled.TouchableOpacity`
flex: 1;
@@ -51,10 +51,10 @@ const ButtonContainer = styled.TouchableOpacity`
justify-content: center;
`
const Button = styled.Text`
color: ${props => props.theme.stylekitInfoColor};
color: ${(props) => props.theme.stylekitInfoColor};
`
export const SectionHeader: React.FC<Props> = props => (
export const SectionHeader: React.FC<Props> = (props) => (
<Container>
<TitleContainer>
{!!props.title && (

10
packages/mobile/src/Components/SectionedAccessoryTableCell.tsx
View File

@@ -22,7 +22,7 @@ type Props = {
last?: boolean
}
const TouchableContainer = styled(SectionedTableCellTouchableHighlight).attrs(props => ({
const TouchableContainer = styled(SectionedTableCellTouchableHighlight).attrs((props) => ({
underlayColor: props.theme.stylekitBorderColor,
}))`
flex-direction: column;
@@ -33,7 +33,7 @@ const TouchableContainer = styled(SectionedTableCellTouchableHighlight).attrs(pr
`
const ContentContainer = styled.View<Pick<Props, 'leftAlignIcon'>>`
flex: 1;
justify-content: ${props => {
justify-content: ${(props) => {
return props.leftAlignIcon ? 'flex-start' : 'space-between'
}};
flex-direction: row;
@@ -46,7 +46,7 @@ const IconContainer = styled.View`
type LabelProps = Pick<Props, 'bold' | 'tinted' | 'dimmed' | 'selected' | 'color'>
const Label = styled.Text<LabelProps>`
min-width: 80%;
color: ${props => {
color: ${(props) => {
let color = props.theme.stylekitForegroundColor
if (props.tinted) {
color = props.theme.stylekitInfoColor
@@ -59,7 +59,7 @@ const Label = styled.Text<LabelProps>`
}
return color
}};
font-size: ${props => props.theme.mainTextFontSize}px;
font-size: ${(props) => props.theme.mainTextFontSize}px;
${({ bold, selected }) =>
((selected && selected() === true) || bold) &&
css`
@@ -67,7 +67,7 @@ const Label = styled.Text<LabelProps>`
`};
`
export const SectionedAccessoryTableCell: React.FC<Props> = props => {
export const SectionedAccessoryTableCell: React.FC<Props> = (props) => {
const themeContext = useContext(ThemeContext)
const onPress = () => {
if (props.disabled) {

26
packages/mobile/src/Components/SectionedOptionsTableCell.tsx
View File

@@ -15,11 +15,11 @@ type Props = {
type ContainerProps = Omit<Props, 'title' | 'onPress' | 'options'>
export const Container = styled.View<ContainerProps>`
border-bottom-color: ${props => props.theme.stylekitBorderColor};
border-bottom-color: ${(props) => props.theme.stylekitBorderColor};
border-bottom-width: 1px;
padding-left: ${props => props.theme.paddingLeft}px;
padding-right: ${props => props.theme.paddingLeft}px;
background-color: ${props => props.theme.stylekitBackgroundColor};
padding-left: ${(props) => props.theme.paddingLeft}px;
padding-right: ${(props) => props.theme.paddingLeft}px;
background-color: ${(props) => props.theme.stylekitBackgroundColor};
${({ first, theme }) =>
first &&
css`
@@ -38,9 +38,9 @@ export const Container = styled.View<ContainerProps>`
`
const Title = styled.Text<{ leftAligned?: boolean }>`
font-size: ${props => props.theme.mainTextFontSize}px;
color: ${props => props.theme.stylekitForegroundColor};
text-align: ${props => (props.leftAligned ? 'left' : 'center')};
font-size: ${(props) => props.theme.mainTextFontSize}px;
color: ${(props) => props.theme.stylekitForegroundColor};
text-align: ${(props) => (props.leftAligned ? 'left' : 'center')};
width: 42%;
min-width: 0px;
`
@@ -50,13 +50,13 @@ const OptionsContainer = styled.View`
flex-direction: row;
align-items: center;
justify-content: center;
background-color: ${props => props.theme.stylekitBackgroundColor};
background-color: ${(props) => props.theme.stylekitBackgroundColor};
`
const ButtonTouchable = styled.TouchableHighlight.attrs(props => ({
const ButtonTouchable = styled.TouchableHighlight.attrs((props) => ({
underlayColor: props.theme.stylekitBorderColor,
}))`
border-left-color: ${props => props.theme.stylekitBorderColor};
border-left-color: ${(props) => props.theme.stylekitBorderColor};
border-left-width: 1px;
flex-grow: 1;
padding: 10px;
@@ -64,7 +64,7 @@ const ButtonTouchable = styled.TouchableHighlight.attrs(props => ({
`
const ButtonTitle = styled.Text<{ selected: boolean }>`
color: ${props => {
color: ${(props) => {
return props.selected ? props.theme.stylekitInfoColor : props.theme.stylekitNeutralColor
}};
font-size: 16px;
@@ -72,11 +72,11 @@ const ButtonTitle = styled.Text<{ selected: boolean }>`
width: 100%;
`
export const SectionedOptionsTableCell: React.FC<Props> = props => (
export const SectionedOptionsTableCell: React.FC<Props> = (props) => (
<Container first={props.first}>
<Title leftAligned={props.leftAligned}>{props.title}</Title>
<OptionsContainer>
{props.options.map(option => {
{props.options.map((option) => {
return (
<ButtonTouchable key={option.title} onPress={() => props.onPress(option)}>
<ButtonTitle selected={option.selected}>{option.title}</ButtonTitle>

20
packages/mobile/src/Components/SectionedTableCell.ts
View File

@@ -9,12 +9,12 @@ export type Props = {
}
export const SectionedTableCell = styled.View<Props>`
border-bottom-color: ${props => props.theme.stylekitBorderColor};
border-bottom-color: ${(props) => props.theme.stylekitBorderColor};
border-bottom-width: 1px;
padding-left: ${props => props.theme.paddingLeft}px;
padding-right: ${props => props.theme.paddingLeft}px;
padding-bottom: ${props => (props.textInputCell ? 0 : 12)}px;
background-color: ${props => props.theme.stylekitBackgroundColor};
padding-left: ${(props) => props.theme.paddingLeft}px;
padding-right: ${(props) => props.theme.paddingLeft}px;
padding-bottom: ${(props) => (props.textInputCell ? 0 : 12)}px;
background-color: ${(props) => props.theme.stylekitBackgroundColor};
${({ first, theme }) =>
first &&
css`
@@ -34,12 +34,12 @@ export const SectionedTableCell = styled.View<Props>`
`
export const SectionedTableCellTouchableHighlight = styled.TouchableHighlight<Props>`
border-bottom-color: ${props => props.theme.stylekitBorderColor};
border-bottom-color: ${(props) => props.theme.stylekitBorderColor};
border-bottom-width: 1px;
padding-left: ${props => props.theme.paddingLeft}px;
padding-right: ${props => props.theme.paddingLeft}px;
padding-bottom: ${props => (props.textInputCell ? 0 : 12)}px;
background-color: ${props => props.theme.stylekitBackgroundColor};
padding-left: ${(props) => props.theme.paddingLeft}px;
padding-right: ${(props) => props.theme.paddingLeft}px;
padding-bottom: ${(props) => (props.textInputCell ? 0 : 12)}px;
background-color: ${(props) => props.theme.stylekitBackgroundColor};
${({ first, theme }) =>
first &&
css`

2
packages/mobile/src/Components/TableSection.ts
View File

@@ -3,5 +3,5 @@ import styled from 'styled-components/native'
export const TableSection = styled.View`
margin-top: 10px;
margin-bottom: 10px;
background-color: ${props => props.theme.stylekitBackgroundColor};
background-color: ${(props) => props.theme.stylekitBackgroundColor};
`

6
packages/mobile/src/Components/ToastWrapper.tsx
View File

@@ -12,7 +12,7 @@ export const ToastWrapper: FC = () => {
const { updateProgressBar, progressBarWidth } = useProgressBar()
const toastStyles: ToastConfig = {
info: props => {
info: (props) => {
const percentComplete = props.props?.percentComplete || 0
updateProgressBar(percentComplete)
@@ -35,13 +35,13 @@ export const ToastWrapper: FC = () => {
</View>
)
},
success: props => {
success: (props) => {
const percentComplete = props.props?.percentComplete || 0
updateProgressBar(percentComplete)
return <SuccessToast {...props} style={styles(props.props).success} />
},
error: props => {
error: (props) => {
const percentComplete = props.props?.percentComplete || 0
updateProgressBar(percentComplete)