Move sidebox buttons into a toolbar

This commit is contained in:
Nathan Gray 2016-01-06 18:24:45 +00:00
parent 4d0977f8f9
commit 556495e6cc
15 changed files with 279 additions and 104 deletions

View File

@ -613,7 +613,6 @@ class calendar_ui
}
$sidebox = new etemplate_new('calendar.sidebox');
$content = $this->cal_prefs['saved_states'];
$content['view'] = $this->view ? $this->view : 'week';
$content['date'] = $this->date ? $this->date : egw_time();
@ -633,63 +632,6 @@ class calendar_ui
}
$readonlys = array();
foreach(array(
array(
'text' => lang('dayview'),
'value' => '{"view":"day"}',
'selected' => $this->view == 'day',
),
array(
'text' => lang('four days view'),
'value' => '{"view":"day4","days":4}',
'selected' => $this->view == 'day4',
),
array(
'text' => lang('weekview'),
'value' => '{"view":"week"}',
'selected' => $this->view == 'week',
),
array(
'text' => lang('Multiple week view'),
'value' => '{"view":"weekN"}',
'selected' => $this->view == 'weekN',
),
array(
'text' => lang('monthview'),
'value' => '{"view":"month"}',
'selected' => $this->view == 'month',
),
array(
'text' => lang('planner by category'),
'value' => '{"view":"planner", "sortby":"category"}',
'selected' => $this->view == 'planner' && $this->sortby != 'user',
),
array(
'text' => lang('planner by user'),
'value' => '{"view":"planner","sortby":"user"}',
'selected' => $this->view == 'planner' && $this->sortby == 'user',
),
array(
'text' => lang('yearly planner'),
'value' => '{"view":"planner","sortby":"month"}',
'selected' => $this->view == 'planner' && $this->sortby == 'month',
),
array(
'text' => lang('listview'),
'value' => '{"view":"listview"}',
'selected' => $this->view == 'listview',
),
)as $data)
{
if($data['selected'])
{
$content['view'] = $data['value'];
}
$sel_options['view'][] = array(
'label' => $data['text'],
'value' => $data['value']
);
}
$sel_options['status_filter'] = array(
array('value' => 'default', 'label' => lang('Not rejected'), 'title' => lang('Show all status, but rejected')),
array('value' => 'accepted', 'label' => lang('Accepted'), 'title' => lang('Show only accepted events')),

View File

@ -391,9 +391,9 @@ class calendar_uilist extends calendar_ui
// it to match changing list filters
if($params['view'] && $params['view'] == 'listview')
{
$GLOBALS['egw_info']['flags']['app_header'] = lang('listview') . ': '.
egw_json_response::get()->call('app.calendar.set_app_header', lang('listview') . ': '.
(count($search_params['users']) == 1 ? $this->bo->participant_name($search_params['users'][0]).': ' : '') .
$label;
$label);
}
foreach((array) $this->bo->search($search_params, !empty($col_filter) ? $col_filter : null) as $event)
{

View File

@ -148,19 +148,7 @@ class calendar_uiviews extends calendar_ui
$this->extraRowsOriginal = $this->extraRows; //save original extraRows value
$GLOBALS['egw_info']['flags']['nonavbar'] = False;
$app_header = array(
'day' => lang('Dayview'),
'4day' => lang('Four days view'),
'week' => lang('Weekview'),
'month' => lang('Monthview'),
'year' => lang('yearview'),
'planner' => lang('Group planner'),
);
$GLOBALS['egw_info']['flags']['app_header'] =
(isset($app_header[$this->view]) ? $app_header[$this->view] : '').
// for a single owner we add it's name to the app-header
(count(explode(',',$this->owner)) == 1 ? ': '.$this->bo->participant_name($this->owner) : '');
// Check for GET message (from merge)
if($_GET['msg'])
{
@ -252,6 +240,11 @@ class calendar_uiviews extends calendar_ui
return;
}
// Toolbar
$tmpl = new etemplate_new('calendar.toolbar');
$tmpl->setElementAttribute('toolbar', 'actions', $this->getToolbarActions($content));
$tmpl->exec('calendar_uiviews::index',array());
// Load the different views once, we'll switch between them on the client side
$tmpl = new etemplate_new('calendar.todo');
$label = '';
@ -270,6 +263,135 @@ class calendar_uiviews extends calendar_ui
$list_ui->listview();
}
/**
* Generate the calendar toolbar actions
*
* @param Array $content
*/
protected function getToolbarActions($content = array())
{
$group = 0;
$actions = array(
'add' => array(
'caption' => 'Add',
'icon' => 'add',
'group' => ++$group,
'onExecute' => 'javaScript:egw.open(null,"calendar","add");',
'hint' => 'Add',
'toolbarDefault' => true,
),
'day_view' => array(
'caption' => 'Day view',
'icon' => 'day',
'group' => ++$group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Day view',
'toolbarDefault' => true,
'data' => array('state' => array('view' => 'day'))
),
'4day_view' => array(
'caption' => 'Four days view',
'icon' => 'day4',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Four days view',
'toolbarDefault' => false,
'data' => array('state' => array('view' => 'day4'))
),
'week_view' => array(
'caption' => 'Week view',
'icon' => 'week',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Week view',
'toolbarDefault' => true,
'data' => array('state' => array('view' => 'week'))
),
'weekN_view' => array(
'caption' => 'Multiple week view',
'icon' => 'multiweek',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Multiple week view',
'toolbarDefault' => true,
'data' => array('state' => array('view' => 'weekN'))
),
'month_view' => array(
'caption' => 'Month view',
'icon' => 'month',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Month view',
'toolbarDefault' => false,
'data' => array('state' => array('view' => 'month'))
),
'planner_category' => array(
'caption' => 'Planner by category',
'icon' => 'planner',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Planner by category',
'toolbarDefault' => false,
'data' => array('state' => array('view' => 'planner', 'sortby' => 'category')),
),
'planner_user' => array(
'caption' => 'Planner by user',
'icon' => 'planner',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Planner by user',
'toolbarDefault' => false,
'data' => array('state' => array('view' => 'planner', 'sortby' => 'user')),
),
'planner_month' => array(
'caption' => 'Yearly planner',
'icon' => 'year',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Yearly planner',
'toolbarDefault' => false,
'data' => array('state' => array('view' => 'planner', 'sortby' => 'month')),
),
'list' => array(
'caption' => 'Listview',
'icon' => 'list',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Listview',
'toolbarDefault' => true,
'data' => array('state' => array('view' => 'listview')),
),
'weekend' => array(
'caption' => 'Weekend',
'icon' => 'weekend',
'checkbox' => true,
'checked' => $this->cal_prefs['saved_states']['weekend'],
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Toggle weekend',
'toolbarDefault' => false,
),
'previous' => array(
'caption' => 'Previous',
'icon' => 'previous',
'group' => ++$group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Previous',
'toolbarDefault' => true,
),
'next' => array(
'caption' => 'Next',
'icon' => 'next',
'group' => $group,
'onExecute' => 'javaScript:app.calendar.toolbar_action',
'hint' => 'Next',
'toolbarDefault' => true,
),
);
return $actions;
}
/**
* Show the calendar on the home page
*
@ -648,7 +770,6 @@ class calendar_uiviews extends calendar_ui
}
}
$this->last = strtotime("+$days days",$this->first) - 1;
$GLOBALS['egw_info']['flags']['app_header'] .=': ' .lang('Week').' '.$this->week_number($this->first).': '.$this->bo->long_date($this->first,$this->last);
}
$search_params = array(

View File

@ -404,6 +404,61 @@ app.classes.calendar = AppJS.extend(
return false;
},
/**
* Handle actions from the toolbar
*
* @param {egwAction} action Action from the toolbar
*/
toolbar_action: function toolbar_action(action)
{
debugger;
// Most can just provide state change data
if(action.data && action.data.state)
{
this.update_state(action.data.state);
}
// Special handling
switch(action.id)
{
case 'weekend':
this.update_state({weekend: action.checked});
break;
case 'next':
case 'previous':
var delta = action.id == 'previous' ? -1 : 1;
var view = app.classes.calendar.views[app.calendar.state.view] || false;
var start = new Date(app.calendar.state.date);
if (view)
{
start = view.scroll(delta);
app.calendar.update_state({date:app.calendar.date.toString(start)});
}
break;
}
},
/**
* Set the app header
*
* Because the toolbar takes some vertical space and has some horizontal space,
* we don't use the system app header, but our own that is in the toolbar
*
* @param {string} header Text to display
*/
set_app_header: function(header) {
var template = etemplate2.getById('calendar-toolbar');
var widget = template ? template.widgetContainer.getWidgetById('app_header') : false;
if(widget)
{
widget.set_value(header);
egw_app_header('','calendar');
}
else
{
egw_app_header(header,'calendar');
}
},
/**
* Setup and handle sortable calendars.
*
@ -2201,7 +2256,7 @@ app.classes.calendar = AppJS.extend(
this.highlight_favorite();
// Update app header
egw_app_header(view.header(state.state),'calendar');
this.set_app_header(view.header(state.state));
// Sidebox is updated, we can clear the flag
this.state_update_in_progress = false;

View File

@ -802,7 +802,7 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
}
// Set height for rows
this.rows.height(this.div.parent().height() - this.headers.outerHeight());
this.rows.height(this.div.height() - this.headers.outerHeight());
// Draw the rows
for(var key in labels)
@ -1890,9 +1890,15 @@ var et2_calendar_planner = et2_calendar_view.extend([et2_IDetachedDOM, et2_IResi
},
// Resizable interface
resize: function (_height)
resize: function ()
{
this.options.height = _height;
// Take the whole tab height
var height = Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight());
// Allow for toolbar
height -= $j('#calendar-toolbar').outerHeight(true);
this.options.height = height;
this.div.css('height', this.options.height);
}
});

View File

@ -1602,8 +1602,14 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
},this, et2_calendar_timegrid);
// Take the whole tab height
this.options.height = Math.floor(Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight()) / rowCount);
this.options.height = Math.floor((egw.getHiddenDimensions(this.getInstanceManager().DOMContainer).h ) / rowCount);
var height = Math.min($j(this.getInstanceManager().DOMContainer).height(),$j(this.getInstanceManager().DOMContainer).parent().innerHeight());
// Allow for toolbar
height -= $j('#calendar-toolbar').outerHeight(true);
this.options.height = Math.floor(height / rowCount);
// Allow for borders & padding
this.options.height -= 2*((this.div.outerWidth(true) - this.div.innerWidth()) + parseInt(this.div.parent().css('padding-top')));
if(this.options.height+"px" !== this.div.css('height'))
{

View File

@ -49,6 +49,25 @@
background-color: #dac0c0;
}
/* Toolbar */
#calendar-toolbar {
height: 30px;
}
#calendar-toolbar .egw_fw_ui_app_header_container {
border: none;
}
/* Space for toolbar */
#calendar-view, #calendar-todo, #calendar-planner {
margin-top: -30px;
}
#calendar-list {
margin-top: -50px;
}
#calendar-planner .calendar_plannerWidget {
top: 30px;
}
#calendar-todo {
position: absolute;
width: 30%;

Binary file not shown.

After

Width:  |  Height:  |  Size: 175 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 B

View File

@ -14,30 +14,6 @@ Egroupware
<overlay>
<template id="calendar.sidebox">
<vbox parent_node="calendar-et2_target">
<grid id="buttons" width="100%">
<columns>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
<column/>
</columns>
<rows><row width="100%">
<buttononly align="center" class="sideboxstar" id="add" onclick="egw.open(null,'calendar','add');" image="new" label="Add"/>
<buttononly align="center" class="sideboxstar" id="day" image="day" label="Day view" onclick="app.calendar.update_state({view:'day'});"/>
<buttononly align="center" class="sideboxstar" id="week" image="week" label="Weekview" onclick="app.calendar.update_state({view:'week'});"/>
<buttononly align="center" class="sideboxstar" id="weekN" image="multiweek" label="Multiple week view" onclick="app.calendar.update_state({view:'weekN'});"/>
<buttononly align="center" class="sideboxstar" id="month" image="month" label="Month view" onclick="app.calendar.update_state({view:'month'});"/>
<buttononly align="center" class="sideboxstar" id="planner" image="planner" label="Group planner" onclick="app.calendar.update_state({view:'planner',planner_days:0});"/>
<buttononly align="center" class="sideboxstar" id="listview" image="list" label="Listview" onclick="app.calendar.update_state({view:'listview'});"/>
<checkbox class="sideboxstar" id="weekend" toggle_on="7" toggle_off="5" statustext="Toggle weekend" onchange="app.calendar.update_state({weekend: widget.getValue()}); return false;"/>
</row>
</rows>
</grid>
<select id="view" class="et2_fullWidth" onchange="app.calendar.update_state(JSON.parse(widget.getValue()));"/>
<textbox id="keywords" class="et2_fullWidth" blur="Search" onchange="app.calendar.update_state({view: 'listview',keywords: widget.getValue()});return false;"/>
<hbox id="date_header" class="et2_fullWidth">
<buttononly id="header_today" label="Today" onclick="

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Egroupware
@license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
@package
@subpackage
@link http://www.egroupware.org
@author Nathan Gray
@version $Id$
-->
<!DOCTYPE overlay PUBLIC '-//Stylite AG//eTemplate 2//EN' 'http://www.egroupware.org/etemplate2.dtd'>
<overlay>
<template id="calendar.toolbar">
<toolbar id="toolbar" width="100%" flat_list="false"/>
<!-- Fake an app header inside the toolbar -->
<box class="egw_fw_ui_app_header_container">
<description id="app_header" class="egw_fw_ui_app_header"/>
</box>
</template>
</overlay>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="../../../../pixelegg/less/svg.css" ?>
<svg version="1.1" id="mail_mail_forward" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M1.163,12.027v4.322c0,2.673,2.164,4.84,4.834,4.84h5.239
l0.011,2.973l1.643,1.643c1.828,1.828,4.789,1.832,6.615,0.006l6.312-8.312c1.824-1.824,1.82-4.786-0.008-6.615l-6.342-8.341
c-1.828-1.829-4.789-1.832-6.613-0.007l-1.678,1.678l0.01,2.975H5.997C3.327,7.188,1.163,9.354,1.163,12.027z M4.063,12.994
c0-1.604,1.297-2.902,2.898-2.902h7.226l-0.009-4.91c1.096-1.095,2.873-1.093,3.971,0.004l5.016,7.017
c1.098,1.098,1.1,2.875,0.004,3.969l-4.99,6.992c-1.096,1.094-2.873,1.093-3.969-0.004l-0.009-4.875H6.962
c-1.602,0-2.898-1.3-2.898-2.903V12.994z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet type="text/css" href="../../../../pixelegg/less/svg.css" ?>
<svg version="1.1" id="mail_mail_reply" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347"
xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M22.35,7.187h-5.19l0.01-2.975l-1.678-1.678
c-1.824-1.824-4.786-1.821-6.614,0.007l-6.342,8.341c-1.828,1.829-1.832,4.792-0.007,6.616l6.312,8.312
c1.825,1.826,4.786,1.822,6.615-0.006l1.643-1.643l0.01-2.973h5.24c2.67,0,4.834-2.167,4.834-4.84v-4.323
C27.184,9.353,25.02,7.187,22.35,7.187z M24.283,15.381c0,1.604-1.298,2.904-2.899,2.904h-7.239l-0.008,4.875
c-1.097,1.097-2.874,1.098-3.969,0.004l-4.991-6.992c-1.095-1.094-1.093-2.872,0.004-3.969l5.017-7.017
c1.098-1.097,2.875-1.099,3.97-0.004l-0.008,4.91h7.225c1.602,0,2.899,1.299,2.899,2.902V15.381z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB