Adding dynamic form rendering in the editor for marker, image, and
teleport elements. Now, when creating a new element, a form is
dynamically generated based on the element type selected. This
enhancement improves the user experience by providing a tailored
interface for inputting properties specific to each type of element,
such as title, text for markers, and file upload for images. This update
streamlines the creation process and ensures users have a clear,
context-specific set of fields when adding new elements to their
projects.
Adjusted the modal content in the editor's JavaScript to dynamically
update based on the type of element being created, improving user
interaction and feedback during the element creation process. The change
includes fixing incorrect references to modal labels and contents,
adding CSRF token support for form submissions, and dynamically
showing/hiding buttons based on the context of the element creation.
Additionally, event listeners are set up to handle different element
types (Marker, Image, Teleport), further enhancing the user experience
by tailoring the UI to the selected element type. This update aims to
make the editor more intuitive and responsive to user actions, reducing
potential confusion and improving the flow of creating various types of
elements within the application.
library
- Implemented the media deletion functionality, allowing users to delete
media entries directly from the category view. This enhances the
manageability of content within the platform, providing a more intuitive
and streamlined experience for users managing their media.
- Transitioned from FontAwesome to Phosphor Icons, opting for a lighter
and more flexible icon library that better aligns with the design ethos
of the application. This change not only introduces a fresh aesthetic
but also contributes to slightly improved page load times due to the
decreased footprint of the icon library.
- Updated various UI elements across the platform to maintain a
consistent look and feel, including adjustments in the user area CSS to
ensure visual compatibility with the new icon set.
- Broadened the scope of `.gitignore` to cover all JavaScript files
within the static/js directory, eliminating potential version control
clutter caused by dynamically generated or dependency-included JS files.
These changes collectively aim to refine user interaction and ensure a
more cohesive visual presentation throughout the application.
Introduced a new API endpoint to retrieve media for a given category,
enhancing the user experience by dynamically updating thumbnails
post-upload based on available resolutions. This connects the frontend
to the backend efficiently, ensuring users can see the immediate impact
of their uploads. Additionally, updated serializers and views in the
backend to support this functionality, alongside improving code comments
for future development clarity.
- Implemented `getCategoryMedia` in the JS API for fetching media
resolutions.
- Enabled dynamic thumbnail updates in the user area post file upload,
improving visual feedback.
- Extended the Django REST framework routers to include the new media
endpoint, facilitating easier access to media items.
- Updated the `OriginalMediaSerializer` to include `category` for more
detailed media information.
- Enriched task and views files with necessary TODO comments to guide
future enhancements and exception handling.
This change significantly improves the content management workflow,
making it more interactive and user-friendly.
Enhanced the file upload feedback mechanism in `userarea.js` by
introducing a clearer, success indication and preparing for future
implementations where upload completion will trigger additional checks
against the API for resolution availability. This change brings a more
intuitive user experience during file uploads and lays groundwork for
next steps in upload handling, ensuring users are better informed of the
upload status in real-time.
- Imported `getElementById` for future feature expansion.
- Added a TODO comment as a placeholder for upcoming API check
functionality.
UX
Uniformly changed single quotes to double quotes for consistency
throughout userarea.js. Improved the file upload feature by refining the
visual feedback during file upload processes. This includes more
descriptive progress and success/error messages, ensuring users have
clear, immediate insight into the state of their uploads. Additionally,
refined the data submission structure in `uploadFile`, explicitly
assigning file type and title, optimizing for better server-side
processing. These changes enhance code readability and user experience.
visibly
Improve user feedback during file uploads by explicitly handling HTTP
201 responses as successful uploads. Upon a successful upload, the
progress bar now turns green (`bg-success`) and displays a "Success!"
message, providing a clearer and more immediate visual cue to the user
that their file has been successfully uploaded. This change addresses
usability issues by making the upload progress and outcome more
discernible to users.
This commit overhauls the user area with the addition of comprehensive
file upload capabilities for images and videos. Notably, it integrates
front-end enhancements for drag-and-drop uploads in the user area and
introduces a secure back-end handling process. The back-end adjustments
include a new media upload view and adjustments to image and video
models to support large file handling through settings for maximum image
pixel limits. Additionally, the refactor standardizes CSRF token
retrieval across JavaScript modules, improving security and code
maintainability.
- Front-end additions include detailed user feedback during the file
upload process, such as progress bars and success/error indicators.
- Back-end improvements ensure large image files are processed
efficiently, mitigating potential memory issues by configuring a maximum
image pixel threshold.
- Consolidating the CSRF token retrieval into the `api.js` module
centralizes security mechanisms, reducing redundancy and enhancing the
codebase's clarity.
Overall, these changes enrich the platform's media management
capabilities, bolster security practices, and improve user experience
through intuitive interface updates and robust back-end processing.
Removed unused "getCategory" import from the "scene.js" file to clean up
the code and improve maintainability. This change simplifies the
codebase by eliminating unnecessary imports, thus enhancing readability
and potentially reducing the bundle size slightly, assuming there are no
other references to "getCategory" that would keep it in the final
bundle. This adjustment forms part of an ongoing effort to optimize and
streamline the codebase.
Refactored the scene script to extract the logic for loading sidebars
and navbars into separate, modular files. This change enhances code
maintainability and readability by compartmentalizing responsibilities
and clarifying function boundaries. Now, `navbar.js` and `sidebar.js`
handle the UI component rendering, allowing for easier updates and
potential reuse. Adjusted conditional rendering logic to ensure
exclusive navbar or sidebar presence, aligning UI behavior with design
expectations.
This commit signifies a step towards modular architecture in the
frontend codebase, facilitating future expansion and modification.
Implemented user permissions management functionality across the system,
enhancing control over category access and operations. This includes a
new DataTable in the user area for permissions, updated model relations
with explicit related names for better query readability, and a
migration to enforce these changes at the database level. Additionally,
the UI now features options for ending category membership, deleting
categories, inviting users, and transferring ownership based on user
roles and permissions. This comprehensive update aims at providing more
granular access control and operational flexibility for category owners
and system administrators.
Introduced new styles for the sidebar's open and close buttons to
enhance visibility and user interaction. Updated the sidebar logic in
the JavaScript to include a toggle functionality, allowing users to
easily open and close the sidebar. This improves the user experience by
making navigation more intuitive and the UI cleaner. The 'Close Sidebar'
button now directly closes the sidebar, and a new 'Open Sidebar' button
appears when the sidebar is closed, providing a clear action cue to the
users.
Introduce a new sidebar in the UI for enhanced navigation through
scenes. This feature includes CSS modifications for styling, updates in
JavaScript to dynamically load sidebar content based on scene
categories, and template adjustments to include the sidebar option. By
leveraging the Collapse component from Bootstrap alongside existing
infrastructure, this addition enriches user interaction by providing a
convenient and visually appealing method to explore different scenes
within the application. The sidebar's design and functionality are
thoughtfully integrated to ensure a cohesive and user-friendly
experience.
The decision to implement a sidebar stemmed from the need to improve
navigational efficiency and user engagement with the content. This
change is part of a broader effort to enhance the UI/UX of the
application, aiming to make the exploration of scenes more intuitive and
accessible.
Introduced a new CSS file for styling a fixed navbar in scenes,
enhancing user navigation within the virtual environment. Modified
scene.js to include fetching categories and generating a navbar with
scene options dynamically based on the category of the current scene.
This allows users to switch scenes more intuitively. The `nonavbar`
attribute was added for scenes where the navbar should be omitted,
providing flexibility in scene presentation. Additionally, streamlined
CSS and SCSS imports across JS files for consistency and removed an
unnecessary SCSS import from editor.js, optimizing load times and
project structure.
This update significantly improves user experience by facilitating
easier navigation and scene exploration within the application.
Implemented a new function to fetch the CSRF token from cookies in the
editor's JavaScript. This ensures secure AJAX requests by validating the
client's sessions, enhancing the application's security against
cross-site request forgery attacks. The addition is a crucial step
towards securing forms and API calls within the editor environment.
Migrated the SCSS import for the frontend directly into editor.js and
userarea.js from frontend.js, removing redundancy by consolidating style
imports. This adjustment enables more coherent management of SCSS files
and removes the need for a separate frontend bundle. Consequently,
frontend.js and its references in HTML templates were removed to clean
up the codebase and simplify the asset pipeline. These changes should
make future maintenance of CSS easier and improve load times by reducing
unnecessary scripting and network requests.
- Added FontAwesome for enriched UI iconography.
- Implemented permission checks in scene edit view to prevent
unauthorized edits.
- Adjusted scene links in the category template for direct edit access,
streamlining the user workflow.
These changes aim at both enhancing the visual elements of the interface
and strengthening the security model by ensuring that only authorized
users can edit scenes. The direct edit links in the category view
further simplify navigation, making the system more intuitive for users.
Introduced significant updates to the user interface for editing VR
scenes, adding new CSS styles for a coherent and modern look.
Implemented data tables for robust content management in the user area,
now users can easily navigate through scenes and media with DataTables
integration. Expanded the API with category retrieval capabilities,
enabling dynamic content categorization.
The editor now seamlessly integrates into the UI with a sidebar for
properties editing, improving usability. The teleportation element
creation and modification logic has been significantly refined,
including a search-enabled dropdown for destination selection, making it
more user-friendly. Added thumbnail display for scenes and media in the
user area, enhancing content overview.
This update also introduced user area templates and routes, providing a
foundational structure for user content management functionality,
including categories and individual category views.
Refactored JavaScript imports to align with the new editor CSS and
adjusted scene loading to support embedded scenes, improving the
flexibility and usability of scene components.
Removed console.log statements for x, y, and z coordinates in the
QuackscapeScene class. This cleanup reduces clutter in the console
during scene initialization, leading to a cleaner and more professional
debug output. No functional impact on scene loading.
Added a workaround to limit texture size on iOS devices to prevent
issues with rendering performance. This change introduces a detection
mechanism for iOS and caps the maximum texture size to 8192 when an iOS
device is identified.
This update introduces support for a third dimension (Z-axis) in scene
positioning and orientation, enhancing 3D scene rendering capabilities.
Changes include parsing the Z-coordinate attribute in scene elements,
updating the `loadScene` function to accommodate the new axis, and
extending the models to store this additional data. This pivotal
enhancement allows a more refined and immersive user experience by
enabling depth control in scene navigation and interactivity. The
modification paves the way for future developments in 3D scene
manipulation and interaction within the application.
