Convert application header to grid system

6 files changed, 138 insertions, 116 deletions

diff --git a/app/Template/header.php b/app/Template/header.php
index 033967db..5d115b4a 100644
--- a/app/Template/header.php
+++ b/app/Template/header.php
@@ -1,119 +1,35 @@
-<header>
-    <nav>
-        <h1>
-            <span class="logo">
-                <?= $this->url->link('K<span>B</span>', 'DashboardController', 'show', array(), false, '', t('Dashboard')) ?>
-            </span>
-            <span class="title">
-                <?php if (! empty($project) && ! empty($task)): ?>
-                    <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
-                <?php else: ?>
-                    <?= $this->text->e($title) ?>
-                <?php endif ?>
-            </span>
-            <?php if (! empty($description)): ?>
-                <small class="tooltip" title="<?= $this->text->markdownAttribute($description) ?>">
-                    <i class="fa fa-info-circle"></i>
-                </small>
-            <?php endif ?>
-        </h1>
-        <ul>
-            <?php if (isset($board_selector) && ! empty($board_selector)): ?>
-            <li>
-                <select id="board-selector"
-                        class="chosen-select select-auto-redirect"
-                        tabindex="-1"
-                        data-search-threshold="0"
-                        data-notfound="<?= t('No results match:') ?>"
-                        data-placeholder="<?= t('Display another project') ?>"
-                        data-redirect-regex="PROJECT_ID"
-                        data-redirect-url="<?= $this->url->href('BoardViewController', 'show', array('project_id' => 'PROJECT_ID')) ?>">
-                    <option value=""></option>
-                    <?php foreach ($board_selector as $board_id => $board_name): ?>
-                        <option value="<?= $board_id ?>"><?= $this->text->e($board_name) ?></option>
-                    <?php endforeach ?>
-                </select>
-            </li>
-            <?php endif ?>
-            <li class="user-links">
-                <?php if ($this->user->hasNotifications()): ?>
-                    <span class="notification">
-                        <?= $this->url->link('<i class="fa fa-bell web-notification-icon"></i>', 'DashboardController', 'notifications', array('user_id' => $this->user->getId()), false, '', t('Unread notifications')) ?>
-                    </span>
-                <?php endif ?>
-
-                <?php $has_project_creation_access = $this->user->hasAccess('ProjectCreationController', 'create'); ?>
-                <?php $is_private_project_enabled = $this->app->config('disable_private_project', 0) == 0; ?>
-
-                <?php if ($has_project_creation_access || (!$has_project_creation_access && $is_private_project_enabled)): ?>
-                <div class="dropdown">
-                    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-plus fa-fw"></i><i class="fa fa-caret-down"></i></a>
-                    <ul>
-                        <?php if ($has_project_creation_access): ?>
-                            <li><i class="fa fa-plus fa-fw"></i>
-                            <?= $this->url->link(t('New project'), 'ProjectCreationController', 'create', array(), false, 'popover') ?></li>
-                        <?php endif ?>
-                        <?php if ($is_private_project_enabled): ?>
-                        <li>
-                            <i class="fa fa-lock fa-fw"></i>
-                            <?= $this->url->link(t('New private project'), 'ProjectCreationController', 'createPrivate', array(), false, 'popover') ?>
-                        </li>
-                        <?php endif ?>
-                        <?= $this->hook->render('template:header:creation-dropdown') ?>
-                    </ul>
-                </div>
-                <?php endif ?>
+<?php $_title = $this->render('header/title', array(
+    'project' => isset($project) ? $project : null,
+    'task' => isset($task) ? $task : null,
+    'description' => isset($description) ? $description : null,
+    'title' => $title,
+)) ?>
 
-                <div class="dropdown">
-                    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><?= $this->avatar->currentUserSmall('avatar-inline') ?><i class="fa fa-caret-down"></i></a>
-                    <ul>
-                        <li class="no-hover"><strong><?= $this->text->e($this->user->getFullname()) ?></strong></li>
-                        <li>
-                            <i class="fa fa-tachometer fa-fw"></i>
-                            <?= $this->url->link(t('My dashboard'), 'DashboardController', 'show', array('user_id' => $this->user->getId())) ?>
-                        </li>
-                        <li>
-                            <i class="fa fa-home fa-fw"></i>
-                            <?= $this->url->link(t('My profile'), 'UserViewController', 'show', array('user_id' => $this->user->getId())) ?>
-                        </li>
-                        <li>
-                            <i class="fa fa-folder fa-fw"></i>
-                            <?= $this->url->link(t('Projects management'), 'ProjectListController', 'show') ?>
-                        </li>
-                        <?php if ($this->user->hasAccess('UserListController', 'show')): ?>
-                            <li>
-                                <i class="fa fa-user fa-fw"></i>
-                                <?= $this->url->link(t('Users management'), 'UserListController', 'show') ?>
-                            </li>
-                            <li>
-                                <i class="fa fa-group fa-fw"></i>
-                                <?= $this->url->link(t('Groups management'), 'GroupListController', 'index') ?>
-                            </li>
-                            <li>
-                                <i class="fa fa-cubes" aria-hidden="true"></i>
-                                <?= $this->url->link(t('Plugins'), 'PluginController', 'show') ?>
-                            </li>
-                            <li>
-                                <i class="fa fa-cog fa-fw"></i>
-                                <?= $this->url->link(t('Settings'), 'ConfigController', 'index') ?>
-                            </li>
-                        <?php endif ?>
+<?php $_top_right_corner = implode('&nbsp;', array(
+        $this->render('header/user_notifications'),
+        $this->render('header/creation_dropdown'),
+        $this->render('header/user_dropdown')
+    )) ?>
 
-                        <?= $this->hook->render('template:header:dropdown') ?>
-
-                        <li>
-                            <i class="fa fa-life-ring fa-fw"></i>
-                            <?= $this->url->link(t('Documentation'), 'DocumentationController', 'show') ?>
-                        </li>
-                        <?php if (! DISABLE_LOGOUT): ?>
-                            <li>
-                                <i class="fa fa-sign-out fa-fw"></i>
-                                <?= $this->url->link(t('Logout'), 'AuthController', 'logout') ?>
-                            </li>
-                        <?php endif ?>
-                    </ul>
-                </div>
-            </li>
-        </ul>
-    </nav>
+<header>
+    <div class="grid grid-reverse grid-noGutter">
+        <?php if (! empty($board_selector)): ?>
+            <div class="col-1 col_xs-4 col_sm-3 col_md-3 col_lg-2 pull-right">
+                <?= $_top_right_corner ?>
+            </div>
+            <div class="col-2 col_xs-8 col_sm-9 col_md-1 col_lg-1">
+                <?= $this->render('header/board_selector', array('board_selector' => $board_selector)) ?>
+            </div>
+            <div class="col-9 col_xs-12 col_sm-12 col_md-8 col_lg-9">
+                <?= $_title ?>
+            </div>
+        <?php else: ?>
+            <div class="col-2 col_xs-12 pull-right">
+                <?= $_top_right_corner ?>
+            </div>
+            <div class="col-10 col_xs-12">
+                <?= $_title ?>
+            </div>
+        <?php endif ?>
+    </div>
 </header>
diff --git a/app/Template/header/board_selector.php b/app/Template/header/board_selector.php
new file mode 100644
index 00000000..b42d47f9
--- /dev/null
+++ b/app/Template/header/board_selector.php
@@ -0,0 +1,13 @@
+<select id="board-selector"
+        class="chosen-select select-auto-redirect"
+        tabindex="-1"
+        data-search-threshold="0"
+        data-notfound="<?= t('No results match:') ?>"
+        data-placeholder="<?= t('Display another project') ?>"
+        data-redirect-regex="PROJECT_ID"
+        data-redirect-url="<?= $this->url->href('BoardViewController', 'show', array('project_id' => 'PROJECT_ID')) ?>">
+    <option value=""></option>
+    <?php foreach ($board_selector as $board_id => $board_name): ?>
+        <option value="<?= $board_id ?>"><?= $this->text->e($board_name) ?></option>
+    <?php endforeach ?>
+</select>
diff --git a/app/Template/header/creation_dropdown.php b/app/Template/header/creation_dropdown.php
new file mode 100644
index 00000000..d3b9e7cb
--- /dev/null
+++ b/app/Template/header/creation_dropdown.php
@@ -0,0 +1,22 @@
+<?php $has_project_creation_access = $this->user->hasAccess('ProjectCreationController', 'create'); ?>
+<?php $is_private_project_enabled = $this->app->config('disable_private_project', 0) == 0; ?>
+
+<?php if ($has_project_creation_access || (!$has_project_creation_access && $is_private_project_enabled)): ?>
+    <div class="dropdown">
+        <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-plus fa-fw"></i><i class="fa fa-caret-down"></i></a>
+        <ul>
+            <?php if ($has_project_creation_access): ?>
+                <li><i class="fa fa-plus fa-fw"></i>
+                    <?= $this->url->link(t('New project'), 'ProjectCreationController', 'create', array(), false, 'popover') ?>
+                </li>
+            <?php endif ?>
+            <?php if ($is_private_project_enabled): ?>
+                <li>
+                    <i class="fa fa-lock fa-fw"></i>
+                    <?= $this->url->link(t('New private project'), 'ProjectCreationController', 'createPrivate', array(), false, 'popover') ?>
+                </li>
+            <?php endif ?>
+            <?= $this->hook->render('template:header:creation-dropdown') ?>
+        </ul>
+    </div>
+<?php endif ?>
diff --git a/app/Template/header/title.php b/app/Template/header/title.php
new file mode 100644
index 00000000..61c6ee9a
--- /dev/null
+++ b/app/Template/header/title.php
@@ -0,0 +1,17 @@
+<h1>
+    <span class="logo">
+        <?= $this->url->link('K<span>B</span>', 'DashboardController', 'show', array(), false, '', t('Dashboard')) ?>
+    </span>
+    <span class="title">
+        <?php if (! empty($project) && ! empty($task)): ?>
+            <?= $this->url->link($this->text->e($project['name']), 'BoardViewController', 'show', array('project_id' => $project['id'])) ?>
+        <?php else: ?>
+            <?= $this->text->e($title) ?>
+        <?php endif ?>
+    </span>
+    <?php if (! empty($description)): ?>
+        <small class="tooltip" title="<?= $this->text->markdownAttribute($description) ?>">
+            <i class="fa fa-info-circle"></i>
+        </small>
+    <?php endif ?>
+</h1>
diff --git a/app/Template/header/user_dropdown.php b/app/Template/header/user_dropdown.php
new file mode 100644
index 00000000..49d08213
--- /dev/null
+++ b/app/Template/header/user_dropdown.php
@@ -0,0 +1,49 @@
+<div class="dropdown">
+    <a href="#" class="dropdown-menu dropdown-menu-link-icon"><?= $this->avatar->currentUserSmall('avatar-inline') ?><i class="fa fa-caret-down"></i></a>
+    <ul>
+        <li class="no-hover"><strong><?= $this->text->e($this->user->getFullname()) ?></strong></li>
+        <li>
+            <i class="fa fa-tachometer fa-fw"></i>
+            <?= $this->url->link(t('My dashboard'), 'DashboardController', 'show', array('user_id' => $this->user->getId())) ?>
+        </li>
+        <li>
+            <i class="fa fa-home fa-fw"></i>
+            <?= $this->url->link(t('My profile'), 'UserViewController', 'show', array('user_id' => $this->user->getId())) ?>
+        </li>
+        <li>
+            <i class="fa fa-folder fa-fw"></i>
+            <?= $this->url->link(t('Projects management'), 'ProjectListController', 'show') ?>
+        </li>
+        <?php if ($this->user->hasAccess('UserListController', 'show')): ?>
+            <li>
+                <i class="fa fa-user fa-fw"></i>
+                <?= $this->url->link(t('Users management'), 'UserListController', 'show') ?>
+            </li>
+            <li>
+                <i class="fa fa-group fa-fw"></i>
+                <?= $this->url->link(t('Groups management'), 'GroupListController', 'index') ?>
+            </li>
+            <li>
+                <i class="fa fa-cubes" aria-hidden="true"></i>
+                <?= $this->url->link(t('Plugins'), 'PluginController', 'show') ?>
+            </li>
+            <li>
+                <i class="fa fa-cog fa-fw"></i>
+                <?= $this->url->link(t('Settings'), 'ConfigController', 'index') ?>
+            </li>
+        <?php endif ?>
+
+        <?= $this->hook->render('template:header:dropdown') ?>
+
+        <li>
+            <i class="fa fa-life-ring fa-fw"></i>
+            <?= $this->url->link(t('Documentation'), 'DocumentationController', 'show') ?>
+        </li>
+        <?php if (! DISABLE_LOGOUT): ?>
+            <li>
+                <i class="fa fa-sign-out fa-fw"></i>
+                <?= $this->url->link(t('Logout'), 'AuthController', 'logout') ?>
+            </li>
+        <?php endif ?>
+    </ul>
+</div>
diff --git a/app/Template/header/user_notifications.php b/app/Template/header/user_notifications.php
new file mode 100644
index 00000000..83c545d2
--- /dev/null
+++ b/app/Template/header/user_notifications.php
@@ -0,0 +1,5 @@
+<?php if ($this->user->hasNotifications()): ?>
+    <span class="notification">
+        <?= $this->url->link('<i class="fa fa-bell web-notification-icon"></i>', 'DashboardController', 'notifications', array('user_id' => $this->user->getId()), false, '', t('Unread notifications')) ?>
+    </span>
+<?php endif ?>