[FIX] web, *: fix buttons squashing and spacing

*: calendar, google_calendar, microsoft_calendar;

task-3410165
part of task-3326263

X-original-commit: b680a6ac5769bf8e02921a9548792c7696992955
Part-of: odoo/odoo#129568
This commit is contained in:
Elisabeth Dickinson
2023-07-26 09:22:07 +02:00
parent 51458c3704
commit 41c9bccf6e
6 changed files with 33 additions and 50 deletions
@@ -4,17 +4,17 @@
<DatePicker position="after">
<div id="calendar_sync_wrapper" t-if="isSystemUser">
<div id="calendar_sync_title" class="o_calendar_sync text-center">
<span class="text-primary fs-6">Synchronize with:</span>
<span>Synchronize with:</span>
</div>
<div id="calendar_sync" class="container inline btn-group justify-content-evenly align-items-center">
<div id="calendar_sync" class="container btn-group justify-content-center align-items-center gap-2">
<div id="google_calendar_sync" class="o_calendar_sync" t-if="isSystemUser">
<button type="button" id="google_sync_activate" class="btn btn-muted" t-on-click="() => this.configureCalendarProviderSync('google')">
<b><i class='fa fa-plug'/> Google</b>
<button type="button" id="google_sync_activate" class="btn btn-light" t-on-click="() => this.configureCalendarProviderSync('google')">
<b><i class='fa fa-plug fa-fw'/> Google</b>
</button>
</div>
<div id="microsoft_calendar_sync" class="o_calendar_sync" t-if="isSystemUser">
<button type="button" id="microsoft_sync_activate" class="btn btn-muted" t-on-click="() => this.configureCalendarProviderSync('microsoft')">
<b><i class='fa fa-plug'/> Outlook</b>
<button type="button" id="microsoft_sync_activate" class="btn btn-light" t-on-click="() => this.configureCalendarProviderSync('microsoft')">
<b><i class='fa fa-plug fa-fw'/> Outlook</b>
</button>
</div>
</div>
@@ -1,17 +1,10 @@
.o_calendar_sidebar {
.o_google_sync_button_configured {
color: white;
height: 2em;
.o_calendar_sidebar .o_google_sync_button_configured {
&:hover {
#google_check {
display: none;
}
}
&:not(:hover) {
#google_stop {
display: none;
}
}
&:hover #google_check {
display: none;
}
&:not(:hover) #google_stop {
display: none;
}
}
@@ -6,16 +6,16 @@
</xpath>
<xpath expr="//div[@id='google_calendar_sync']" position="replace">
<div id="google_calendar_sync" class="o_calendar_sync">
<button t-if="!model.googleIsSync" type="button" id="google_sync_pending" class="o_google_sync_button o_google_sync_pending btn btn-secondary btn" t-on-click="onGoogleSyncCalendar">
<button t-if="!model.googleIsSync" type="button" id="google_sync_pending" class="o_google_sync_button o_google_sync_pending btn btn-secondary text-nowrap" t-on-click="onGoogleSyncCalendar">
<b><i class='fa fa-refresh'/> Google</b>
</button>
<!-- class change on hover -->
<button t-else="" type="button" id="google_sync_configured" class="me-1 o_google_sync_button o_google_sync_button_configured btn text-bg-primary" t-on-click="onStopGoogleSynchronization"
t-on-mouseenter="(ev) => {ev.target.classList.remove('text-bg-primary');ev.target.classList.add('text-bg-danger');}"
t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('text-bg-primary');}">
<button t-else="" type="button" id="google_sync_configured" class="me-1 o_google_sync_button o_google_sync_button_configured btn btn-outline-primary" t-on-click="onStopGoogleSynchronization"
t-on-mouseenter="(ev) => {ev.target.classList.remove('btn-outline-primary');ev.target.classList.add('btn-danger');}"
t-on-mouseleave="(ev) => {ev.target.classList.remove('btn-danger');ev.target.classList.add('btn-outline-primary');}">
<b>
<i id="google_check" class='fa fa-check'/>
<i id="google_stop" class='fa fa-times'/>
<i id="google_check" class='fa fa-check fa-fw'/>
<i id="google_stop" class='fa fa-times fa-fw'/>
<span class="mx-1">Google</span>
</b>
</button>
@@ -1,20 +1,10 @@
.o_calendar_sidebar {
.bg-primary {
background-color: $o-enterprise-action-color;
}
.o_microsoft_sync_button_configured {
color: white;
height: 2em;
.o_calendar_sidebar .o_microsoft_sync_button_configured {
&:hover {
#microsoft_check {
display: none;
}
}
&:not(:hover) {
#microsoft_stop {
display: none;
}
}
&:hover #microsoft_check {
display: none;
}
&:not(:hover) #microsoft_stop {
display: none;
}
}
@@ -6,16 +6,16 @@
</xpath>
<xpath expr="//div[@id='microsoft_calendar_sync']" position="replace">
<div id="microsoft_calendar_sync" class="o_calendar_sync">
<button t-if="!model.microsoftIsSync" type="button" id="microsoft_sync_pending" class="o_microsoft_sync_button o_microsoft_sync_pending btn btn-secondary btn" t-on-click="onMicrosoftSyncCalendar">
<button t-if="!model.microsoftIsSync" type="button" id="microsoft_sync_pending" class="o_microsoft_sync_button o_microsoft_sync_pending btn btn-secondary text-nowrap" t-on-click="onMicrosoftSyncCalendar">
<b><i class='fa fa-refresh'/> Outlook</b>
</button>
<!-- class change on hover -->
<button t-else="" type="button" id="microsoft_sync_configured" class="me-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn text-bg-primary" t-on-click="onStopMicrosoftSynchronization"
t-on-mouseenter="(ev) => {ev.target.classList.remove('text-bg-primary');ev.target.classList.add('text-bg-danger');}"
t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('text-bg-primary');}">
<button t-else="" type="button" id="microsoft_sync_configured" class="me-1 o_microsoft_sync_button o_microsoft_sync_button_configured btn btn-outline-primary" t-on-click="onStopMicrosoftSynchronization"
t-on-mouseenter="(ev) => {ev.target.classList.remove('btn-outline-primary');ev.target.classList.add('text-bg-danger');}"
t-on-mouseleave="(ev) => {ev.target.classList.remove('text-bg-danger');ev.target.classList.add('btn-outline-primary');}">
<b>
<i id="microsoft_check" class='fa fa-check'/>
<i id="microsoft_stop" class='fa fa-times'/>
<i id="microsoft_check" class='fa fa-check fa-fw'/>
<i id="microsoft_stop" class='fa fa-times fa-fw'/>
<span class="mx-1">Outlook</span>
</b>
</button>
@@ -34,7 +34,7 @@ $o-cw-filter-avatar-size: 20px;
}
// sync buttons are only displayed on calendar.event views
.o_calendar_sync {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
}