Skip to content

G
gitlab-ce
Commit 587647bc authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Natalia Tepluhina
Browse files
Options

Rotation controls styling cleanup

parent 19a72b14
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 86 deletions
app/assets/stylesheets/page_bundles/oncall_schedules.scss
View file @ 587647bc
...@@ -32,13 +32,17 @@ ...@@ -32,13 +32,17 @@
.rotations-modal { .rotations-modal {
.gl-card { .gl-card {
min-width: 75%; min-width: 75%;
width: fit-content;
@include gl-bg-gray-10;
} }
&.gl-modal .modal-md { &.gl-modal .modal-md {
max-width: 640px; max-width: 640px;
} }
// TODO: move to gitlab/ui utilities
// https://gitlab.com/gitlab-org/gitlab/-/issues/297502
.gl-w-fit-content {
width: fit-content;
}
} }
//// Copied from roadmaps.scss - adapted for on-call schedules //// Copied from roadmaps.scss - adapted for on-call schedules
......
ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue
View file @ 587647bc
...@@ -208,7 +208,7 @@ export default { ...@@ -208,7 +208,7 @@ export default {
<gl-dropdown <gl-dropdown
data-testid="rotation-start-time" data-testid="rotation-start-time"
:text="format24HourTimeStringFromInt(form.startsAt.time)" :text="format24HourTimeStringFromInt(form.startsAt.time)"
class="gl-w-12 gl-pl-3" class="gl-px-3"
> >
<gl-dropdown-item <gl-dropdown-item
v-for="time in $options.HOURS_IN_DAY" v-for="time in $options.HOURS_IN_DAY"
...@@ -220,99 +220,117 @@ export default { ...@@ -220,99 +220,117 @@ export default {
<span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span> <span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span>
</gl-dropdown-item> </gl-dropdown-item>
</gl-dropdown> </gl-dropdown>
<span class="gl-pl-5"> {{ schedule.timezone }} </span> <span> {{ schedule.timezone }} </span>
</div> </div>
</gl-form-group> </gl-form-group>
</div> </div>
<div class="gl-w-fit-content">
<gl-toggle
v-model="endDateEnabled"
:label="$options.i18n.fields.endsOn.enableToggle"
label-position="left"
class="gl-mb-5"
/>
<gl-toggle <gl-card
v-model="endDateEnabled" v-if="endDateEnabled"
:label="$options.i18n.fields.endsOn.enableToggle" data-testid="rotation-ends-on"
label-position="left" class="gl-border-gray-400 gl-bg-gray-10 gl-w-fit-content"
class="gl-mb-5"
/>
<gl-card v-if="endDateEnabled" data-testid="rotation-ends-on">
<gl-form-group
:label="$options.i18n.fields.endsOn.title"
label-size="sm"
:invalid-feedback="$options.i18n.fields.endsOn.error"
> >
<div class="gl-display-flex gl-align-items-center"> <gl-form-group
<gl-datepicker :label="$options.i18n.fields.endsOn.title"
class="gl-mr-3" label-size="sm"
@input="$emit('update-rotation-form', { type: 'endsOn.date', value: $event })" :invalid-feedback="$options.i18n.fields.endsOn.error"
/> class="gl-mb-0"
<span> {{ __('at') }} </span> >
<gl-dropdown <div class="gl-display-flex gl-align-items-center">
data-testid="rotation-end-time" <gl-datepicker
:text="format24HourTimeStringFromInt(form.endsOn.time)" class="gl-mr-3"
class="gl-w-12 gl-pl-3" @input="$emit('update-rotation-form', { type: 'endsOn.date', value: $event })"
> />
<gl-dropdown-item <span> {{ __('at') }} </span>
v-for="time in $options.HOURS_IN_DAY" <gl-dropdown
:key="time" data-testid="rotation-end-time"
:is-checked="form.endsOn.time === time" :text="format24HourTimeStringFromInt(form.endsOn.time)"
is-check-item class="gl-px-3"
@click="$emit('update-rotation-form', { type: 'endsOn.time', value: time })"
> >
<span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span> <gl-dropdown-item
</gl-dropdown-item> v-for="time in $options.HOURS_IN_DAY"
</gl-dropdown> :key="time"
<div class="gl-mx-5">{{ schedule.timezone }}</div> :is-checked="form.endsOn.time === time"
</div> is-check-item
</gl-form-group> @click="$emit('update-rotation-form', { type: 'endsOn.time', value: time })"
</gl-card> >
<span class="gl-white-space-nowrap">
{{ format24HourTimeStringFromInt(time) }}</span
>
</gl-dropdown-item>
</gl-dropdown>
<span>{{ schedule.timezone }}</span>
</div>
</gl-form-group>
</gl-card>
<gl-toggle <gl-toggle
v-model="restrictToTimeEnabled" v-model="restrictToTimeEnabled"
data-testid="restricted-to-toggle" data-testid="restricted-to-toggle"
:label="$options.i18n.fields.restrictToTime.enableToggle" :label="$options.i18n.fields.restrictToTime.enableToggle"
label-position="left" label-position="left"
class="gl-my-5" class="gl-mt-5"
/> />
<gl-card v-if="restrictToTimeEnabled" data-testid="restricted-to-time"> <gl-card
<gl-form-group v-if="restrictToTimeEnabled"
:label="$options.i18n.fields.restrictToTime.title" data-testid="restricted-to-time"
label-size="sm" class="gl-mt-5 gl-border-gray-400 gl-bg-gray-10"
:invalid-feedback="$options.i18n.fields.endsOn.error"
> >
<div class="gl-display-flex gl-align-items-center"> <gl-form-group
<span> {{ __('From') }} </span> :label="$options.i18n.fields.restrictToTime.title"
<gl-dropdown label-size="sm"
data-testid="restricted-from" :invalid-feedback="$options.i18n.fields.endsOn.error"
:text="format24HourTimeStringFromInt(form.restrictedTo.from)" class="gl-mb-0"
class="gl-px-3" >
> <div class="gl-display-flex gl-align-items-center">
<gl-dropdown-item <span> {{ __('From') }} </span>
v-for="time in $options.HOURS_IN_DAY" <gl-dropdown
:key="time" data-testid="restricted-from"
:is-checked="form.restrictedTo.from === time" :text="format24HourTimeStringFromInt(form.restrictedTo.from)"
is-check-item class="gl-px-3"
@click="$emit('update-rotation-form', { type: 'restrictedTo.from', value: time })"
> >
<span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span> <gl-dropdown-item
</gl-dropdown-item> v-for="time in $options.HOURS_IN_DAY"
</gl-dropdown> :key="time"
<span> {{ __('To') }} </span> :is-checked="form.restrictedTo.from === time"
<gl-dropdown is-check-item
data-testid="restricted-to" @click="$emit('update-rotation-form', { type: 'restrictedTo.from', value: time })"
:text="format24HourTimeStringFromInt(form.restrictedTo.to)" >
class="gl-px-3" <span class="gl-white-space-nowrap">
> {{ format24HourTimeStringFromInt(time) }}</span
<gl-dropdown-item >
v-for="time in $options.HOURS_IN_DAY" </gl-dropdown-item>
:key="time" </gl-dropdown>
:is-checked="form.restrictedTo.to === time" <span> {{ __('To') }} </span>
is-check-item <gl-dropdown
@click="$emit('update-rotation-form', { type: 'restrictedTo.to', value: time })" data-testid="restricted-to"
:text="format24HourTimeStringFromInt(form.restrictedTo.to)"
class="gl-px-3"
> >
<span class="gl-white-space-nowrap"> {{ format24HourTimeStringFromInt(time) }}</span> <gl-dropdown-item
</gl-dropdown-item> v-for="time in $options.HOURS_IN_DAY"
</gl-dropdown> :key="time"
</div> :is-checked="form.restrictedTo.to === time"
</gl-form-group> is-check-item
</gl-card> @click="$emit('update-rotation-form', { type: 'restrictedTo.to', value: time })"
>
<span class="gl-white-space-nowrap">
{{ format24HourTimeStringFromInt(time) }}</span
>
</gl-dropdown-item>
</gl-dropdown>
<span>{{ schedule.timezone }} </span>
</div>
</gl-form-group>
</gl-card>
</div>
</gl-form> </gl-form>
</template> </template>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7