--- a/server/src/main/webapp/WEB-INF/templates/projectIndex.html Thu Jun 12 16:27:35 2014 +0200
+++ b/server/src/main/webapp/WEB-INF/templates/projectIndex.html Sat Jun 14 00:15:18 2014 +0200
@@ -10,14 +10,17 @@
<link rel="shortcut icon" href="../../static/img/favicon.ico" th:href="@{/static/img/favicon.ico}"/>
<script th:remove="all" type="text/javascript" src="../../static/lib/jquery.min.js"></script>
- <script th:remove="all" type="text/javascript" src="../../static/js/thymol.js"></script>
+ <script th:remove="all" type="text/javascript" src="../../static/js/thymol.js"></script>
- <script src="../../lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
- <script src="../../lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
- <script src="../../lib/URI.js" th:src="@{/static/lib/URI.js}" ></script>
+ <script src="../../static/lib/jquery.min.js" th:src="@{/static/lib/jquery.min.js}" ></script>
+ <script src="../../static/lib/jquery-ui/jquery-ui.min.js" th:src="@{/static/lib/jquery-ui/jquery-ui.min.js}" ></script>
+ <script src="../../static/lib/underscore-min.js" th:src="@{/static/lib/underscore-min.js}" ></script>
+ <script src="../../static/lib/URI.js" th:src="@{/static/lib/URI.js}" ></script>
+ <link href="../../static/lib/jquery-ui/css/ui-lightness/jquery-ui.min.css" rel="stylesheet" th:href="@{/static/lib/jquery-ui/css/ui-lightness/jquery-ui.min.css}"/>
<link href="../../static/css/style.css" rel="stylesheet" th:href="@{/static/css/style.css}"/>
- <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/>
+ <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}"/>
+
</head>
<body>
<div id="container">
@@ -65,11 +68,7 @@
<th th:with="sorted=(${columnSort}=='title')"><span th:text="#{renkanIndex.project_name}">Name</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="title"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sortable-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
<th th:with="sorted=(${columnSort}=='updated')"><span th:text="#{renkanIndex.project_updated}">Updated</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="updated"/><input type="hidden" name="p.sort.dir" th:value="(${sorted})?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-desc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
<th th:with="sorted=(${columnSort}=='created')"><span th:text="#{renkanIndex.project_creation}" >Creation</span><form method="get" class="proj-sort-form"><input type="hidden" name="p.sort" value="created"/><input type="hidden" name="p.sort.dir" th:value="${sorted}?${sortDirInv}:'desc'"/><input th:if="${param['filter']}" name="filter" type="hidden" th:value="${param['filter'][0]}"/><input type="submit" class="proj-sort-asc-col" th:class="${sorted}?'proj-sort-'+${sortDir}+'-col':'proj-sortable-col'" value=""/></form></th>
- <th th:text="#{renkanIndex.project_edit}">Edit</th>
- <th th:text="#{renkanIndex.project_copy}">Copy</th>
- <th th:text="#{renkanIndex.project_delete}">Del.</th>
- <th th:text="#{renkanIndex.project_render}">View</th>
- <th th:text="#{renkanIndex.project_export}">Export</th>
+ <th th:text="#{renkanIndex.project_commands}">Comm.</th>
</tr>
</thead>
<tbody>
@@ -77,14 +76,22 @@
<th th:text="${project.title}">title</th>
<td th:text="${project.updated}?${#dates.format(project.updated, #messages.msg('date.format'))}:''">update</td>
<td th:text="${#dates.format(project.created, #messages.msg('date.format'))}">date</td>
- <td><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:text="#{renkanIndex.project_edit_link}">Edit project</a></td>
- <td><a href="#" th:text="#{renkanIndex.project_copy_link}" th:attr="data-project_id=${project.id}" class="copy-project">Copy project</a></td>
- <td><a href="#" th:text="#{renkanIndex.project_delete_link}" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete-project">Delete project</a></td>
- <td><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:text="#{renkanIndex.project_render_link}">View project</a></td>
- <td><a href="#" th:href="@{'/p/exp/'+${project.id}}" th:text="#{renkanIndex.project_export_link}">Export project</a></td>
+ <td>
+ <a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}" th:title="#{renkanIndex.project_edit_link}"><span class="ui-icon ui-icon-pencil renkan-basic-action"></span></a>
+ <a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}" th:title="#{renkanIndex.project_render_link}"><span class="ui-icon renkan-icon-eye renkan-basic-action"></span></a>
+ <span class="ui-icon ui-icon-triangle-1-e renkan-basic-action renkan-action-button" th:id="'renkan-action-button-'+${project.id}" th:attr="data-project_id=${project.id}"></span>
+ </td>
</tr>
</tbody>
</table>
+ <ul th:each="project: ${page}" class="action-menu" id="action-menu-" th:id="'action-menu-'+${project.id}">
+ <li><a href="#" th:href="@{'/p/'+${project.id}(cowebkey=${project.getKey(2)})}"><span class="ui-icon ui-icon-pencil"></span><span th:text="#{renkanIndex.project_edit_link}">Edit project</span></a></li>
+ <li><a href="#" th:attr="data-project_id=${project.id}" class="copy-project"><span class="ui-icon ui-icon-copy"></span><span th:text="#{renkanIndex.project_copy_link}">Copy project</span></a></li>
+ <li><a href="#" th:attr="data-project_id=${project.id},data-project_title=${project.title}" class="delete-project"><span class="ui-icon ui-icon-trash"></span><span th:text="#{renkanIndex.project_delete_link}">Delete project</span></a></li>
+ <li><a href="#" th:href="@{'/p/pub/'+${project.id}(cowebkey=${project.getKey(1)})}"><span class=" ui-icon renkan-icon-eye"></span><span th:text="#{renkanIndex.project_render_link}">View project</span></a></li>
+ <li><a href="#" th:href="@{'/p/exp/'+${project.id}}"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span><span th:text="#{renkanIndex.project_export_link}">Export project</span></a></li>
+ </ul>
+
</div>
</div>
<footer id="footer" th:include="fragment/pageFragment :: footerFragment">
@@ -93,13 +100,13 @@
</div>
<script th:inline="javascript" >
/*<![CDATA[*/
-
+ 'use strict';
function go2Title()
{
var renkantitle = $("#renkantitle").val(),
renkanfiles = $("#renkanfile").prop("files");
- if(renkantitle.length == 0 && renkanfiles.length == 0) {
+ if(renkantitle.length === 0 && renkanfiles.length === 0) {
var alert_message = /*[[#{renkanIndex.js.empty_form_error}]]*/"Please enter a title or a file";
alert(alert_message);
return false;
@@ -120,7 +127,7 @@
});
});
- if(renkanfiles.length == 0) {
+ if(renkanfiles.length === 0) {
deferred.resolve({
title: renkantitle,
description: "",
@@ -168,14 +175,36 @@
}
}
+ function createMenuHandler(menu, timeoutCallback) {
+ return function(e) {
+ menu.toggle();
+ $(e.target).toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-se");
+ $('.renkan-action-button').each(function() {
+ if($(this).prop('id') !== $(e.target).prop('id')) {
+ $(this).removeClass("ui-icon-triangle-1-se").addClass("ui-icon-triangle-1-e");
+ $("#action-menu-"+$(this).data('project_id')).hide();
+ var timeout = $("#action-menu-"+$(this).data('project_id')).data('blurtimeout');
+ if(typeof timeout !== 'undefined') {
+ clearTimeout(menu.data('blurtimeout'));
+ menu.removeData('blurtimeout');
+ }
+ }
+ });
+ if(menu.is(":visible")) {
+ menu.data('blurtimeout', setTimeout( timeoutCallback,5000));
+ }
+ }
+ }
+
$(function(){
$(".copy-project").click(function(event) {
- copyProject($(event.target).data("project_id"));
+ var project_id = $(event.currentTarget).data("project_id");
+ copyProject(project_id);
});
$(".delete-project").click(function(event) {
- deleteProject($(event.target).data("project_id"), $(event.target).data("project_title"));
+ deleteProject($(event.currentTarget).data("project_id"), $(event.currentTarget).data("project_title"));
});
@@ -189,6 +218,28 @@
e.preventDefault();
console.log("import form event :", e);
});
+
+ $('.renkan-action-button').each(function() {
+ var projectId = $(this).data('project_id');
+ var menu = $('#action-menu-'+projectId).menu().position({ my: "left top", at: "right top", of: this }).hide();
+ var that = this;
+
+ var timeoutCallback = function() {
+ menu.hide();
+ $(that).removeClass("ui-icon-triangle-1-se").addClass("ui-icon-triangle-1-e");
+ menu.removeData('blurtimeout');
+ };
+
+ menu.on('menufocus', function() {
+ clearTimeout(menu.data('blurtimeout'));
+ menu.removeData('blurtimeout');
+ });
+ menu.on('menublur',function(e) {
+ menu.data('blurtimeout', setTimeout( timeoutCallback,200));
+ });
+
+ $(this).click(createMenuHandler(menu, timeoutCallback));
+ });
});
/*]]>*/