improve user interface

tracim/tracim/templates/folder/getone.mak

@@ -75,45 +75,53 @@
         <% user_role = h.user_role(fake_api.current_user, result.folder.workspace) %>
 
         <div class="t-spacer-above">
-            % if user_role > 1:
-                <div class="btn-group" role="group">
-                    % if (not result.folder.is_archived and not result.folder.is_deleted) :
-                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                            <i class="fa fa-plus"></i> ${_('New ...')}
-                            <span class="caret"></span>
-                        </button>
-                    % endif
-                    <ul class="dropdown-menu" role="menu">
-                        % for content_type in result.folder.allowed_content_types:
-                            % if content_type.id != 'folder' or user_role > 2:
-                                ## Only show 'new folder' to content managers
-                                <%
-                                    new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
-                                    modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
-                                    icon_classes = content_type.icon+' '+content_type.color
-                                %>
-                                <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
+            <div class="row">
+                <div class="col-md-4 col-sx-12">
+                    % if user_role > 1:
+                        <div class="btn-group" role="group">
+                            % if (not result.folder.is_archived and not result.folder.is_deleted) :
+                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                    <i class="fa fa-plus"></i> ${_('New ...')}
+                                    <span class="caret"></span>
+                                </button>
                             % endif
-                        % endfor
-                    </ul>
-                </div>
-            % endif
-
-            % if len(fake_api.sub_items) > 0:
-                ## INFO - D.A. - 2015-05-25
-                ## We hide filtering/search buttons if no content yet.
-                ## This make the interface more easy to use
-                <div class="btn-group" role="group" aria-label="...">
-                    ${BUTTON.TEXT('', 'btn btn-default disabled', _('hide...'))}
-                    % for content_type in result.folder.allowed_content_types:
-                        ${BUTTON.TEXT('toggle-{type}-visibility'.format(type=content_type.id), 'btn btn-default t-active-color disabled-has-priority', content_type.label)}
-                    % endfor
+                            <ul class="dropdown-menu" role="menu">
+                                % for content_type in result.folder.allowed_content_types:
+                                    % if content_type.id != 'folder' or user_role > 2:
+                                        ## Only show 'new folder' to content managers
+                                        <%
+                                            new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
+                                            modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
+                                            icon_classes = content_type.icon+' '+content_type.color
+                                        %>
+                                        <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
+                                    % endif
+                                % endfor
+                            </ul>
+                        </div>
+                    % endif
                 </div>
-
-                <div class="btn-group pull-right" role="group" aria-label="...">
-                    <input id="filtering"  type="text" class="form-control t-bg-grey" placeholder="${_('search...')}" aria-describedby="basic-addon1">
+                <div class="col-md-8 text-right">
+                    % if len(fake_api.sub_items) > 0:
+                        ## INFO - D.A. - 2015-05-25
+                        ## We hide filtering/search buttons if no content yet.
+                        ## This make the interface more easy to use
+                        <div class="btn-group" role="group" aria-label="...">
+                            ${BUTTON.TEXT('', 'btn btn-default disabled', _('hide...'))}
+
+                            % for content_type in result.folder.allowed_content_types:
+                                ${BUTTON.TEXT('toggle-{type}-visibility'.format(type=content_type.id), 'btn btn-default t-active-color disabled-has-priority', content_type.label)}
+                            % endfor
+                        </div>
+                        <p></p>
+                        ${UI.GENERIC_DISPLAY_VIEW_BUTTONS_CONTAINER(tg.url('/workspaces/{}/folders/{}'.format(result.folder.workspace.id, result.folder.id)))}
+                        <p></p>
+                        <div class="btn-group" role="group" aria-label="...">
+                            <input id="filtering"  type="text" class="form-control t-bg-grey" placeholder="${_('filter...')}" aria-describedby="basic-addon1">
+                        </div>
+                    % endif
                 </div>
-            % endif
+            </div>
         </div>
 
         <div class="t-spacer-above">
@@ -134,8 +142,6 @@
                 % endif
             % endif
 
-            ${UI.GENERIC_DISPLAY_VIEW_BUTTONS_CONTAINER(tg.url('/workspaces/{}/folders/{}'.format(result.folder.workspace.id, result.folder.id)))}
-
             % if len(fake_api.sub_items) <= 0:
                 ${P.EMPTY_CONTENT(_('This folder has not yet content.'))}
             % else:

tracim/tracim/templates/widgets/button.mak

@@ -9,6 +9,7 @@
 
 
 <%def name="TEXT(dom_id, css_class, label='')"><button type="button" class="${css_class}" id="${dom_id}">${label}</button></%def>
+<%def name="TEXT_AND_ICON(dom_id, css_class, label='', icon_css='')"><button type="button" class="${css_class}" id="${dom_id}"><i class="${icon_css}"></i> ${label}</button></%def>
 <%def name="DATA_TARGET_AS_TEXT(dom_id, label='', classes='')"><a data-toggle="collapse" data-target="#${dom_id}" class="${classes}">${label}</a></%def>
 <%def name="DATA_TARGET_AS_TEXT_MODAL_WITH_REMOTE_CONTENT(dom_id, label, remote_url)"><a data-toggle="modal" data-target="#${dom_id}" data-remote="${remote_url}">${label}</a></%def>
 <%def name="DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(dom_id, label, remote_url, icon_classes)"><a data-toggle="modal" data-target="#${dom_id}" data-remote="${remote_url}">${ICON.FA_FW(icon_classes)} ${label}</a></%def>

tracim/tracim/templates/widgets/table_row.mak

@@ -2,12 +2,12 @@
 <%namespace name="ICON" file="tracim.templates.widgets.icon"/>
 <%namespace name="SPAN" file="tracim.templates.widgets.span"/>
 
-<%def name="USER_ROLE_IN_WORKSPACE(current_user, role, show_id=True, enable_link=None, disable_link=None, role_types=None)">
+<%def name="USER_ROLE_IN_WORKSPACE(current_user, role, show_id=True, enable_link=None, disable_link=None, role_types=None, base_link='/admin/workspaces/{workspace}')">
     <tr>
         % if show_id:
             <td>${role.workspace.id}</td>
         % endif
-        <td><a href="${tg.url('/admin/workspaces/{}').format(role.workspace.id)}">${role.workspace.name}</a></td>
+        <td><a href="${tg.url(base_link).format(workspace=role.workspace.id)}">${role.workspace.name}</a></td>
 
         % if role_types:
             ## <td>${BUTTON.SECURED_ROLE_SELECTOR(fake_api.current_user, result.workspace, member, fake_api.role_types)}</td>

tracim/tracim/templates/widgets/ui.mak

@@ -2,28 +2,18 @@
 
 <%def name="GENERIC_DISPLAY_VIEW_BUTTONS_CONTAINER(base_url)">
     <div class="btn-group folder__filter" role="group" aria-label="...">
-        ${BUTTON.TEXT('', 'btn btn-default disabled', _('display...'))}
 
-        <% show_deleted_param = 1 %>
-        <% show_archived_param = 1 %>
+        <% show_deleted_param = int(not show_deleted) %>
+        <% show_archived_param = int(not show_archived) %>
+        <% show_deleted_url = '{}?show_deleted={}&show_archived={}'.format(base_url, show_deleted_param, int(show_archived)) %>
+        <% show_archive_url = '{}?show_deleted={}&show_archived={}'.format(base_url, int(show_deleted), show_archived_param) %>
 
-        % if show_deleted:
-            <% show_deleted_param = 0 %>
-        % endif
-        % if show_archived:
-            <% show_archived_param = 0 %>
-        % endif
-
-        <a href="${base_url}?show_deleted=${show_deleted_param}&show_archived=${show_archived if show_archived else 0}"
-           class="btn btn-default disabled-has-priority ${'t-inactive-color' if not show_deleted else ''}"
-        >
-            ${_('deleted')}
+        <a href="${show_deleted_url}" class="btn btn-default disabled-has-priority ${('t-inactive-color', '')[show_deleted ]}">
+            ${(_('Show trashed items'), _('Hide trashed items'))[show_deleted]} <i class="fa fa-fw fa-trash ${('t-inactive-color', 'tracim-less-visible')[show_deleted]}"></i>
         </a>
 
-        <a href="${base_url}?show_deleted=${show_deleted if show_deleted else 0}&show_archived=${show_archived_param}"
-           class="btn btn-default disabled-has-priority ${'t-inactive-color' if not show_archived else ''}"
-        >
-            ${_('archived')}
+        <a href="${show_archive_url}" class="btn btn-default disabled-has-priority ${('t-inactive-color', '')[show_archived]}">
+            ${(_('Show archives'),_('Hide archives'))[show_archived]} <i class="fa fa-fw fa-archive ${('t-inactive-color', 'tracim-less-visible')[show_archived]}"></i>
         </a>
     </div>
 </%def>

tracim/tracim/templates/workspace/getone.mak

@@ -113,16 +113,20 @@
         </div>
     % endif
 
-        <p>
-            ${_('This workspace is {a_open}accessible with webdav{a_close}').format(a_open='<a data-toggle="collapse" href="#webdavConfig" aria-expanded="false" aria-controls="webdavConfig">', a_close='</a>')|n}
-        </p>
-        <div class="collapse" id="webdavConfig">
-            <p>${_('Adress to connect to webdav with:')}</p>
-            <p>Linux : </p>
-            <p class="form-control">dav://${webdav_url}</p>
-            <p>Windows : </p>
+    <p>
+        ${_('This workspace is {a_open}accessible with webdav{a_close}').format(a_open='<a data-toggle="collapse" href="#webdavConfig" aria-expanded="false" aria-controls="webdavConfig">', a_close='</a>')|n}
+    </p>
+    <div class="collapse" id="webdavConfig">
+        <div class="input-group">
+            <span class="input-group-addon" style="width: 8em;"><i class="fa fa-fw fa-windows"></i> Windows</span>
             <p class="form-control">http://${webdav_url}</p>
         </div>
+        <p></p>
+        <div class="input-group">
+            <span class="input-group-addon" style="width: 8em;"><i class="fa fa-fw fa-linux"></i> Linux</span>
+            <p class="form-control">dav://${webdav_url}</p>
+        </div>
+    </div>
 
     <div class="t-half-spacer-above t-less-visible"></div>
 
@@ -131,59 +135,63 @@
             <% user_role = h.user_role(fake_api.current_user, result.workspace) %>
 
             ${TITLE.H3(_('Content'), 'fa-copy', 'workspace-content')}
-
-            % if user_role > 1:
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                        <i class="fa fa-plus"></i> ${_('New ...')}
-                        <span class="caret"></span>
-                    </button>
-                    <ul class="dropdown-menu" role="menu">
-                        % for content_type in result.workspace.allowed_content_types:
-                            % if content_type.id == 'folder' and user_role > 2:
-                                ## Only show 'new folder' to content managers
-                                <%
-                                    new_form_content_url = tg.url('/workspaces/{}/folders/new'.format(result.workspace.id), params={'workspace_id': result.workspace.id, 'parent_id': None})
-                                    modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
-                                    icon_classes = content_type.icon+' '+content_type.color
-                                %>
-                                <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
-                            % else:
-                                <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT('', _('You are not allowed to create content'), '', 't-less-visible fa fa-ban')}</li>
-    ## Show new content entries in the menu is currently not available at root of a workspace
-    ## TODO - D.A. - 2015-08-20 - Allow to put content at root (and show related entry in the menu
-    ##                             % if user_role == 2:
-    ##                                 ## Only show 'new folder' to content managers
-    ##                                 <%
-    ##                                     new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
-    ##                                     modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
-    ##                                     icon_classes = content_type.icon+' '+content_type.color
-    ##                                 %>
-    ##                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
-    ##                             % endif
-                            % endif
-                        % endfor
-                    </ul>
+                <div class="col-md-4 col-sx-12">
+                    % if user_role > 1:
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                                <i class="fa fa-plus"></i> ${_('New ...')}
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu">
+                                % for content_type in result.workspace.allowed_content_types:
+                                    % if content_type.id == 'folder' and user_role > 2:
+                                        ## Only show 'new folder' to content managers
+                                        <%
+                                            new_form_content_url = tg.url('/workspaces/{}/folders/new'.format(result.workspace.id), params={'workspace_id': result.workspace.id, 'parent_id': None})
+                                            modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
+                                            icon_classes = content_type.icon+' '+content_type.color
+                                        %>
+                                        <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
+                                    % else:
+                                        <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT('', _('You are not allowed to create content'), '', 't-less-visible fa fa-ban')}</li>
+            ## Show new content entries in the menu is currently not available at root of a workspace
+            ## TODO - D.A. - 2015-08-20 - Allow to put content at root (and show related entry in the menu
+            ##                             % if user_role == 2:
+            ##                                 ## Only show 'new folder' to content managers
+            ##                                 <%
+            ##                                     new_form_content_url = tg.url('/workspaces/{}/folders/{}/{}s/new'.format(result.folder.workspace.id, result.folder.id, content_type.id), params={'workspace_id': result.folder.workspace.id, 'parent_id': result.folder.id})
+            ##                                     modal_dialog_id = '{content_type}-new-modal-dialog'.format(content_type=content_type.id)
+            ##                                     icon_classes = content_type.icon+' '+content_type.color
+            ##                                 %>
+            ##                                 <li>${BUTTON.DATA_TARGET_AS_TEXT_AND_ICON_MODAL_WITH_REMOTE_CONTENT(modal_dialog_id, content_type.label, new_form_content_url, icon_classes)}</li>
+            ##                             % endif
+                                    % endif
+                                % endfor
+                            </ul>
+                        </div>
+                    % endif
                 </div>
-            % endif
-
-            % if len(fake_api.sub_items) > 0:
-                ## INFO - D.A. - 2015-05-25
-                ## We hide filtering/search buttons if no content yet.
-                ## This make the interface more easy to use
-                <div class="btn-group" role="group" aria-label="...">
-                    ${BUTTON.TEXT('', 'btn btn-default disabled', _('hide...'))}
-                    % for content_type in result.workspace.allowed_content_types:
-                        ${BUTTON.TEXT('toggle-{type}-visibility'.format(type=content_type.id), 'btn btn-default t-active-color disabled-has-priority', content_type.label)}
-                    % endfor
+                <div class="col-md-8 text-right">
+                    % if len(fake_api.sub_items) > 0:
+                        ## INFO - D.A. - 2015-05-25
+                        ## We hide filtering/search buttons if no content yet.
+                        ## This make the interface more easy to use
+                        <div class="btn-group" role="group" aria-label="...">
+                            ${BUTTON.TEXT('', 'btn btn-default disabled', _('hide...'))}
+                            % for content_type in result.workspace.allowed_content_types:
+                                ${BUTTON.TEXT('toggle-{type}-visibility'.format(type=content_type.id), 'btn btn-default t-active-color disabled-has-priority', content_type.label)}
+                            % endfor
+                        </div>
+                        <p></p>
+                        ${UI.GENERIC_DISPLAY_VIEW_BUTTONS_CONTAINER(tg.url('/workspaces/{}'.format(result.workspace.id)))}
+                        <p></p>
+                        <div class="btn-group pull-right" role="group" aria-label="...">
+                            <input id="filtering"  type="text" class="form-control t-bg-grey" placeholder="${_('filter...')}" aria-describedby="basic-addon1">
+                        </div>
+                    % endif
                 </div>
 
-                <div class="btn-group pull-right" role="group" aria-label="...">
-                    <input id="filtering"  type="text" class="form-control t-bg-grey" placeholder="${_('search...')}" aria-describedby="basic-addon1">
-                </div>
-            % endif
 
-            ${UI.GENERIC_DISPLAY_VIEW_BUTTONS_CONTAINER(tg.url('/workspaces/{}'.format(result.workspace.id)))}
 
         </div>
         <div class="t-spacer-above">