I'm attempting to recreate the functionality of Jira where I can create a "gadget" that can be added to a board, resized, moved, and deleted.
(For those unfamiliar with why this might be useful, think of gadgets like the "Gantt" gadget. You can add a gadget to your dashboard to display tasks in a Gantt format, or a deadline tracker, tasks counter, Sprint burn chart, etc.)
After struggling for several days and feeling ready to give up, I am reaching out for assistance.
HTML:
- It's quite simple - just a list and a slider. When people visit the page, they can click the plus button, which will bring up a slider with a list of items (gadgets) that can be clicked on to insert the gadget.
CSS:
- Also straightforward, mainly for formatting the slider.
TS:
- Equally simple, primarily interacting with the slider.
// AngularJS imports and component details are here....container {
/* CSS styles for container */
}
.slider {
/* Slider styles */
}
.toggle-btn {
/* Toggle button styles */
}
.slider-list {
/* List styling for slider items */
}
.slider-item {
/* Styling for individual slider item */
}
/* Additional CSS code... */
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div class="container">
<div class="slider" [ngClass]="{'slider-open': sliderOpen}">
<ul class="slider-list">
<!-- Slider item markup -->
</ul>
</div>
<button (click)="toggleSlider()" class="toggle-btn">+</button>
</div>The main goal is as follows:
I aim to add gadgets to the screen similar to Jira's gadgets.
Imagine the screen as a 10x10 matrix. When clicking an item from the slider (like the book item), I want to insert the component into the first empty space in the matrix. Additionally, I should be able to resize it (e.g., from 1x1 to 2x1), move it around, and delete it.
This is why I have included the import statement: "import { ReadingNowTrackerComponent } from './gadgets/ReadingNow Tracker/ReadingNowTracker.component';". My attempts to place this component in the matrix resulted in overflow issues or failure to position correctly.
If you could assist by reviewing my code and helping me achieve the desired outcome, I would greatly appreciate it.
Thank you!