mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-02-19 16:36:23 +00:00
910effd664
When viewing a calendar, 4 buttons allow to switch between the day, week, month and multicolumnday views. Each of these view show the button to swith to the day view as disabled, regradless of which view is in use. Adjust markup to disable the button of the current view instead of the one used to switch to the day view.
147 lines
7.3 KiB
XML
147 lines
7.3 KiB
XML
<?xml version="1.0" standalone="yes"?>
|
|
<!DOCTYPE container>
|
|
<container
|
|
xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:var="http://www.skyrix.com/od/binding"
|
|
xmlns:const="http://www.skyrix.com/od/constant"
|
|
xmlns:rsrc="OGo:url"
|
|
xmlns:label="OGo:label">
|
|
|
|
<md-card>
|
|
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
|
|
<md-button ng-click="toggleCenter({save: true})"
|
|
class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
|
aria-hidden="true">
|
|
<md-tooltip ng-if="centerIsClose" md-direction="bottom">{{ ::'Reduce' | loc }}</md-tooltip>
|
|
<md-tooltip ng-else="centerIsClose" md-direction="bottom">{{ ::'Expand' | loc }}</md-tooltip>
|
|
<md-icon>{{ centerIsClose ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
|
|
</md-button>
|
|
<md-button class="md-icon-button"
|
|
label:aria-label="Previous Month"
|
|
var:date="prevMonthQueryParameters.day"
|
|
ng-click="calendar.changeDate($event)"
|
|
md-no-ink="md-no-ink">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Previous Month"/></md-tooltip>
|
|
<md-icon>chevron_left</md-icon>
|
|
</md-button>
|
|
<md-button class="md-icon-button"
|
|
label:aria-label="Next Month"
|
|
var:date="nextMonthQueryParameters.day"
|
|
ng-click="calendar.changeDate($event)"
|
|
md-no-ink="md-no-ink">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Next Month"/></md-tooltip>
|
|
<md-icon>chevron_right</md-icon>
|
|
</md-button>
|
|
<md-datepicker md-hide-icons="triangle"
|
|
md-open-on-focus="md-open-on-focus"
|
|
ng-model="calendar.selectedDate"
|
|
ng-change="calendar.changeDate($event, calendar.selectedDate)"
|
|
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
|
|
<div class="md-flex"><!-- spacer --></div>
|
|
<md-button class="md-icon-button hide-gt-sm" label:aria-label="Today"
|
|
var:date="todayQueryParameters.day"
|
|
ng-click="calendar.changeDate($event)"
|
|
md-no-ink="md-no-ink">
|
|
<md-icon>arrow_downward</md-icon>
|
|
</md-button>
|
|
<md-button class="hide show-gt-sm" label:aria-label="Today"
|
|
var:date="todayQueryParameters.day"
|
|
ng-click="calendar.changeDate($event, null, true)"
|
|
md-no-ink="md-no-ink">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Go to today"/></md-tooltip>
|
|
<var:string label:value="Today"/>
|
|
</md-button>
|
|
<a class="md-icon-button md-button"
|
|
label:aria-label="Day"
|
|
ng-click="calendar.changeView($event, 'day')">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Switch to day view"/></md-tooltip>
|
|
<md-icon>view_day</md-icon>
|
|
</a>
|
|
<a class="md-icon-button md-button"
|
|
label:aria-label="Week"
|
|
ng-click="calendar.changeView($event, 'week')">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Switch to week view"/></md-tooltip>
|
|
<md-icon>view_week</md-icon>
|
|
</a>
|
|
<a class="md-icon-button md-button"
|
|
label:aria-label="Month"
|
|
ng-disabled="true"
|
|
ng-click="calendar.changeView($event, 'month')">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Switch to month view"/></md-tooltip>
|
|
<md-icon>view_module</md-icon>
|
|
</a>
|
|
<a class="md-icon-button md-button"
|
|
label:aria-label="Multicolumn Day View"
|
|
ng-click="calendar.changeView($event, 'multicolumnday')">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Switch to multi-columns day view"/></md-tooltip>
|
|
<md-icon>view_array</md-icon>
|
|
</a>
|
|
<md-button class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
|
|
label:aria-label="Print"
|
|
ng-click="calendar.printView(centerIsClose, list.componentType)">
|
|
<md-tooltip md-direction="bottom"><var:string label:value="Print the current calendar view"/></md-tooltip>
|
|
<md-icon>print</md-icon>
|
|
</md-button>
|
|
</md-card-actions>
|
|
|
|
<md-toolbar class="monthView">
|
|
<div layout="row" layout-align="center center"
|
|
class="md-default-theme md-fg md-hue-1">
|
|
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
|
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
|
</var:foreach>
|
|
</div>
|
|
</md-toolbar>
|
|
|
|
<md-content class="md-flex" sg-calendar-scroll-view="monthly">
|
|
<div class="calendarView monthView">
|
|
<md-grid-list
|
|
var:md-cols="headerDaysToDisplay.count"
|
|
md-row-height="fit"
|
|
md-gutter="0">
|
|
<var:foreach list="weeksToDisplay" item="currentWeek">
|
|
<var:foreach list="currentWeek" item="currentTableDay">
|
|
<md-grid-tile
|
|
md-rowspan="1"
|
|
md-colspan="1"
|
|
var:class="dayCellClasses"
|
|
var:id="currentDayId"
|
|
>
|
|
<sg-calendar-day layout="column" layout-fill="layout-fill"
|
|
var:sg-day="currentTableDay.shortDateString"
|
|
var:sg-day-number="currentDayNumber"
|
|
var:sg-day-string="currentTableDay.iso8601DateString">
|
|
<!-- Week number -->
|
|
<var:if condition="isFirstDayOfWeek">
|
|
<div class="sg-calendar-tile-week">
|
|
<span class="md-default-theme md-default-theme md-hue-1 md-bg"><var:string label:value="W"/><var:string value="currentWeekNumber"/></span>
|
|
</div>
|
|
</var:if>
|
|
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
|
|
<var:if condition="currentTableDay.isToday">
|
|
<span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
|
|
</var:if>
|
|
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
|
<span><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
|
|
</var:if>
|
|
</div>
|
|
<md-content class="clickableDayCell"
|
|
sg-draggable-calendar-block="sg-draggable-calendar-block">
|
|
<sg-calendar-month-day
|
|
sg-blocks="calendar.views[0].blocks"
|
|
sg-click="list.openEvent(event, component)"
|
|
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
|
|
</md-content>
|
|
<sg-calendar-month-event
|
|
sg-calendar-ghost="sg-calendar-ghost"
|
|
sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
|
|
</sg-calendar-day>
|
|
</md-grid-tile>
|
|
</var:foreach>
|
|
</var:foreach>
|
|
</md-grid-list>
|
|
</div>
|
|
</md-content>
|
|
</md-card>
|
|
</container>
|