added tabs in home page

tracim/tracim/public/assets/css/dashboard.css

@@ -517,3 +517,93 @@ table th {
 div.mce-fullscreen {
   z-index: 1030;
 }
+
+#unread-content-panel, /*#recent-activity-panel,*/ #workspaces-panel {
+  display: none;
+}
+.panel-success > .panel-heading, .panel { /* bootstrap override */
+  border-top-left-radius: 0px;
+}
+.panel { /* bootstrap override */
+  border-width: 2px;
+  border-top-width: 10px;
+}
+.content__home__tab-wrapper {
+  margin: 15px 0 0 0;
+}
+.content__home__tab__item {
+  display: inline-block;
+  padding: 3px 25px;
+  border: 1px solid #333;
+  border-bottom-width: 0px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  text-align: center;
+  font-weight: bold;
+  vertical-align: bottom;
+  cursor: pointer;
+}
+.content__home__tab__item > i {
+  margin-right: 4px;
+}
+.content__home__tab__item-news {
+  float: right;
+  position: relative;
+  top: -18px;
+  right: -28px;
+  height: auto;
+  color: #b35454;
+  font-size: 22px;
+}
+.content__home__tab__item-news__number {
+  top: -3px;
+  color: #dff0d8;
+  font-size: 10px;
+  font-weight: bold;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  letter-spacing: -1px;
+}
+.content__home__tab__item-lastactivity {
+  font-size: 12px;
+  font-weight: normal;
+  color: #b35454;
+}
+.content__home__tab__item:hover {
+  background-color: #eee;
+}
+.content__home__tab__item.active {
+  padding: 5px 25px;
+}
+.content__home__tab__item.unread {
+  border-color: #d6e9c6;
+  background-color: #dff0d8;
+  color: #3c763d;
+}
+.content__home__tab__item.unread:hover,
+.content__home__tab__item.unread.active {
+  border-color: #dff0d8;
+  background-color: #d6e9c6;
+  color: #3c763d;
+}
+.content__home__tab__item.recent_activity {
+  border-color: #faebcc;
+  background-color: #fcf8e3;
+  color: #8a6d3b;
+}
+.content__home__tab__item.recent_activity:hover,
+.content__home__tab__item.recent_activity.active {
+  border-color: #fcf8e3;
+  background-color: #faebcc;
+  color: #8a6d3b;
+}
+.content__home__tab__item.workspace {
+  border-color: #bce8f1;
+  background-color: #d9edf7;
+  color: #31708f;
+}
+.content__home__tab__item.workspace:hover,
+.content__home__tab__item.workspace.active {
+  border-color: #d9edf7;
+  background-color: #bce8f1;
+  color: #31708f;
+}

tracim/tracim/public/assets/js/main.js

@@ -1,5 +1,6 @@
 $(document).ready(function () {
 
+  // toggle sidebar-left width to fixed or auto
   $('#toggle-left-sidebar-width').click( function() {
     sidebar = $('#sidebar-left')
     buttonIcon = $('> i', this)
@@ -13,6 +14,24 @@ $(document).ready(function () {
     }
   })
 
+  var homeTabList = ['#unread-content-panel', '#recent-activity-panel', '#workspaces-panel']
+  // toggle the active tab in home page
+  $('.content__home__tab__item.unread, .content__home__tab__item.recent_activity, .content__home__tab__item.workspace').click(function () {
+    $('.content__home__tab__item.unread, .content__home__tab__item.recent_activity, .content__home__tab__item.workspace').removeClass('active')
+    homeTabList.forEach(function (item) { $(item).css('display', 'none') })
+  })
+  $('.content__home__tab__item.unread').click(function () {
+    $(this).addClass('active')
+    $('#unread-content-panel').css('display', 'block') })
+  $('.content__home__tab__item.recent_activity').click(function () {
+    $(this).addClass('active')
+    $('#recent-activity-panel').css('display', 'block')
+  })
+  $('.content__home__tab__item.workspace').click(function () {
+    $(this).addClass('active')
+    $('#workspaces-panel').css('display', 'block')
+  })
+
   // Côme - 2017-01-06 - is the code bellow usefull ?
   // $('#current-page-breadcrumb-toggle-button').click( function() {
   //   $('#current-page-breadcrumb').toggle();

tracim/tracim/templates/home.mak

@@ -32,96 +32,108 @@
 </%def>
 
 <div class="content__home">
-    ## NOT READ
-    <div class="t-spacer-above" id="unread-content-panel">
-        <div class="t-half-spacer-above">
-            <div class="panel panel-success">
-                <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-fw fa-eye-slash"></i> ${_('Not Read')}</h3>
-                </div>
-                <div class="panel-body">
-                    % if fake_api.last_unread.nb <= 0:
-                        ${P.EMPTY_CONTENT(_('No new content.'))}
-                    % else:
-                        <table class="table table-hover">
-                            % for item in fake_api.last_unread.contents:
-                                <tr>
-                                    <td>
-                                        <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
-                                        <a href="${item.url}">${item.label}</a>
-                                        <br/>
-                                        <span class="t-less-visible">${item.workspace.label}</span>
-                                    </td>
-                                    <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
-                                        ${item.last_activity.delta}
-                                    </td>
-                                </tr>
-                            % endfor
-                        </table>
-                    % endif
-                 </div>
-             </div>
+    <div class="content__home__tab-wrapper">
+        <div class="content__home__tab__item recent_activity active">
+            <i class="fa fa-fw fa-line-chart"></i>${_('Recent Activity')}
+            % if fake_api.last_actives.contents[0]:
+              <span class="content__home__tab__item-lastactivity">[${fake_api.last_actives.contents[0].last_activity.delta}]</span>
+            % endif
+        </div>
+        <div class="content__home__tab__item unread">
+            <i class="fa fa-fw fa-eye-slash"></i>${_('Not Read')}
+            % if fake_api.last_unread.nb > 0:
+              <div class="content__home__tab__item-news fa-stack">
+                <i class="fa fa-bookmark fa-stack-1x"></i>
+                <i class="content__home__tab__item-news__number fa-stack-1x">
+                  % if fake_api.last_unread.nb == 10:
+                    ${fake_api.last_unread.nb}+
+                  % else:
+                    ${fake_api.last_unread.nb}
+                  % endif
+                </i>
+              </div>
+            % endif
+        </div>
+        <div class="content__home__tab__item workspace">
+            <i class="fa fa-bank"></i>${_('My workspaces')}
         </div>
     </div>
 
     ## RECENT ACTIVITY
-    <div class="t-spacer-above" id="recent-activity-panel">
-        <div class="t-half-spacer-above">
-            <div class="panel panel-warning">
-                <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-fw fa-line-chart"></i> ${_('Recent Activity')}</h3>
-                </div>
-                <div class="panel-body">
-                    % if fake_api.last_actives.nb <= 0:
-                        ${P.EMPTY_CONTENT(_('There\'s no activity yet.'))}
-                    % else:
-                        <table class="table table-hover">
-                            % for item in fake_api.last_actives.contents:
-                                <tr>
-                                    <td>
-                                        <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
-                                        <a href="${item.url}">${item.label}</a>
-                                        <br/>
-                                        <span class="t-less-visible">${item.workspace.label}</span>
-                                    </td>
-                                    <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
-                                        ${item.last_activity.delta}
-                                    </td>
-                                </tr>
-                            % endfor
-                        </table>
-                    % endif
-                </div>
+    <div class="" id="recent-activity-panel">
+        <div class="panel panel-warning">
+            <div class="panel-body">
+                % if fake_api.last_actives.nb <= 0:
+                    ${P.EMPTY_CONTENT(_('There\'s no activity yet.'))}
+                % else:
+                    <table class="table table-hover">
+                        % for item in fake_api.last_actives.contents:
+                            <tr>
+                                <td>
+                                    <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
+                                    <a href="${item.url}">${item.label}</a>
+                                    <br/>
+                                    <span class="t-less-visible">${item.workspace.label}</span>
+                                </td>
+                                <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
+                                    ${item.last_activity.delta}
+                                </td>
+                            </tr>
+                        % endfor
+                    </table>
+                % endif
             </div>
         </div>
     </div>
 
+    ## NOT READ
+    <div class="" id="unread-content-panel">
+        <div class="panel panel-success">
+            <div class="panel-body">
+                % if fake_api.last_unread.nb <= 0:
+                    ${P.EMPTY_CONTENT(_('No new content.'))}
+                % else:
+                    <table class="table table-hover">
+                        % for item in fake_api.last_unread.contents:
+                            <tr>
+                                <td>
+                                    <i class="${item.type.icon} fa-fw ${item.type.color}"></i>
+                                    <a href="${item.url}">${item.label}</a>
+                                    <br/>
+                                    <span class="t-less-visible">${item.workspace.label}</span>
+                                </td>
+                                <td title="${_('Last activity: {datetime}').format(datetime=item.last_activity.label)}">
+                                    ${item.last_activity.delta}
+                                </td>
+                            </tr>
+                        % endfor
+                    </table>
+                % endif
+             </div>
+         </div>
+    </div>
+
     ## Workspace list and notifications
-    <div class="t-half-spacer-above" id="workspaces-panel">
-        <div class="t-spacer-above">
-            <div class="panel panel-info">
-                <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-bank"></i> ${_('Workspaces')}</h3>
-                </div>
-                <div class="panel-body">
+    <div class="" id="workspaces-panel">
+        <div class="panel panel-info">
+            <div class="panel-body">
 
-                    % if len(fake_api.current_user.roles)<=0:
-                        ${P.EMPTY_CONTENT(_('I\'m not member of any workspace.'))}
-                    % else:
-                        <table class="table">
-                            <thead>
-                                <tr>
-                                    <th>${_('Workspace')}</th>
-                                    <th>${_('Role')}</th>
-                                    <th>${_('Email Notifications')}</th>
-                                </tr>
-                            </thead>
-                            % for role in fake_api.current_user.roles:
-                                ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=False, enable_link='/user/me/workspaces/{workspace}/enable_notifications?next_url=/home', disable_link='/user/me/workspaces/{workspace}/disable_notifications?next_url=/home')}
-                            % endfor
-                        </table>
-                    % endif
-                </div>
+                % if len(fake_api.current_user.roles)<=0:
+                    ${P.EMPTY_CONTENT(_('I\'m not member of any workspace.'))}
+                % else:
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>${_('Workspace')}</th>
+                                <th>${_('Role')}</th>
+                                <th>${_('Email Notifications')}</th>
+                            </tr>
+                        </thead>
+                        % for role in fake_api.current_user.roles:
+                            ${TABLE_ROW.USER_ROLE_IN_WORKSPACE(fake_api.current_user, role, show_id=False, enable_link='/user/me/workspaces/{workspace}/enable_notifications?next_url=/home', disable_link='/user/me/workspaces/{workspace}/disable_notifications?next_url=/home')}
+                        % endfor
+                    </table>
+                % endif
             </div>
         </div>
     </div>

tracim/tracim/templates/master_authenticated.mak

@@ -12,9 +12,9 @@
         <meta name="author" content="">
         <link rel="icon" href="/favicon.ico">
         <link href="${tg.url('/assets/css/bootstrap.min.css')}" rel="stylesheet">
-        <link href="${tg.url('/assets/css/dashboard.css')}" rel="stylesheet">
         <link href="${tg.url('/assets/font-awesome-4.2.0/css/font-awesome.css')}" rel="stylesheet">
         <link href="${tg.url('/assets/select2-4.0.3/css/select2.min.css')}" rel="stylesheet">
+        <link href="${tg.url('/assets/css/dashboard.css')}" rel="stylesheet">
 
         <script>
             var shiftWindow = function() { scrollBy(0, -50) };