Skip to content

Commit

Permalink
Use existing fields for now to get the modal working again
Browse files Browse the repository at this point in the history
  • Loading branch information
@HDinger
HDinger committed Dec 9, 2024
1 parent 2d8fba3 commit 7195790
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 140 deletions.
20 changes: 0 additions & 20 deletions app/components/work_packages/date_picker/dialog_content_component.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,26 +37,6 @@
end
end
end

body.with_row(mb: 3) do
flex_layout(justify_content: :space_between, gap: 3) do |second_row|
second_row.with_column do
render(Primer::Alpha::TextField.new(name: :start_date,
label: I18n.t("attributes.start_date"),
value: work_package.start_date))
end
second_row.with_column do
render(Primer::Alpha::TextField.new(name: :due_date,
label: I18n.t("attributes.due_date"),
value: work_package.due_date))
end
second_row.with_column do
render(Primer::Alpha::TextField.new(name: :duration,
label: I18n.t("activerecord.attributes.work_package.duration"),
value: work_package.duration))
end
end
end
end
end
end
Expand Down
32 changes: 1 addition & 31 deletions frontend/src/app/shared/components/datepicker/styles/datepicker.modal.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,11 @@
&_wide
max-width: 600px

&--banner
margin-bottom: $spot-spacing-1

&:empty
visibility: hidden

&--toggle-actions-container
display: grid
grid-template-columns: auto auto 1fr
grid-column-gap: $spot-spacing-2
margin: 0 $spot-spacing-1 0
.spot-form-field--input:has(spot-switch)
margin-bottom: 0px !important

&--dates-container
display: grid
grid-template-columns: 1fr 1fr 150px
grid-gap: $spot-spacing-1
margin: $spot-spacing-1 $spot-spacing-1 0
margin: 0 $spot-spacing-1

&--date-field
&_current,
Expand All @@ -57,17 +43,6 @@
margin: 0.5rem auto 0 auto !important
overflow: hidden

&--stretch-content
flex-grow: 1
flex-shrink: 1
overflow-y: auto

// Unfortunately, we need an extra class
// Of specificity here to overwrite the
// nested spot-container styles
&.spot-container
margin-top: 0

@media screen and (max-width: $breakpoint-sm)
.op-datepicker-modal
// Use same width as spot-modal mobile
Expand All @@ -80,11 +55,6 @@
&--dates-container
grid-template-columns: 1fr 1fr

&--toggle-actions-container
display: grid
grid-template-columns: 1fr
grid-row-gap: $spot-spacing-1

&--date-form
&:only-child
grid-column: 1 / 3
176 changes: 87 additions & 89 deletions ...src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@
[src]="turboFrameSrc"
id="wp-datepicker-dialog--content">
<op-content-loader viewBox="0 0 100 100">
<svg:rect x="0" y="0" width="70" height="5" rx="1"/>
<svg:rect x="5" y="5" width="70" height="5" rx="1"/>

<svg:rect x="75" y="0" width="25" height="5" rx="1"/>
<svg:rect x="80" y="5" width="15" height="5" rx="1"/>

<svg:rect x="0" y="10" width="100" height="8" rx="1"/>
<svg:rect x="5" y="15" width="90" height="8" rx="1"/>

<svg:rect x="0" y="25" width="100" height="12" rx="1"/>
<svg:rect x="5" y="30" width="90" height="12" rx="1"/>
</op-content-loader>
</turbo-frame>

<!--<div class="spot-container op-datepicker-modal&#45;&#45;stretch-content">
<div class="op-datepicker-modal&#45;&#45;toggle-actions-container">
<!-- TODO <div class="op-datepicker-modal&#45;&#45;toggle-actions-container">
<op-datepicker-scheduling-toggle
name="scheduleManually"
[(ngModel)]="scheduleManually"
Expand All @@ -34,91 +33,90 @@
[(ngModel)]="ignoreNonWorkingDays"
(ngModelChange)="changeNonWorkingDays()"
></op-datepicker-working-days-toggle>
</div>
</div>-->

<div class="op-datepicker-modal&#45;&#45;dates-container">
<spot-form-field
[label]="text.startDate"
data-test-selector="datepicker-start-date"
>
<spot-text-field
slot="input"
name="startDate"
data-test-selector="op-datepicker-modal&#45;&#45;start-date-field"
class="op-datepicker-modal&#45;&#45;date-field"
[attr.data-qa-highlighted]="showFieldAsActive('start') || undefined"
[ngClass]="{'op-datepicker-modal&#45;&#45;date-field_current' : showFieldAsActive('start')}"
[ngModel]="dates.start"
(ngModelChange)="startDateChanged$.next($event)"
[disabled]="!isSchedulable"
[showClearButton]="currentlyActivatedDateField === 'start'"
(focusin)="setCurrentActivatedField('start')"
></spot-text-field>
<button
slot="action"
type="button"
class="spot-link"
[ngClass]="{ 'op-datepicker-modal&#45;&#45;hidden-link': !showTodayLink() }"
(click)="setToday('start')"
[textContent]="text.today">
</button>
</spot-form-field>
<spot-form-field
[label]="text.endDate"
data-test-selector="datepicker-end-date"
>
<spot-text-field
slot="input"
name="endDate"
data-test-selector="op-datepicker-modal&#45;&#45;end-date-field"
class="op-datepicker-modal&#45;&#45;date-field"
[attr.data-qa-highlighted]="showFieldAsActive('end') || undefined"
[ngClass]="{'op-datepicker-modal&#45;&#45;date-field_current' : showFieldAsActive('end')}"
[ngModel]="dates.end"
(ngModelChange)="endDateChanged$.next($event)"
[disabled]="!isSchedulable"
[showClearButton]="currentlyActivatedDateField === 'end'"
(focusin)="setCurrentActivatedField('end')"
></spot-text-field>
<button
slot="action"
type="button"
class="spot-link"
[ngClass]="{ 'op-datepicker-modal&#45;&#45;hidden-link': !showTodayLink() }"
(click)="setToday('end')"
[textContent]="text.today">
</button>
</spot-form-field>
<spot-form-field
[label]="text.duration"
data-test-selector="datepicker-duration"
>
<spot-text-field
#durationField
slot="input"
name="duration"
data-test-selector="op-datepicker-modal&#45;&#45;duration-field"
class="op-datepicker-modal&#45;&#45;date-field"
[attr.data-qa-highlighted]=" showFieldAsActive('duration') || undefined"
[ngClass]="{'op-datepicker-modal&#45;&#45;date-field_current' : showFieldAsActive('duration')}"
[ngModel]="durationFocused ? duration : displayedDuration"
[showClearButton]="currentlyActivatedDateField === 'duration'"
pattern="\d*"
inputmode="numeric"
(ngModelChange)="durationChanges$.next($event)"
[disabled]="!isSchedulable"
(focusin)="handleDurationFocusIn()"
(focusout)="handleDurationFocusOut()"
></spot-text-field>
</spot-form-field>
</div>
<div class="op-datepicker-modal--dates-container">
<spot-form-field
[label]="text.startDate"
data-test-selector="datepicker-start-date"
>
<spot-text-field
slot="input"
name="startDate"
data-test-selector="op-datepicker-modal--start-date-field"
class="op-datepicker-modal--date-field"
[attr.data-qa-highlighted]="showFieldAsActive('start') || undefined"
[ngClass]="{'op-datepicker-modal--date-field_current' : showFieldAsActive('start')}"
[ngModel]="dates.start"
(ngModelChange)="startDateChanged$.next($event)"
[disabled]="!isSchedulable"
[showClearButton]="currentlyActivatedDateField === 'start'"
(focusin)="setCurrentActivatedField('start')"
></spot-text-field>
<button
slot="action"
type="button"
class="spot-link"
[ngClass]="{ 'op-datepicker-modal--hidden-link': !showTodayLink() }"
(click)="setToday('start')"
[textContent]="text.today">
</button>
</spot-form-field>
<spot-form-field
[label]="text.endDate"
data-test-selector="datepicker-end-date"
>
<spot-text-field
slot="input"
name="endDate"
data-test-selector="op-datepicker-modal--end-date-field"
class="op-datepicker-modal--date-field"
[attr.data-qa-highlighted]="showFieldAsActive('end') || undefined"
[ngClass]="{'op-datepicker-modal--date-field_current' : showFieldAsActive('end')}"
[ngModel]="dates.end"
(ngModelChange)="endDateChanged$.next($event)"
[disabled]="!isSchedulable"
[showClearButton]="currentlyActivatedDateField === 'end'"
(focusin)="setCurrentActivatedField('end')"
></spot-text-field>
<button
slot="action"
type="button"
class="spot-link"
[ngClass]="{ 'op-datepicker-modal--hidden-link': !showTodayLink() }"
(click)="setToday('end')"
[textContent]="text.today">
</button>
</spot-form-field>
<spot-form-field
[label]="text.duration"
data-test-selector="datepicker-duration"
>
<spot-text-field
#durationField
slot="input"
name="duration"
data-test-selector="op-datepicker-modal--duration-field"
class="op-datepicker-modal--date-field"
[attr.data-qa-highlighted]=" showFieldAsActive('duration') || undefined"
[ngClass]="{'op-datepicker-modal--date-field_current' : showFieldAsActive('duration')}"
[ngModel]="durationFocused ? duration : displayedDuration"
[showClearButton]="currentlyActivatedDateField === 'duration'"
pattern="\d*"
inputmode="numeric"
(ngModelChange)="durationChanges$.next($event)"
[disabled]="!isSchedulable"
(focusin)="handleDurationFocusIn()"
(focusout)="handleDurationFocusOut()"
></spot-text-field>
</spot-form-field>
</div>

<input
#flatpickrTarget
id="flatpickr-input"
hidden
/>
</div>-->
<input
#flatpickrTarget
id="flatpickr-input"
hidden
/>

<div class="spot-action-bar">
<div class="spot-action-bar--right">
Expand Down

0 comments on commit 7195790

Please sign in to comment.