Skip to content

Commit ca8a961

Browse files
rexmarkhrexmarkh
committed
drag & drop issue fixed
1 parent 8ebd353 commit ca8a961

File tree

6 files changed

+624
-158
lines changed

6 files changed

+624
-158
lines changed

‎src/app/retrospective/components/retro-column/retro-column.component.ts‎

Lines changed: 112 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { NzEmptyModule } from 'ng-zorro-antd/empty';
1111
import { CdkDropList, CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';
1212
import { RetroColumn, StickyNote, StickyNoteColor } from '../../interfaces/retrospective.interface';
1313
import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
14+
import { JiraControlModule } from '../../../jira-control/jira-control.module';
1415

1516
@Component({
1617
selector: 'app-retro-column',
@@ -26,7 +27,8 @@ import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
2627
NzModalModule,
2728
NzEmptyModule,
2829
DragDropModule,
29-
StickyNoteComponent
30+
StickyNoteComponent,
31+
JiraControlModule
3032
],
3133
template: `
3234
<div class="retro-column h-full">
@@ -65,7 +67,6 @@ import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
6567
(noteChange)="onNoteChange($event)"
6668
(noteDelete)="onNoteDelete($event)"
6769
(noteVote)="onNoteVote($event)"
68-
(positionChange)="onPositionChange($event)"
6970
cdkDrag
7071
></app-sticky-note>
7172
</div>
@@ -113,43 +114,69 @@ import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
113114
<!-- Add Note Modal -->
114115
<nz-modal
115116
[(nzVisible)]="isAddNoteModalVisible"
116-
nzTitle="Add New Note"
117-
[nzOkDisabled]="!newNoteContent.trim()"
118-
nzOkText="Add Note"
119-
nzCancelText="Cancel"
120-
(nzOnOk)="addNote()"
121-
(nzOnCancel)="cancelAddNote()"
122-
nzWidth="500px"
117+
nzClosable="false"
118+
nzFooter="null"
119+
nzWidth="600px"
123120
>
124121
<ng-container *nzModalContent>
125-
<div class="space-y-4">
126-
<div>
127-
<label class="block text-sm font-medium text-gray-700 mb-2">Note Content</label>
128-
<textarea
129-
[(ngModel)]="newNoteContent"
130-
class="w-full p-3 border border-gray-300 rounded text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
131-
cdkTextareaAutosize
132-
#cdkTextareaAutosize="cdkTextareaAutosize"
133-
[cdkAutosizeMinRows]="3"
134-
[cdkAutosizeMaxRows]="6"
135-
placeholder="What would you like to share?"
136-
#noteInput
137-
></textarea>
138-
</div>
139-
140-
<div>
141-
<label class="block text-sm font-medium text-gray-700 mb-2">Color</label>
142-
<div class="flex gap-2">
143-
<div
144-
*ngFor="let color of colorOptions"
145-
class="w-8 h-8 rounded-lg cursor-pointer border-2 hover:scale-110 transition-transform"
146-
[style.background-color]="getColorValue(color)"
147-
[class.border-gray-800]="selectedColor === color"
148-
[class.border-gray-300]="selectedColor !== color"
149-
(click)="selectedColor = color"
150-
></div>
122+
<div class="px-8 py-5">
123+
<div class="flex items-center py-3 text-textDarkest">
124+
<div class="text-xl">
125+
Add New Note
151126
</div>
127+
<div class="flex-auto"></div>
128+
<j-button icon="times"
129+
[iconSize]="24"
130+
(click)="cancelAddNote()"
131+
[className]="'btn-empty'">
132+
</j-button>
152133
</div>
134+
<form class="note-form retro-modal-form">
135+
<div class="form-group">
136+
<label class="label">
137+
Note Content
138+
</label>
139+
<textarea
140+
[(ngModel)]="newNoteContent"
141+
class="form-input"
142+
cdkTextareaAutosize
143+
#cdkTextareaAutosize="cdkTextareaAutosize"
144+
[cdkAutosizeMinRows]="3"
145+
[cdkAutosizeMaxRows]="6"
146+
placeholder="What would you like to share?"
147+
#noteInput
148+
></textarea>
149+
</div>
150+
151+
<div class="mt-3 form-group">
152+
<label class="label">
153+
Color
154+
</label>
155+
<div class="flex gap-2">
156+
<div
157+
*ngFor="let color of colorOptions"
158+
class="w-8 h-8 rounded-lg cursor-pointer border-2 hover:scale-110 transition-transform"
159+
[style.background-color]="getColorValue(color)"
160+
[class.border-gray-800]="selectedColor === color"
161+
[class.border-gray-300]="selectedColor !== color"
162+
(click)="selectedColor = color"
163+
></div>
164+
</div>
165+
</div>
166+
167+
<div class="mt-5 form-group form-action">
168+
<j-button className="btn-primary mr-2"
169+
type="submit"
170+
[disabled]="!newNoteContent.trim()"
171+
(click)="addNote()">
172+
Add Note
173+
</j-button>
174+
<j-button className="btn-empty"
175+
(click)="cancelAddNote()">
176+
Cancel
177+
</j-button>
178+
</div>
179+
</form>
153180
</div>
154181
</ng-container>
155182
</nz-modal>
@@ -205,8 +232,11 @@ import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
205232
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
206233
}
207234
208-
.cdk-drop-list.cdk-drop-list-receiving .cdk-drag {
209-
display: none;
235+
.cdk-drop-list.cdk-drop-list-receiving .cdk-drag-placeholder {
236+
opacity: 0.3;
237+
background: #f3f4f6;
238+
border: 2px dashed #d1d5db;
239+
border-radius: 8px;
210240
}
211241
212242
::ng-deep .ant-card-head {
@@ -217,6 +247,51 @@ import { StickyNoteComponent } from '../sticky-note/sticky-note.component';
217247
::ng-deep .ant-card-head-title {
218248
padding: 16px 0;
219249
}
250+
251+
// Modal form styles to match create issue modal
252+
.form-action {
253+
text-align: right;
254+
}
255+
256+
.note-form {
257+
.form-group {
258+
margin-bottom: 1rem;
259+
260+
.label {
261+
margin-bottom: 0.5rem;
262+
font-weight: 500;
263+
font-size: 0.8125rem;
264+
color: #5e6c84;
265+
display: block;
266+
}
267+
}
268+
269+
// Consistent input styling
270+
.form-input {
271+
height: auto !important;
272+
padding: 8px 11px !important;
273+
border-radius: 3px !important;
274+
border: 1px solid #dfe1e6 !important;
275+
background: #fafbfc !important;
276+
font-size: 14px !important;
277+
line-height: 1.42857143 !important;
278+
width: 100% !important;
279+
resize: none !important;
280+
transition: background 0.1s, border-color 0.1s !important;
281+
282+
&:hover {
283+
background: #ebecf0 !important;
284+
border-color: #c1c7d0 !important;
285+
}
286+
287+
&:focus {
288+
background: #fff !important;
289+
border-color: #4c9aff !important;
290+
box-shadow: 0 0 0 1px #4c9aff !important;
291+
outline: none !important;
292+
}
293+
}
294+
}
220295
`]
221296
})
222297
export class RetroColumnComponent {
@@ -229,7 +304,6 @@ export class RetroColumnComponent {
229304
@Output() noteDelete = new EventEmitter<string>();
230305
@Output() noteVote = new EventEmitter<string>();
231306
@Output() noteDrop = new EventEmitter<CdkDragDrop<StickyNote[]>>();
232-
@Output() positionChange = new EventEmitter<{ noteId: string, position: { x: number, y: number } }>();
233307

234308
isAddNoteModalVisible = false;
235309
newNoteContent = '';
@@ -284,10 +358,6 @@ export class RetroColumnComponent {
284358
this.noteDrop.emit(event);
285359
}
286360

287-
onPositionChange(data: { noteId: string, position: { x: number, y: number } }) {
288-
this.positionChange.emit(data);
289-
}
290-
291361
trackByNoteId(index: number, note: StickyNote): string {
292362
return note.id;
293363
}

‎src/app/retrospective/components/sticky-note/sticky-note.component.ts‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
99
import { NzModalModule } from 'ng-zorro-antd/modal';
1010
import { NzPopoverModule } from 'ng-zorro-antd/popover';
1111
import { NzTagModule } from 'ng-zorro-antd/tag';
12-
import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';
12+
import { DragDropModule } from '@angular/cdk/drag-drop';
1313
import { StickyNote, StickyNoteColor } from '../../interfaces/retrospective.interface';
1414
import { JiraControlModule } from '../../../jira-control/jira-control.module';
1515

@@ -35,8 +35,6 @@ import { JiraControlModule } from '../../../jira-control/jira-control.module';
3535
class="sticky-note"
3636
[style.background-color]="getBackgroundColor()"
3737
[style.border-left]="'4px solid ' + getBorderColor()"
38-
cdkDrag
39-
(cdkDragEnded)="onDragEnd($event)"
4038
>
4139
<nz-card
4240
[nzBordered]="false"
@@ -131,7 +129,7 @@ import { JiraControlModule } from '../../../jira-control/jira-control.module';
131129
<div class="mb-3">
132130
<div
133131
*ngIf="!isEditing"
134-
class="text-sm leading-relaxed cursor-text min-h-[40px] p-2 rounded hover:bg-black hover:bg-opacity-5 transition-colors"
132+
class="text-sm leading-relaxed cursor-text min-h-[40px] p-2 rounded hover:bg-opacity-5 transition-colors"
135133
(click)="startEditing()"
136134
>
137135
{{ note.content }}
@@ -184,7 +182,7 @@ import { JiraControlModule } from '../../../jira-control/jira-control.module';
184182
`,
185183
styles: [`
186184
.sticky-note {
187-
width: 240px;
185+
width: 100%;
188186
min-height: 120px;
189187
border-radius: 8px;
190188
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
@@ -199,11 +197,15 @@ import { JiraControlModule } from '../../../jira-control/jira-control.module';
199197
200198
.sticky-note.cdk-drag-preview {
201199
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
202-
transform: rotate(3deg);
200+
transform: rotate(2deg) scale(1.05);
201+
z-index: 1000;
203202
}
204203
205204
.cdk-drag-placeholder {
206-
opacity: 0.3;
205+
opacity: 0.4;
206+
background: #f9fafb;
207+
border: 2px dashed #d1d5db;
208+
min-height: 120px;
207209
}
208210
209211
.cdk-drag-animating {
@@ -231,7 +233,6 @@ export class StickyNoteComponent implements OnInit, OnDestroy {
231233
@Output() noteChange = new EventEmitter<StickyNote>();
232234
@Output() noteDelete = new EventEmitter<string>();
233235
@Output() noteVote = new EventEmitter<string>();
234-
@Output() positionChange = new EventEmitter<{ noteId: string, position: { x: number, y: number } }>();
235236

236237
isEditing = false;
237238
editContent = '';
@@ -350,18 +351,4 @@ export class StickyNoteComponent implements OnInit, OnDestroy {
350351
this.noteDelete.emit(this.note.id);
351352
}
352353
}
353-
354-
onDragEnd(event: CdkDragDrop<any>) {
355-
if (event.distance.x !== 0 || event.distance.y !== 0) {
356-
const newPosition = {
357-
x: this.note.position.x + event.distance.x,
358-
y: this.note.position.y + event.distance.y
359-
};
360-
361-
this.positionChange.emit({
362-
noteId: this.note.id,
363-
position: newPosition
364-
});
365-
}
366-
}
367354
}

0 commit comments

Comments
 (0)