Skip to content

Add ios overview #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Heiko-Pohl merged 5 commits into from
May 16, 2025
Merged

Add ios overview #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3aeb242
add files list overview
Svanvith May 12, 2025
30f16e4
write down overview points and adjust screenshot
Svanvith May 13, 2025
ad8e6d4
ios overview refine
Heiko-Pohl May 16, 2025
78a487f
ios overview refine textcolor dark an light mode
Heiko-Pohl May 16, 2025
d7d5fa9
Merge branch 'main' into add-ios-overview
Svanvith May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions docs/user/ios-app/overview/account-fileslist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,28 @@ draft: true
<img src={require("../img/overview/fileslist.png").default} alt="Fileslist-Overview" style={{ width: '400px', marginRight: '60px' }} />

<ul style={{ listStyleType: 'none', padding: 0, margin: 0, width: '100%' }}>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>1. Account Menue</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Provides access to account settings</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>2. Navigation History</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Allows to go back and forward through previously visited views or folders.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>3. Search</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Lets the user search for files, folders, or shared items within the app.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>4. Add Button</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Opens options to upload files, create folders, or add new content.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>5. Three Dot Menue</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Displays additional actions or settings related to the current view or item.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>6. Sorting</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Lets the user sort files by name, date, size, or other criteria.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>7. View Mode</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Allows switching between different view-modes.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>8. Selection Toggle</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Enables multi-select mode to select multiple files or folders at once.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>9. Files List</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Shows the contents of the current folder as a list of files and folders.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}><strong>10. Breadcrumbs Menue</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Displays the current folder path and allows quick navigation to parent folders.</li>

<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>1. Account Menu</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Provides access to account settings</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>2. Navigation History</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Allows to go back and forward through previously visited views or folders.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>3. Search</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Lets the user search for files, folders, or shared items within the app.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>4. Add Button</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Opens options to upload files, create folders, or add new content.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>5. Three Dot Menu</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Displays additional actions or settings related to the current view or item.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>6. Sorting</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Lets the user sort files by name, date, size, or other criteria.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>7. View Mode</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Allows switching between different view-modes.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>8. Selection Toggle</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Enables multi-select mode to select multiple files or folders at once.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>9. Files List</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Shows the contents of the current folder as a list of files and folders.</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}><strong>10. Breadcrumbs Menu</strong></li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Displays the current folder path and allows quick navigation to parent folders.</li>
</ul>

</div>

48 changes: 25 additions & 23 deletions docs/user/ios-app/overview/account-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: Account-Menue
draft: true
---

### Here a is an overview of the account-menue in the OpenCloud iOS-App.
### Here a is a overview of the account-menue in the OpenCloud iOS-App.

---

Expand All @@ -14,28 +14,30 @@ draft: true
<img src={require("../img/overview/account.png").default} alt="Overview Account" style={{ width: '400px', marginRight: '60px' }} />

<ul style={{ listStyleType: 'none', padding: 0, margin: 0, width: '100%' }}>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**1. Account Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Opens the main account options and settings</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>2. Active Account**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Shows which user account is currently active</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**3. Personal Space Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Gives access to the user's personal files and folders</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**4. Shares Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Displays files and folders that have been shared with others or received</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**5. Spaces Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Opens a list of collaborative spaces or team folders</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**6. Search Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Allows the user to search through files, folders, and content</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**7. Recents Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Shows a list of recently accessed or modified files</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**8. Available Offline Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Displays files that are marked for offline access</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**9. Status Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Indicates the current sync or connection status</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**10. Add Account Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Lets the user add a new account to the application</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px' }}>**11. Settings Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px' }}>Opens the general settings and configuration options</li>

<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**1. Account Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Opens the main account options and settings</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>2. Active Account**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Shows which user account is currently active</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**3. Personal Space Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Gives access to the user's personal files and folders</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**4. Shares Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Displays files and folders that have been shared with others or received</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**5. Spaces Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Opens a list of collaborative spaces or team folders</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**6. Search Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Allows the user to search through files, folders, and content</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**7. Recents Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Shows a list of recently accessed or modified files</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**8. Available Offline Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Displays files that are marked for offline access</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**9. Status Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Indicates the current sync or connection status</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**10. Add Account Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Lets the user add a new account to the application</li>
<li style={{ backgroundColor: '#E2BAFF', padding: '4px', color: 'var(--my-text-color)' }}>**11. Settings Menue Item**</li>
<li style={{ backgroundColor: '#EDD5FF', padding: '0px', color: 'var(--my-text-color)' }}>Opens the general settings and configuration options</li>
</ul>

</div>

2 changes: 2 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
--docusaurus-highlighted-code-line-bg: rgba(4, 4, 4, 0.1);
--ifm-hr-margin-vertical: 4rem;
--ifm-leading: calc(var(--ifm-leading-desktop) * 1.25rem);
--my-text-color: #000000;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
Expand All @@ -50,6 +51,7 @@
--ifm-color-primary-light: #dab0f8;
--ifm-color-primary-lighter: #e3c2fa;
--ifm-color-primary-lightest: #fbf7fe;
--my-text-color: #000000;

--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
Expand Down