-
-
Notifications
You must be signed in to change notification settings - Fork 434
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement Help & feedback for Preferences screen
- Loading branch information
Showing
7 changed files
with
227 additions
and
35 deletions.
There are no files selected for viewing
107 changes: 107 additions & 0 deletions
107
app/assets/javascripts/components/preferences/help-feedback.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,107 @@ | ||
import { FunctionalComponent } from 'preact'; | ||
import { PreferencesGroup, PreferencesPane, PreferencesSegment } from './pane'; | ||
|
||
export const HelpAndFeedback: FunctionalComponent = () => ( | ||
<PreferencesPane> | ||
<PreferencesGroup> | ||
<PreferencesSegment> | ||
<h2>Frequently asked questions</h2> | ||
<h4>Who can read my private notes?</h4> | ||
<p> | ||
Quite simply: no one but you. Not us, not your ISP, not a hacker, and | ||
not a government agency. As long as you keep your password safe, and | ||
your password is reasonably strong, then you are the only person in | ||
the world with the ability to decrypt your notes. For more on how we | ||
handle your privacy and security, check out our easy to read{' '} | ||
<a target="_blank" href="https://standardnotes.com/privacy"> | ||
Privacy Manifesto. | ||
</a> | ||
</p> | ||
</PreferencesSegment> | ||
<PreferencesSegment> | ||
<h4>Can I collaborate with others on a note?</h4> | ||
<p> | ||
Because of our encrypted architecture, Standard Notes does not | ||
currently provide a real-time collaboration solution. Multiple users | ||
can share the same account however, but editing at the same time may | ||
result in sync conflicts, which may result in the duplication of | ||
notes. | ||
</p> | ||
</PreferencesSegment> | ||
<PreferencesSegment> | ||
<h4>Can I use Standard Notes totally offline?</h4> | ||
<p> | ||
Standard Notes can be used totally offline without an account, and | ||
without an internet connection. You can find{' '} | ||
<a | ||
target="_blank" | ||
href="https://standardnotes.com/help/59/can-i-use-standard-notes-totally-offline" | ||
> | ||
more details here. | ||
</a> | ||
</p> | ||
</PreferencesSegment> | ||
<PreferencesSegment> | ||
<h4>Can’t find your question here?</h4> | ||
<button | ||
onClick={() => | ||
window.open('https://standardnotes.com/help', '_blank') | ||
} | ||
> | ||
Open FAQ | ||
</button> | ||
</PreferencesSegment> | ||
</PreferencesGroup> | ||
<PreferencesGroup> | ||
<PreferencesSegment> | ||
<h2>Community forum</h2> | ||
<p> | ||
If you have an issue, found a bug or want to suggest a feature, you | ||
can browse or post to the forum. It’s recommended for non-account | ||
related issues. Please read our{' '} | ||
<a target="_blank" href="https://standardnotes.com/longevity/"> | ||
Longevity statement | ||
</a>{' '} | ||
before advocating for a feature request. | ||
</p> | ||
<button | ||
onClick={() => | ||
window.open('https://forum.standardnotes.org/', '_blank') | ||
} | ||
> | ||
Go to the forum | ||
</button> | ||
</PreferencesSegment> | ||
</PreferencesGroup> | ||
<PreferencesGroup> | ||
<PreferencesSegment> | ||
<h2>Slack group</h2> | ||
<p> | ||
Want to meet other passionate note-takers and privacy enthusiasts? | ||
Want to share your feedback with us? Join the Standard Notes Slack | ||
group for discussions on security, themes, editors and more. | ||
</p> | ||
<button | ||
onClick={() => | ||
window.open('https://standardnotes.com/slack', '_blank') | ||
} | ||
> | ||
Join our Slack group | ||
</button> | ||
</PreferencesSegment> | ||
</PreferencesGroup> | ||
<PreferencesGroup> | ||
<PreferencesSegment> | ||
<h2>Account related issue?</h2> | ||
<p>Send an email to [email protected] and we’ll sort it out.</p> | ||
<button | ||
onClick={() => | ||
window.open('mailto: [email protected]', '_blank') | ||
} | ||
> | ||
Email us | ||
</button> | ||
</PreferencesSegment> | ||
</PreferencesGroup> | ||
</PreferencesPane> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { FunctionalComponent } from 'preact'; | ||
|
||
const HorizontalLine: FunctionalComponent<{ index: number; length: number }> = | ||
({ index, length }) => | ||
index < length - 1 ? ( | ||
<hr className="h-1px w-full bg-border no-border" /> | ||
) : null; | ||
|
||
export const PreferencesSegment: FunctionalComponent = ({ children }) => ( | ||
<div>{children}</div> | ||
); | ||
|
||
export const PreferencesGroup: FunctionalComponent = ({ children }) => ( | ||
<div className="bg-default border-1 border-solid rounded border-gray-300 px-6 py-6 flex flex-col gap-2"> | ||
{!Array.isArray(children) | ||
? children | ||
: children.map((c, i, arr) => ( | ||
<> | ||
{c} | ||
<HorizontalLine index={i} length={arr.length} /> | ||
</> | ||
))} | ||
</div> | ||
); | ||
|
||
export const PreferencesPane: FunctionalComponent = ({ children }) => ( | ||
<div className="preferences-pane flex-grow flex flex-row overflow-y-auto min-h-0"> | ||
<div className="flex-grow flex flex-col py-6 items-center"> | ||
<div className="max-w-124 flex flex-col gap-3">{children}</div> | ||
</div> | ||
<div className="flex-basis-55 flex-shrink-max" /> | ||
</div> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,45 @@ | ||
import { IconButton } from '@/components/IconButton'; | ||
import { TitleBar, Title } from '@/components/TitleBar'; | ||
import { FunctionComponent } from 'preact'; | ||
import { MockState } from './mock-state'; | ||
import { Preferences } from './preferences'; | ||
import { PreferencesMenu } from './menu'; | ||
import { HelpAndFeedback } from './help-feedback'; | ||
import { observer } from 'mobx-react-lite'; | ||
|
||
interface PreferencesViewProps { | ||
close: () => void; | ||
} | ||
|
||
export const PreferencesView: FunctionComponent<PreferencesViewProps> = ({ | ||
close, | ||
}) => { | ||
const store = new MockState(); | ||
return ( | ||
<div className="sn-full-screen flex flex-col bg-contrast z-index-preferences"> | ||
<TitleBar className="items-center justify-between"> | ||
{/* div is added so flex justify-between can center the title */} | ||
<div className="h-8 w-8" /> | ||
<Title className="text-lg">Your preferences for Standard Notes</Title> | ||
<IconButton | ||
onClick={() => { | ||
close(); | ||
}} | ||
type="normal" | ||
iconType="close" | ||
/> | ||
</TitleBar> | ||
<div className="flex flex-row flex-grow min-h-0"> | ||
<PreferencesMenu store={store}></PreferencesMenu> | ||
export const PreferencesCanvas: FunctionComponent<{ | ||
preferences: Preferences; | ||
}> = observer(({ preferences: prefs }) => ( | ||
<div className="flex flex-row flex-grow min-h-0 justify-between"> | ||
<PreferencesMenu preferences={prefs}></PreferencesMenu> | ||
{/* Temporary selector until a full solution is implemented */} | ||
{prefs.selectedItem.label === 'Help & feedback' ? ( | ||
<HelpAndFeedback /> | ||
) : null} | ||
</div> | ||
)); | ||
|
||
export const PreferencesView: FunctionComponent<PreferencesViewProps> = | ||
observer(({ close }) => { | ||
const prefs = new Preferences(); | ||
return ( | ||
<div className="sn-full-screen flex flex-col bg-contrast z-index-preferences"> | ||
<TitleBar className="items-center justify-between"> | ||
{/* div is added so flex justify-between can center the title */} | ||
<div className="h-8 w-8" /> | ||
<Title className="text-lg">Your preferences for Standard Notes</Title> | ||
<IconButton | ||
onClick={() => { | ||
close(); | ||
}} | ||
type="normal" | ||
iconType="close" | ||
/> | ||
</TitleBar> | ||
<PreferencesCanvas preferences={prefs} /> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
); | ||
}); |
2 changes: 1 addition & 1 deletion
2
app/assets/javascripts/ui_models/app_state/preferences_state.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters