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

fix: hide horizontal separator if "offline subscriptions" section is hidden (#740)

Browse Source
This commit is contained in:
Vardan Hakobyan
2021-11-15 17:52:13 +04:00
committed by GitHub
parent 60eeee385d
commit f8308348ed
3 changed files with 57 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -20,7 +20,13 @@ const loadExtensions = (application: WebApplication) => application.getItems([
export const Extensions: FunctionComponent<{ export const Extensions: FunctionComponent<{
application: WebApplication application: WebApplication
extensionsLatestVersions: ExtensionsLatestVersions, extensionsLatestVersions: ExtensionsLatestVersions,
}> = observer(({ application, extensionsLatestVersions }) => { className?: string,
}> = observer(
({
application,
extensionsLatestVersions,
className = ''
}) => {
const [customUrl, setCustomUrl] = useState(''); const [customUrl, setCustomUrl] = useState('');
const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined); const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
@@ -84,7 +90,7 @@ export const Extensions: FunctionComponent<{
}); });
return ( return (
<div> <div className={className}>
{visibleExtensions.length > 0 && {visibleExtensions.length > 0 &&
<div> <div>
{ {

6
app/assets/javascripts/preferences/panes/account/Advanced.tsx
View File

@@ -1,12 +1,11 @@
import { FunctionalComponent } from 'preact'; import { FunctionalComponent } from 'preact';
import { PreferencesGroup, PreferencesSegment, Title } from '@/preferences/components'; import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscription'; import { OfflineSubscription } from '@/preferences/panes/account/offlineSubscription';
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { AppState } from '@/ui_models/app_state'; import { AppState } from '@/ui_models/app_state';
import { Extensions } from '@/preferences/panes/Extensions'; import { Extensions } from '@/preferences/panes/Extensions';
import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments'; import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
import { AccordionItem } from '@/components/shared/AccordionItem'; import { AccordionItem } from '@/components/shared/AccordionItem';
interface IProps { interface IProps {
@@ -24,8 +23,7 @@ export const Advanced: FunctionalComponent<IProps> = observer(
<div className='flex flex-row items-center'> <div className='flex flex-row items-center'>
<div className='flex-grow flex flex-col'> <div className='flex-grow flex flex-col'>
<OfflineSubscription application={application} appState={appState} /> <OfflineSubscription application={application} appState={appState} />
<HorizontalSeparator classes="mt-8 mb-8" /> <Extensions className={'mt-3'} application={application} extensionsLatestVersions={extensionsLatestVersions} />
<Extensions application={application} extensionsLatestVersions={extensionsLatestVersions} />
</div> </div>
</div> </div>
</AccordionItem> </AccordionItem>

90
app/assets/javascripts/preferences/panes/account/offlineSubscription.tsx
View File

@@ -10,6 +10,7 @@ import { AppState } from '@/ui_models/app_state';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings'; import { STRING_REMOVE_OFFLINE_KEY_CONFIRMATION } from '@/strings';
import { ButtonType } from '@standardnotes/snjs'; import { ButtonType } from '@standardnotes/snjs';
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
interface IProps { interface IProps {
application: WebApplication; application: WebApplication;
@@ -55,10 +56,6 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
setIsSuccessfullyRemoved(true); setIsSuccessfullyRemoved(true);
}; };
if (!shouldShowOfflineSubscription()) {
return null;
}
const handleRemoveClick = async () => { const handleRemoveClick = async () => {
application.alertService.confirm( application.alertService.confirm(
STRING_REMOVE_OFFLINE_KEY_CONFIRMATION, STRING_REMOVE_OFFLINE_KEY_CONFIRMATION,
@@ -77,48 +74,55 @@ export const OfflineSubscription: FunctionalComponent<IProps> = observer(({ appl
}); });
}; };
if (!shouldShowOfflineSubscription()) {
return null;
}
return ( return (
<div className='flex items-center justify-between'> <>
<div className='flex flex-col mt-3 w-full'> <div className='flex items-center justify-between'>
<Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle> <div className='flex flex-col mt-3 w-full'>
<form onSubmit={handleSubscriptionCodeSubmit}> <Subtitle>{!hasUserPreviouslyStoredCode && 'Activate'} Offline Subscription</Subtitle>
<div className={'mt-2'}> <form onSubmit={handleSubscriptionCodeSubmit}>
{!hasUserPreviouslyStoredCode && ( <div className={'mt-2'}>
<DecoratedInput {!hasUserPreviouslyStoredCode && (
onChange={(code) => setActivationCode(code)} <DecoratedInput
placeholder={'Offline Subscription Code'} onChange={(code) => setActivationCode(code)}
text={activationCode} placeholder={'Offline Subscription Code'}
disabled={isSuccessfullyActivated} text={activationCode}
className={'mb-3'} disabled={isSuccessfullyActivated}
className={'mb-3'}
/>
)}
</div>
{(isSuccessfullyActivated || isSuccessfullyRemoved) && (
<div className={'mt-3 mb-3 info font-bold'}>
Successfully {isSuccessfullyActivated ? 'Activated' : 'Removed'}!
</div>
)}
{hasUserPreviouslyStoredCode && (
<Button
type='danger'
label='Remove offline key'
onClick={() => {
handleRemoveClick();
}}
/> />
)} )}
</div> {!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
{(isSuccessfullyActivated || isSuccessfullyRemoved) && ( <Button
<div className={'mt-3 mb-3 info font-bold'}> label={'Submit'}
Successfully {isSuccessfullyActivated ? 'Activated' : 'Removed'}! type='primary'
</div> disabled={activationCode === ''}
)} onClick={(event) =>
{hasUserPreviouslyStoredCode && ( handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
<Button }
type='danger' />
label='Remove offline key' )}
onClick={() => { </form>
handleRemoveClick(); </div>
}}
/>
)}
{!hasUserPreviouslyStoredCode && !isSuccessfullyActivated && (
<Button
label={'Submit'}
type='primary'
disabled={activationCode === ''}
onClick={(event) =>
handleSubscriptionCodeSubmit(event as TargetedEvent<HTMLFormElement>)
}
/>
)}
</form>
</div> </div>
</div> <HorizontalSeparator classes='mt-8 mb-5' />
</>
); );
}); });