Mercurial > kallithea
changeset 1779:9edd6ac132f0 beta
Added sorting into journal and admin pages
- code garden to reuse some blocks and make it consistent on different views
author | Marcin Kuzminski <marcin@python-works.com> |
---|---|
date | Fri, 16 Dec 2011 22:01:44 +0200 |
parents | defcf245f3e9 |
children | b9539c4df92f |
files | rhodecode/public/js/rhodecode.js rhodecode/templates/_data_table/_dt_elements.html rhodecode/templates/admin/repos/repos.html rhodecode/templates/index_base.html rhodecode/templates/journal/journal.html |
diffstat | 5 files changed, 277 insertions(+), 176 deletions(-) [+] |
line wrap: on
line diff
--- a/rhodecode/public/js/rhodecode.js Fri Dec 16 20:13:23 2011 +0200 +++ b/rhodecode/public/js/rhodecode.js Fri Dec 16 22:01:44 2011 +0200 @@ -600,6 +600,23 @@ /** + * QUICK REPO MENU + */ +var quick_repo_menu = function(){ + YUE.on(YUQ('.quick_repo_menu'),'click',function(e){ + var menu = e.currentTarget.firstElementChild.firstElementChild; + if(YUD.hasClass(menu,'hidden')){ + YUD.addClass(e.currentTarget,'active'); + YUD.removeClass(menu,'hidden'); + }else{ + YUD.removeClass(e.currentTarget,'active'); + YUD.addClass(menu,'hidden'); + } + }) +}; + + +/** * TABLE SORTING */
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/rhodecode/templates/_data_table/_dt_elements.html Fri Dec 16 22:01:44 2011 +0200 @@ -0,0 +1,78 @@ +## DATA TABLE RE USABLE ELEMENTS +## usage: +## <%namespace name="dt" file="/_data_table/_dt_elements.html"/> + +<%def name="quick_menu(repo_name)"> + <ul class="menu_items hidden"> + <li style="border-top:1px solid #003367;margin-left:18px;padding-left:-99px"></li> + <li> + <a title="${_('Summary')}" href="${h.url('summary_home',repo_name=repo_name)}"> + <span class="icon"> + <img src="${h.url('/images/icons/clipboard_16.png')}" alt="${_('Summary')}" /> + </span> + <span>${_('Summary')}</span> + </a> + </li> + <li> + <a title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=repo_name)}"> + <span class="icon"> + <img src="${h.url('/images/icons/time.png')}" alt="${_('Changelog')}" /> + </span> + <span>${_('Changelog')}</span> + </a> + </li> + <li> + <a title="${_('Files')}" href="${h.url('files_home',repo_name=repo_name)}"> + <span class="icon"> + <img src="${h.url('/images/icons/file.png')}" alt="${_('Files')}" /> + </span> + <span>${_('Files')}</span> + </a> + </li> + <li> + <a title="${_('Fork')}" href="${h.url('repo_fork_home',repo_name=repo_name)}"> + <span class="icon"> + <img src="${h.url('/images/icons/arrow_divide.png')}" alt="${_('Fork')}" /> + </span> + <span>${_('Fork')}</span> + </a> + </li> + </ul> +</%def> + +<%def name="repo_name(name,rtype,private,fork_of)"> + <div style="white-space: nowrap"> + ##TYPE OF REPO + %if rtype =='hg': + <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/> + %elif rtype =='git': + <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/> + %endif + + ##PRIVATE/PUBLIC + %if private: + <img class="icon" title="${_('private repository')}" alt="${_('private repository')}" src="${h.url('/images/icons/lock.png')}"/> + %else: + <img class="icon" title="${_('public repository')}" alt="${_('public repository')}" src="${h.url('/images/icons/lock_open.png')}"/> + %endif + + ##NAME + ${h.link_to(name,h.url('summary_home',repo_name=name),class_="repo_name")} + %if fork_of: + <a href="${h.url('summary_home',repo_name=fork_of)}"> + <img class="icon" alt="${_('fork')}" title="${_('Fork of')} ${fork_of}" src="${h.url('/images/icons/arrow_divide.png')}"/></a> + %endif + </div> +</%def> + + + +<%def name="revision(name,rev,tip,author,last_msg)"> + <div> + %if rev >= 0: + <pre><a title="${h.tooltip('%s:\n\n%s' % (author,last_msg))}" class="tooltip" href="${h.url('changeset_home',repo_name=name,revision=tip)}">${'r%s:%s' % (rev,h.short_id(tip))}</a></pre> + %else: + ${_('No changesets yet')} + %endif + </div> +</%def>
--- a/rhodecode/templates/admin/repos/repos.html Fri Dec 16 20:13:23 2011 +0200 +++ b/rhodecode/templates/admin/repos/repos.html Fri Dec 16 22:01:44 2011 +0200 @@ -14,7 +14,7 @@ </%def> <%def name="main()"> <div class="box"> - <!-- box / title --> + <div class="title"> ${self.breadcrumbs()} <ul class="links"> @@ -23,63 +23,99 @@ </li> </ul> </div> - <!-- end box / title --> + <div class="table"> - <table class="table_disp"> - <tr class="header"> - <th class="left">${_('Name')}</th> - <th class="left">${_('Description')}</th> - <th class="left">${_('Last change')}</th> - <th class="left">${_('Tip')}</th> - <th class="left">${_('Contact')}</th> - <th class="left">${_('action')}</th> - </tr> - %for cnt,repo in enumerate(c.repos_list): - <tr class="parity${cnt%2}"> - <td> - ## TYPE OF REPO - %if repo['dbrepo']['repo_type'] =='hg': - <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/> - %elif repo['dbrepo']['repo_type'] =='git': - <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/> - %else: - - %endif - - ## PRIVATE/PUBLIC REPO - %if repo['dbrepo']['private']: - <img alt="${_('private')}" src="${h.url('/images/icons/lock.png')}"/> - %else: - <img alt="${_('public')}" src="${h.url('/images/icons/lock_open.png')}"/> - %endif - ${h.link_to(repo['name'],h.url('edit_repo',repo_name=repo['name']))} - - %if repo['dbrepo_fork']: - <a href="${h.url('summary_home',repo_name=repo['dbrepo_fork']['repo_name'])}"> - <img class="icon" alt="${_('public')}" - title="${_('Fork of')} ${repo['dbrepo_fork']['repo_name']}" - src="${h.url('/images/icons/arrow_divide.png')}"/></a> - %endif - </td> - <td title="${repo['description']}">${h.truncate(repo['description'],60)}</td> - <td>${h.age(repo['last_change'])}</td> - <td> - %if repo['rev']>=0: - <div><pre>${h.link_to('r%s:%s' % (repo['rev'],h.short_id(repo['tip'])),h.url('changeset_home',repo_name=repo['name'],revision=repo['tip']),class_="tooltip",title=h.tooltip(repo['last_msg']))}</pre></div> - %else: - ${_('No changesets yet')} - %endif - </td> - <td title="${repo['contact']}">${h.person(repo['contact'])}</td> - <td> - ${h.form(url('repo', repo_name=repo['name']),method='delete')} - ${h.submit('remove_%s' % repo['name'],_('delete'),class_="delete_icon action_button",onclick="return confirm('"+_('Confirm to delete this repository')+"');")} - ${h.end_form()} - </td> - </tr> - %endfor + <div id='repos_list_wrap' class="yui-skin-sam"> + <%cnt=0%> + <%namespace name="dt" file="/_data_table/_dt_elements.html"/> + + <table id="repos_list"> + <thead> + <tr> + <th class="left"></th> + <th class="left">${_('Name')}</th> + <th class="left">${_('Description')}</th> + <th class="left">${_('Last change')}</th> + <th class="left">${_('Tip')}</th> + <th class="left">${_('Contact')}</th> + <th class="left">${_('Action')}</th> + </tr> + </thead> + + %for cnt,repo in enumerate(c.repos_list,1): + <tr class="parity${cnt%2}"> + <td class="quick_repo_menu"> + ${dt.quick_menu(repo['name'])} + </td> + <td class="reponame"> + ${dt.repo_name(repo['name'],repo['dbrepo']['repo_type'],repo['dbrepo']['private'],repo['dbrepo_fork'].get('repo_name'))} + </td> + ##DESCRIPTION + <td><span class="tooltip" title="${h.tooltip(repo['description'])}"> + ${h.truncate(repo['description'],60)}</span> + </td> + ##LAST CHANGE + <td> + <span class="tooltip" title="${repo['last_change']}">${h.age(repo['last_change'])}</span> + </td> + ##LAST REVISION + <td> + ${dt.revision(repo['name'],repo['rev'],repo['tip'],repo['author'],repo['last_msg'])} + </td> + <td title="${repo['contact']}">${h.person(repo['contact'])}</td> + <td> + ${h.form(url('repo', repo_name=repo['name']),method='delete')} + ${h.submit('remove_%s' % repo['name'],_('delete'),class_="delete_icon action_button",onclick="return confirm('"+_('Confirm to delete this repository')+"');")} + ${h.end_form()} + </td> + </tr> + %endfor </table> + </div> </div> </div> - +<script> + + // main table sorting + var myColumnDefs = [ + {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"}, + {key:"name",label:"${_('Name')}",sortable:true, + sortOptions: { sortFunction: nameSort }}, + {key:"desc",label:"${_('Description')}",sortable:true}, + {key:"last_change",label:"${_('Last Change')}",sortable:true, + sortOptions: { sortFunction: ageSort }}, + {key:"tip",label:"${_('Tip')}",sortable:true, + sortOptions: { sortFunction: revisionSort }}, + {key:"owner",label:"${_('Owner')}",sortable:true}, + {key:"action",label:"${_('Action')}",sortable:false}, + ]; + + var myDataSource = new YAHOO.util.DataSource(YUD.get("repos_list")); + + myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; + + myDataSource.responseSchema = { + fields: [ + {key:"menu"}, + {key:"name"}, + {key:"desc"}, + {key:"last_change"}, + {key:"tip"}, + {key:"owner"}, + {key:"action"}, + ] + }; + + var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource, + { + sortedBy:{key:"name",dir:"asc"}, + MSG_SORTASC:"${_('Click to sort ascending')}", + MSG_SORTDESC:"${_('Click to sort descending')}" + } + ); + myDataTable.subscribe('postRenderEvent',function(oArgs) { + tooltip_activate(); + quick_repo_menu(); + }); +</script> </%def>
--- a/rhodecode/templates/index_base.html Fri Dec 16 20:13:23 2011 +0200 +++ b/rhodecode/templates/index_base.html Fri Dec 16 22:01:44 2011 +0200 @@ -50,6 +50,9 @@ <h1><a href="${h.url('home')}">${c.rhodecode_name} ${c.rhodecode_version}</a></h1> </div> <div id='repos_list_wrap' class="yui-skin-sam"> + <%cnt=0%> + <%namespace name="dt" file="/_data_table/_dt_elements.html"/> + <table id="repos_list"> <thead> <tr> @@ -64,91 +67,29 @@ </tr> </thead> <tbody> - <%cnt=0%> %for cnt,repo in enumerate(c.repos_list,1): <tr class="parity${cnt%2}"> + ##QUICK MENU <td class="quick_repo_menu"> - <ul class="menu_items hidden"> - <li style="border-top:1px solid #003367;margin-left:18px;padding-left:-99px"></li> - <li> - <a title="${_('Summary')}" href="${h.url('summary_home',repo_name=repo['name'])}"> - <span class="icon"> - <img src="${h.url('/images/icons/clipboard_16.png')}" alt="${_('Summary')}" /> - </span> - <span>${_('Summary')}</span> - </a> - </li> - <li> - <a title="${_('Changelog')}" href="${h.url('changelog_home',repo_name=repo['name'])}"> - <span class="icon"> - <img src="${h.url('/images/icons/time.png')}" alt="${_('Changelog')}" /> - </span> - <span>${_('Changelog')}</span> - </a> - </li> - <li> - <a title="${_('Files')}" href="${h.url('files_home',repo_name=repo['name'])}"> - <span class="icon"> - <img src="${h.url('/images/icons/file.png')}" alt="${_('Files')}" /> - </span> - <span>${_('Files')}</span> - </a> - </li> - <li> - <a title="${_('Fork')}" href="${h.url('repo_fork_home',repo_name=repo['name'])}"> - <span class="icon"> - <img src="${h.url('/images/icons/arrow_divide.png')}" alt="${_('Fork')}" /> - </span> - <span>${_('Fork')}</span> - </a> - </li> - </ul> + ${dt.quick_menu(repo['name'])} </td> - <td> - ## TYPE OF REPO - <div style="white-space: nowrap"> - %if repo['dbrepo']['repo_type'] =='hg': - <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/> - %elif repo['dbrepo']['repo_type'] =='git': - <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/> - %endif - - ##PRIVATE/PUBLIC - %if repo['dbrepo']['private']: - <img class="icon" title="${_('private repository')}" alt="${_('private repository')}" src="${h.url('/images/icons/lock.png')}"/> - %else: - <img class="icon" title="${_('public repository')}" alt="${_('public repository')}" src="${h.url('/images/icons/lock_open.png')}"/> - %endif - - ##NAME - ${h.link_to(repo['name'], - h.url('summary_home',repo_name=repo['name']),class_="repo_name")} - %if repo['dbrepo_fork']: - <a href="${h.url('summary_home',repo_name=repo['dbrepo_fork']['repo_name'])}"> - <img class="icon" alt="${_('fork')}" - title="${_('Fork of')} ${repo['dbrepo_fork']['repo_name']}" - src="${h.url('/images/icons/arrow_divide.png')}"/></a> - %endif - </div> + ##REPO NAME AND ICONS + <td class="reponame"> + ${dt.repo_name(repo['name'],repo['dbrepo']['repo_type'],repo['dbrepo']['private'],repo['dbrepo_fork'].get('repo_name'))} </td> ##DESCRIPTION <td><span class="tooltip" title="${h.tooltip(repo['description'])}"> ${h.truncate(repo['description'],60)}</span> </td> - ##LAST CHANGE - <td> - <span class="tooltip" title="${repo['last_change']}"> - ${h.age(repo['last_change'])}</span> - </td> + ##LAST CHANGE DATE <td> - <div> - %if repo['rev']>=0: - <pre><a title="${h.tooltip('%s\n%s' % (repo['author'],repo['last_msg']))}" class="tooltip" href="${h.url('changeset_home',repo_name=repo['name'],revision=repo['tip'])}">${'r%s:%s' % (repo['rev'],h.short_id(repo['tip']))}</a></pre> - %else: - ${_('No changesets yet')} - %endif - </div> + <span class="tooltip" title="${repo['last_change']}">${h.age(repo['last_change'])}</span> </td> + ##LAST REVISION + <td> + ${dt.revision(repo['name'],repo['rev'],repo['tip'],repo['author'],repo['last_msg'])} + </td> + ## <td title="${repo['contact']}">${h.person(repo['contact'])}</td> <td> %if c.rhodecode_user.username != 'default': @@ -176,18 +117,7 @@ var func = function(node){ return node.parentNode.parentNode.parentNode.parentNode; } - var qrm = function(){ - YUE.on(YUQ('.quick_repo_menu'),'click',function(e){ - var menu = e.currentTarget.firstElementChild.firstElementChild; - if(YUD.hasClass(menu,'hidden')){ - YUD.addClass(e.currentTarget,'active'); - YUD.removeClass(menu,'hidden'); - }else{ - YUD.removeClass(e.currentTarget,'active'); - YUD.addClass(menu,'hidden'); - } - }) - }; + // groups table sorting var myColumnDefs = [ @@ -255,8 +185,8 @@ ); myDataTable.subscribe('postRenderEvent',function(oArgs) { tooltip_activate(); - qrm(); - q_filter('q_filter',YUQ('div.table tr td a.repo_name'),func); + quick_repo_menu(); + q_filter('q_filter',YUQ('div.table tr td a.repo_name'),func); }); </script> \ No newline at end of file
--- a/rhodecode/templates/journal/journal.html Fri Dec 16 20:13:23 2011 +0200 +++ b/rhodecode/templates/journal/journal.html Fri Dec 16 22:01:44 2011 +0200 @@ -42,39 +42,33 @@ <!-- end box / title --> <div id="my" class="table"> %if c.user_repos: - <table> - <thead> - <tr> - <th class="left">${_('Name')}</th> - <th class="left">${_('revision')}</th> - <th colspan="2" class="left">${_('action')}</th> - </thead> + <div id='repos_list_wrap' class="yui-skin-sam"> + <table id="repos_list"> + <thead> + <tr> + <th></th> + <th class="left">${_('Name')}</th> + <th class="left">${_('Tip')}</th> + <th class="left">${_('Action')}</th> + <th class="left">${_('Action')}</th> + </thead> <tbody> + <%namespace name="dt" file="/_data_table/_dt_elements.html"/> %for repo in c.user_repos: <tr> + ##QUICK MENU + <td class="quick_repo_menu"> + ${dt.quick_menu(repo['name'])} + </td> + ##REPO NAME AND ICONS + <td class="reponame"> + ${dt.repo_name(repo['name'],repo['dbrepo']['repo_type'],repo['dbrepo']['private'],repo['dbrepo_fork'].get('repo_name'))} + </td> + ##LAST REVISION <td> - %if repo['dbrepo']['repo_type'] =='hg': - <img class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/> - %elif repo['dbrepo']['repo_type'] =='git': - <img class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/> - %else: - - %endif - %if repo['dbrepo']['private']: - <img class="icon" alt="${_('private')}" src="${h.url('/images/icons/lock.png')}"/> - %else: - <img class="icon" alt="${_('public')}" src="${h.url('/images/icons/lock_open.png')}"/> - %endif - - ${h.link_to(repo['name'], h.url('summary_home',repo_name=repo['name']),class_="repo_name")} - %if repo['dbrepo_fork']: - <a href="${h.url('summary_home',repo_name=repo['dbrepo_fork']['repo_name'])}"> - <img class="icon" alt="${_('public')}" - title="${_('Fork of')} ${repo['dbrepo_fork']['repo_name']}" - src="${h.url('/images/icons/arrow_divide.png')}"/></a> - %endif - </td> - <td><div class="tooltip" title="${repo['last_change']}"><pre>${("r%s:%s") % (repo['rev'],h.short_id(repo['tip']))}</pre></div></td> + ${dt.revision(repo['name'],repo['rev'],repo['tip'],repo['author'],repo['last_msg'])} + </td> + ## <td><a href="${h.url('repo_settings_home',repo_name=repo['name'])}" title="${_('edit')}"><img class="icon" alt="${_('private')}" src="${h.url('/images/icons/application_form_edit.png')}"/></a></td> <td> ${h.form(url('repo_settings_delete', repo_name=repo['name']),method='delete')} @@ -85,6 +79,7 @@ %endfor </tbody> </table> + </div> %else: <div style="padding:5px 0px 10px 0px;"> ${_('No repositories yet')} @@ -147,14 +142,15 @@ </div> <script type="text/javascript"> + YUE.on('show_my','click',function(e){ YUD.setStyle('watched','display','none'); YUD.setStyle('my','display',''); var nodes = YUQ('#my tr td a.repo_name'); var target = 'q_filter'; var func = function(node){ - return node.parentNode.parentNode; - } + return node.parentNode.parentNode.parentNode.parentNode; + } q_filter(target,nodes,func); YUE.preventDefault(e); }) @@ -172,6 +168,50 @@ YUE.on('refresh','click',function(e){ ypjax(e.currentTarget.href,"journal",function(){show_more_event();tooltip_activate();}); YUE.preventDefault(e); - }) + }); + + + // main table sorting + var myColumnDefs = [ + {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"}, + {key:"name",label:"${_('Name')}",sortable:true, + sortOptions: { sortFunction: nameSort }}, + {key:"tip",label:"${_('Tip')}",sortable:true, + sortOptions: { sortFunction: revisionSort }}, + {key:"action1",label:"",sortable:false}, + {key:"action2",label:"",sortable:false}, + ]; + + var myDataSource = new YAHOO.util.DataSource(YUD.get("repos_list")); + + myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE; + + myDataSource.responseSchema = { + fields: [ + {key:"menu"}, + {key:"name"}, + {key:"tip"}, + {key:"action1"}, + {key:"action2"} + ] + }; + + var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource, + { + sortedBy:{key:"name",dir:"asc"}, + MSG_SORTASC:"${_('Click to sort ascending')}", + MSG_SORTDESC:"${_('Click to sort descending')}" + } + ); + myDataTable.subscribe('postRenderEvent',function(oArgs) { + tooltip_activate(); + quick_repo_menu(); + var func = function(node){ + return node.parentNode.parentNode.parentNode.parentNode; + } + q_filter('q_filter',YUQ('#my tr td a.repo_name'),func); + }); + + </script> </%def>