that icons.js will convert
+ iconContainer.innerHTML = ``;
+ this.icon = document.getElementById('modal-icon');
+ // Let icons.js convert it to SVG
+ if (window.replaceIconsInElement) {
+ window.replaceIconsInElement(iconContainer);
+ this.icon = document.getElementById('modal-icon');
+ }
+ }
this.title.textContent = title;
this.label.textContent = label;
this.input.placeholder = placeholder;
diff --git a/static/js/views/shared/sharedView.js b/static/js/views/shared/sharedView.js
index 53e1771c..70a60f22 100644
--- a/static/js/views/shared/sharedView.js
+++ b/static/js/views/shared/sharedView.js
@@ -69,24 +69,35 @@ const sharedView = {
container.innerHTML = `
-
📤
-
No shared items
+
+
No shared items
Items you share will appear here
-
@@ -183,13 +194,17 @@ const sharedView = {
// Attach event listeners
attachEventListeners() {
- const filterType = document.getElementById('filter-type');
- const sortBy = document.getElementById('sort-by');
- const emptyGoToFiles = document.getElementById('empty-go-to-files');
+ // Custom dropdown logic for filter-type
+ this._initCustomSelect('filter-type-wrapper', 'filter-type-toggle', 'filter-type-dropdown');
+ // Custom dropdown logic for sort-by
+ this._initCustomSelect('sort-by-wrapper', 'sort-by-toggle', 'sort-by-dropdown');
- if (filterType) filterType.addEventListener('change', () => this.filterAndSortItems());
- if (sortBy) sortBy.addEventListener('change', () => this.filterAndSortItems());
- if (emptyGoToFiles) emptyGoToFiles.addEventListener('click', () => window.switchToFilesView());
+ // Close dropdowns when clicking outside
+ document.addEventListener('click', (e) => {
+ document.querySelectorAll('.shared-custom-select.open').forEach(sel => {
+ if (!sel.contains(e.target)) sel.classList.remove('open');
+ });
+ });
// Share dialog (sharedView-specific IDs)
const shareDialog = document.getElementById('shared-view-edit-dialog');
@@ -226,13 +241,46 @@ const sharedView = {
}
},
+ // Initialize a custom select dropdown
+ _initCustomSelect(wrapperId, toggleId, dropdownId) {
+ const wrapper = document.getElementById(wrapperId);
+ const toggle = document.getElementById(toggleId);
+ const dropdown = document.getElementById(dropdownId);
+ if (!wrapper || !toggle || !dropdown) return;
+
+ toggle.addEventListener('click', (e) => {
+ e.stopPropagation();
+ // Close other open selects
+ document.querySelectorAll('.shared-custom-select.open').forEach(sel => {
+ if (sel !== wrapper) sel.classList.remove('open');
+ });
+ wrapper.classList.toggle('open');
+ });
+
+ dropdown.querySelectorAll('.shared-select-option').forEach(option => {
+ option.addEventListener('click', (e) => {
+ e.stopPropagation();
+ // Update active state
+ dropdown.querySelectorAll('.shared-select-option').forEach(o => o.classList.remove('active'));
+ option.classList.add('active');
+ // Update label
+ const label = toggle.querySelector('.shared-select-label');
+ if (label) label.textContent = option.textContent;
+ // Close dropdown
+ wrapper.classList.remove('open');
+ // Trigger filter
+ this.filterAndSortItems();
+ });
+ });
+ },
+
// Filter and sort items
filterAndSortItems() {
- const filterType = document.getElementById('filter-type');
- const sortBy = document.getElementById('sort-by');
+ const filterTypeActive = document.querySelector('#filter-type-dropdown .shared-select-option.active');
+ const sortByActive = document.querySelector('#sort-by-dropdown .shared-select-option.active');
- const type = filterType ? filterType.value : 'all';
- const sort = sortBy ? sortBy.value : 'date';
+ const type = filterTypeActive ? filterTypeActive.dataset.value : 'all';
+ const sort = sortByActive ? sortByActive.dataset.value : 'date';
// Use the top-bar search if available, otherwise no filter
const topSearch = document.getElementById('shared-search');
diff --git a/static/login.html b/static/login.html
index 9fda1ec0..1d55b704 100644
--- a/static/login.html
+++ b/static/login.html
@@ -8,8 +8,8 @@
-
-
+
+
diff --git a/static/profile.html b/static/profile.html
index 1d831a00..c95eb062 100644
--- a/static/profile.html
+++ b/static/profile.html
@@ -6,7 +6,8 @@
OxiCloud — My Profile
-
+
+
diff --git a/static/shared.html b/static/shared.html
index 348d939d..a613d580 100644
--- a/static/shared.html
+++ b/static/shared.html
@@ -6,7 +6,8 @@
OxiCloud - Shared Resources
-
+
+