Improve Calendar views
Moved toolbars inside "list" and "detail" views, like we do in the other modules. With this change, it was possible to move the navitation button (chevrons) inside the top toolbar of the detail view. Also move the view headers inside a toolbar. The all-day events of the day and week views have also been moved inside this toolbar.pull/105/head
parent
eb50f94b2b
commit
fcba6f2ddb
|
@ -187,7 +187,6 @@
|
|||
{
|
||||
if (!calendarsToDisplay)
|
||||
{
|
||||
int max=0, i;
|
||||
NSArray *folders;
|
||||
SOGoAppointmentFolders *co;
|
||||
SOGoAppointmentFolder *folder;
|
||||
|
@ -298,9 +297,19 @@
|
|||
- (NSString *) labelForMonth
|
||||
{
|
||||
NSCalendarDate *nextDay;
|
||||
NSString *calendarFormat;
|
||||
BOOL isLastOrFirstDay;
|
||||
|
||||
isLastOrFirstDay = NO;
|
||||
calendarFormat = @"%b";
|
||||
|
||||
if ([currentView isEqualToString:@"dayview"])
|
||||
{
|
||||
isLastOrFirstDay = YES;
|
||||
calendarFormat = @"%B";
|
||||
}
|
||||
else
|
||||
{
|
||||
if ([currentTableDay dayOfMonth] == 1)
|
||||
{
|
||||
isLastOrFirstDay = YES;
|
||||
|
@ -313,8 +322,9 @@
|
|||
if ([nextDay dayOfMonth] == 1)
|
||||
isLastOrFirstDay = YES;
|
||||
}
|
||||
}
|
||||
|
||||
return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: @"%b" locale: locale] : nil;
|
||||
return isLastOrFirstDay? [currentTableDay descriptionWithCalendarFormat: calendarFormat locale: locale] : nil;
|
||||
}
|
||||
|
||||
- (NSString *) labelForDate
|
||||
|
@ -422,23 +432,23 @@
|
|||
numberOfDays];
|
||||
}
|
||||
|
||||
- (NSString *) daysViewClasses
|
||||
{
|
||||
NSString *daysView;
|
||||
// - (NSString *) daysViewClasses
|
||||
// {
|
||||
// NSString *daysView;
|
||||
|
||||
if ([currentView isEqualToString:@"multicolumndayview"])
|
||||
daysView = @"daysView daysViewForMultipleDays";
|
||||
// if ([currentView isEqualToString:@"multicolumndayview"])
|
||||
// daysView = @"daysView daysViewForMultipleDays";
|
||||
|
||||
else
|
||||
daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
||||
// else
|
||||
// daysView = [NSString stringWithFormat: @"daysView daysViewFor%dDays", numberOfDays];
|
||||
|
||||
return daysView;
|
||||
}
|
||||
// return daysView;
|
||||
//}
|
||||
|
||||
- (NSString *) daysViewHeaderClasses
|
||||
{
|
||||
return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
||||
}
|
||||
// - (NSString *) daysViewHeaderClasses
|
||||
// {
|
||||
// return [NSString stringWithFormat: @"%@ daysHeader", [self daysViewClasses]];
|
||||
// }
|
||||
|
||||
- (NSString *) dayClasses
|
||||
{
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
<div var:class="daysViewHeaderClasses">
|
||||
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
|
||||
|
||||
<!-- MultiColumnView -->
|
||||
<!-- Display the name of the calendar -->
|
||||
|
@ -45,20 +45,35 @@
|
|||
<div class="days dayLabels">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses">
|
||||
<var:if condition="isWeekView"><div><var:string value="labelForDay"/></div></var:if>
|
||||
<!-- Week view day header -->
|
||||
<var:if condition="isWeekView">
|
||||
<div class="sg-md-caption"><var:string value="labelForDay"/></div>
|
||||
<var:if condition="currentTableDay.isToday">
|
||||
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
</var:if>
|
||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||
<div class="sg-md-display-2 md-default-theme md-fg md-hue-1"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
<div class="sg-md-display-2 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
</var:if>
|
||||
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
||||
</var:if>
|
||||
<!-- Day view header -->
|
||||
<var:if condition="isWeekView" const:negate="YES">
|
||||
<var:if condition="currentTableDay.isToday">
|
||||
<div class="sg-md-display-4 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
</var:if>
|
||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||
<div class="sg-md-display-4 md-default-theme md-fg md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
|
||||
</var:if>
|
||||
<div class="md-default-theme md-fg md-primary md-hue-2"><var:string value="labelForMonth"/></div>
|
||||
</var:if>
|
||||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</var:if>
|
||||
|
||||
<!-- All day cells -->
|
||||
<div class="days allDays">
|
||||
<div class="allDaysView md-default-theme md-background md-bg">
|
||||
<div class="days">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses" var:day="currentTableDay.shortDateString" var:id="currentAllDayId" hour="allday">
|
||||
<sg-calendar-day-table
|
||||
|
@ -68,8 +83,11 @@
|
|||
</div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</var:if>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content class="md-flex" md-scroll-y="md-scroll-y">
|
||||
<div class="calendarView">
|
||||
|
||||
<!-- The hours -->
|
||||
<div class="hours">
|
||||
|
@ -81,7 +99,7 @@
|
|||
</div>
|
||||
|
||||
<!-- The hours cells -->
|
||||
<div var:class="daysViewClasses">
|
||||
<div class="daysView">
|
||||
<div class="days">
|
||||
<!-- MultiColumnView -->
|
||||
<var:if condition="isMultiColumnView">
|
||||
|
@ -102,6 +120,7 @@
|
|||
</var:foreach>
|
||||
</var:foreach>
|
||||
</var:if>
|
||||
<!-- DayView and WeekView -->
|
||||
<var:if condition="isNotMultiColumnView">
|
||||
<var:foreach list="daysToDisplay" item="currentTableDay">
|
||||
<div var:class="dayClasses" var:id="currentDayId" var:day-number="currentDayNumber" var:day="currentTableDay.shortDateString">
|
||||
|
@ -124,4 +143,6 @@
|
|||
</var:if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
|
@ -6,42 +7,34 @@
|
|||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<!-- <div class="menu" id="currentViewMenu">
|
||||
<ul>
|
||||
<li><var:string label:value="New Event..."/></li>
|
||||
<li><var:string label:value="New Task..."/></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Previous Day"/></li>
|
||||
<li><var:string label:value="Next Day"/></li>
|
||||
<li>!- separator -</li>
|
||||
<li><var:string label:value="Delete Event"/></li>
|
||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
||||
<li><var:string label:value="View Raw Source"/></li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Day"
|
||||
var:date="prevDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="currentDayName" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<div><var:string value="currentDayName" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Day"
|
||||
var:date="nextDayQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button md-accent"
|
||||
label:aria-label="Today"
|
||||
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Week"
|
||||
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Month"
|
||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||
</div>
|
||||
<div id="calendarContent">
|
||||
</md-toolbar>
|
||||
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="dayOverview"
|
||||
const:numberOfDays="1"
|
||||
const:currentView="dayview"/>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
|
|
|
@ -366,8 +366,10 @@
|
|||
</md-button>
|
||||
</div> -->
|
||||
</md-toolbar>
|
||||
<div layout="row">
|
||||
<md-toolbar class="view-list" ng-show="list.component.$selectedCount() == 0">
|
||||
<div layout="row" class="md-flex">
|
||||
<div class="view-list" layout="column">
|
||||
|
||||
<md-toolbar ng-show="list.component.$selectedCount() == 0">
|
||||
<!-- sort/filter mode (default) -->
|
||||
<div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
|
||||
<md-button class="sg-icon-button" label:aria-label="Search"
|
||||
|
@ -565,7 +567,7 @@
|
|||
</md-toolbar>
|
||||
|
||||
<!-- multiple-selection mode -->
|
||||
<md-toolbar class="view-list md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
|
||||
<md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="list.component.$selectedCount() > 0">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="sg-icon-button" ng-click="list.unselectComponents()">
|
||||
<md-icon>arrow_back</md-icon>
|
||||
|
@ -582,28 +584,7 @@
|
|||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<!-- day/week/month views -->
|
||||
<md-toolbar class="view-detail" hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Today"
|
||||
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Day"
|
||||
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Week"
|
||||
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Month"
|
||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
|
||||
<md-content layout="row" class="md-flex">
|
||||
<md-content class="view-list md-flex" layout="column">
|
||||
<md-content layout="column" class="view-list">
|
||||
<md-tabs md-dynamic-height="true"
|
||||
md-selected="list.selectedList">
|
||||
<!-- Events list -->
|
||||
|
@ -674,8 +655,11 @@
|
|||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</md-content>
|
||||
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView"><!-- calendar view --></div>
|
||||
</md-content>
|
||||
</div>
|
||||
<div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
|
||||
<!-- calendar view -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</script>
|
||||
|
||||
|
|
|
@ -7,42 +7,41 @@
|
|||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<div class="menu" id="currentViewMenu" ng-hide="true">
|
||||
<ul>
|
||||
<li><var:string label:value="New Event..."/></li>
|
||||
<li><var:string label:value="New Task..."/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li><var:string label:value="Previous Month"/></li>
|
||||
<li><var:string label:value="Next Month"/></li>
|
||||
<li><!-- separator --></li>
|
||||
<li><var:string label:value="Delete Event"/></li>
|
||||
<li><var:string label:value="Copy event to my calendar"/></li>
|
||||
<li><var:string label:value="View Raw Source"/></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Month"
|
||||
var:date="prevMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="monthNameOfThisMonth" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<div><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Month"
|
||||
var:date="nextMonthQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button md-accent"
|
||||
label:aria-label="Today"
|
||||
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Day"
|
||||
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Week"
|
||||
href="#/calendar/week"><md-icon>view_week</md-icon></a>
|
||||
</div>
|
||||
<div class="monthView">
|
||||
<div layout="row" layout-align="center center">
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
|
||||
<div layout="row" layout-align="center center"
|
||||
class="md-flex md-default-theme md-fg md-hue-2">
|
||||
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
|
||||
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
|
||||
</var:foreach>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-content class="md-flex" md-scroll-y="md-scroll-y">
|
||||
<div class="calendarView monthView">
|
||||
<md-grid-list
|
||||
md-cols="7"
|
||||
md-row-height="1:1">
|
||||
|
@ -56,7 +55,12 @@
|
|||
var:day-number="currentDayNumber"
|
||||
var:id="currentDayId">
|
||||
<div layout="column" layout-fill="true">
|
||||
<div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
|
||||
<var:if condition="currentTableDay.isToday">
|
||||
<div class="sg-calendar-tile-header md-default-theme md-fg md-accent md-hue-2"><var:string value="dayHeaderNumber"/></div>
|
||||
</var:if>
|
||||
<var:if condition="currentTableDay.isToday" const:negate="YES">
|
||||
<div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2"><var:string value="dayHeaderNumber"/></div>
|
||||
</var:if>
|
||||
<sg-calendar-month-day
|
||||
sg-blocks="calendar.blocks"
|
||||
sg-click="list.openEvent(event, component)"
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE container>
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
|
@ -6,29 +7,34 @@
|
|||
xmlns:rsrc="OGo:url"
|
||||
xmlns:label="OGo:label">
|
||||
|
||||
<md-content>
|
||||
<div layout="row" layout-align="center">
|
||||
<h5>
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<md-toolbar hide-sm="hide-sm">
|
||||
<div class="md-toolbar-tools">
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Previous Week"
|
||||
var:date="prevWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
|
||||
<var:string value="currentWeekName" />
|
||||
<md-button
|
||||
class="sg-icon-button"
|
||||
<div><var:string value="currentWeekName" /></div>
|
||||
<md-button class="md-icon-button"
|
||||
label:aria-label="Next Week"
|
||||
var:date="nextWeekQueryParameters.day"
|
||||
ng-click="calendar.changeView($event)"><md-icon>chevron_right</md-icon></md-button>
|
||||
</h5>
|
||||
<div class="md-flex"><!-- spacer --></div>
|
||||
<md-button class="md-icon-button md-accent"
|
||||
label:aria-label="Today"
|
||||
ng-click="app.today()"><md-icon>today</md-icon></md-button>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Day"
|
||||
href="#/calendar/day"><md-icon>view_day</md-icon></a>
|
||||
<a class="md-icon-button md-button"
|
||||
label:aria-label="Month"
|
||||
href="#/calendar/month"><md-icon>view_module</md-icon></a>
|
||||
</div>
|
||||
<div id="calendarContent">
|
||||
</md-toolbar>
|
||||
|
||||
<var:component
|
||||
className="UIxCalDayTable"
|
||||
startDate="startDate"
|
||||
const:CSSClass="weekOverview"
|
||||
const:numberOfDays="7"
|
||||
const:currentView="weekview"/>
|
||||
</div>
|
||||
</md-content>
|
||||
</container>
|
||||
|
|
|
@ -1,7 +1,18 @@
|
|||
/// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
$hours_margin: 50px;
|
||||
$scrollbar_width: 16px;
|
||||
|
||||
/**
|
||||
* Affected templates:
|
||||
* - SchedulerUI/UIxCalDayView.wox
|
||||
* - SchedulerUI/UIxCalWeekView.wox
|
||||
* - SchedulerUI/UIxCalDayTable.wox
|
||||
* - SchedulerUI/UIxCalMonthView.wox
|
||||
*/
|
||||
|
||||
[ui-view=calendars] {
|
||||
|
||||
// Decrease with of middle column (list of events and tasks)
|
||||
$listView-width: grid-step(5) !global;
|
||||
$detailView-width: grid-step(11) !global;
|
||||
|
||||
|
@ -21,31 +32,73 @@ $hours_margin: 50px;
|
|||
@include flex-col(md, 10);
|
||||
}
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 11, 2, 1);
|
||||
@include flex-col(lg, 11, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.sg-draggable {
|
||||
cursor: move;
|
||||
// The calendar view container
|
||||
.calendarView {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dayLabels {
|
||||
//color: sg-color($sogoBlue, 700);
|
||||
// The days labels appear in the toolbar
|
||||
md-toolbar {
|
||||
&.daysView {
|
||||
overflow: hidden;
|
||||
z-index: $z-index-toolbar - 1;
|
||||
.days {
|
||||
margin-left: $hours_margin;
|
||||
margin-right: $scrollbar_width; // scrollbar
|
||||
&.dayLabels {
|
||||
.day {
|
||||
text-align: center;
|
||||
padding-left: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[sg-view=dayview] {
|
||||
.dayLabels {
|
||||
.day {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &.monthView {
|
||||
// > div {
|
||||
// margin-right: $scrollbar_width;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.allDays {
|
||||
// The all-day events appear in the shrinkable toolbar, bellow the days labels
|
||||
.allDaysView {
|
||||
border-bottom: 1px solid sg-color($sogoPaper, 300);
|
||||
max-height: $sg-font-size-4 * 6;
|
||||
|
||||
.sg-event {
|
||||
margin: 2%; // See sgCalendarDayBlock.directive.js
|
||||
line-height: initial;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gradient, .text {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
// Days row
|
||||
.days {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
.day {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
border-left: 1px solid sg-color($sogoPaper, 300);
|
||||
.clickableHourCell {
|
||||
height: 40px;
|
||||
|
@ -54,26 +107,18 @@ $hours_margin: 50px;
|
|||
}
|
||||
}
|
||||
|
||||
.daysViewFor1Days,
|
||||
.daysViewFor7Days {
|
||||
margin-left: $hours_margin;
|
||||
.day {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header of month tiles
|
||||
.sg-calendar-tile-header {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: sg-color($sogoPaper, 800);
|
||||
font-size: $sg-font-size-2;
|
||||
font-weight: $sg-font-light;
|
||||
//font-weight: $sg-font-light;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
// The left column of hours
|
||||
.hours {
|
||||
color: sg-color($sogoBlue, 700);
|
||||
display: inline-block;
|
||||
|
@ -97,6 +142,12 @@ $hours_margin: 50px;
|
|||
}
|
||||
}
|
||||
|
||||
// A container for a day-long (column) of hour cells
|
||||
.hourCells {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// The outer event container
|
||||
.sg-event {
|
||||
font-size: $sg-font-size-2;
|
||||
&, md-icon {
|
||||
|
@ -105,20 +156,13 @@ $hours_margin: 50px;
|
|||
.material-icons {
|
||||
font-size: $sg-font-size-2;
|
||||
}
|
||||
.allDays & {
|
||||
margin: 2%; // See sgCalendarDayBlock.directive.js
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.daysView {
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
.hourCells {
|
||||
position: relative;
|
||||
// Events from editable calendars are draggable
|
||||
.sg-draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.sg-event {
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
|
@ -136,12 +180,6 @@ $hours_margin: 50px;
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.daysHeader {
|
||||
.sg-event {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.monthView {
|
||||
md-grid-tile {
|
||||
|
@ -149,10 +187,11 @@ $hours_margin: 50px;
|
|||
overflow: auto;
|
||||
}
|
||||
.sg-event {
|
||||
position: relative;
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
margin-bottom: 1px;
|
||||
padding: 2%;
|
||||
margin: 2%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
span { // hours
|
||||
|
@ -177,9 +216,6 @@ $hours_margin: 50px;
|
|||
right: 2px;
|
||||
bottom: 1px;
|
||||
overflow: hidden;
|
||||
.allDays & {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.gradient > IMG {
|
||||
|
|
Loading…
Reference in New Issue