Skip to content

GitLab

Commit 67f4614a authored by philippe's avatar philippe
Browse files

some update with bootstrap

parent 4e154bf0
Expand all Hide whitespace changes
Inline Side-by-side
ui/nG6/pi1/class.tx_nG6_pi1.php
View file @ 67f4614a
......@@ -74,6 +74,11 @@ class tx_nG6_pi1 extends tslib_pibase {
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.dataTables.plugins.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/DT_bootstrap.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.datePicker.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.url.packed.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.venny.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/tx_nG6_pi1.js"></script>
......@@ -83,15 +88,17 @@ class tx_nG6_pi1 extends tslib_pibase {
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jsphylosvg-min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/raphael-min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/unitip.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.datePicker.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/jquery.jeditable.min.js"></script>
<script type="text/javascript" src="'.t3lib_extMgm::siteRelPath($this->extKey).'res/js/tx_nG6_table.js"></script>
<script type="text/javascript" src="typo3/md5.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/unitip.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/bootstrap-responsive.min.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/DT_bootstrap.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/bootstrap-editable.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/datepicker.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.venny.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.dataTables.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.datePicker.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/tx_nG6.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.core.css"/>
<link type="text/css" rel="stylesheet" media="screen" href="'.t3lib_extMgm::siteRelPath($this->extKey).'res/css/jquery.ui.theme.css"/>
......
ui/nG6/pi1/project_view.tpl
View file @ 67f4614a
......@@ -36,7 +36,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<input type="hidden" id="is_project_admin" value="{$projects[key($projects)].is_admin}" />
<div class="project">
<h2>Project {$projects[key($projects)].name} :</h2>
<h2> {$projects[key($projects)].name}<small> Project </small></h2>
<p><strong>{$projects[key($projects)].description}</strong> <br />
{$project_runs|@count} run(s) and {$project_analysis|@count} analyse(s) have been done on the run {$projects[key($projects)].name}.
<br />
......@@ -77,7 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{assign var="display_analysis_result" value=true}
{/if}
{/foreach}
<table class="display" id="analysis_data_table">
<table class="table table-striped table-bordered dataTable" id="analysis_data_table">
<thead>
<tr>
{if $projects[key($projects)].is_admin && $login_user && $display_analysis_result}
......@@ -97,8 +97,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<tr>
<th align="left" colspan="5">
With selection :
<button id="hide_analysis" type="button" class="btn pill-l"><span><span>hide</span></span></button><button id="unhide_analysis" type="button" class="btn pill-r"><span><span>unhide</span></span></button>
&nbsp;<button id="delete_analysis" type="button" class="btn"><span><span>delete</span></span></button>
<div class="btn-group">
<button id="hide_analysis" type="button" class="btn btn-small"><i class=" icon-eye-close"></i> hide</button>
<button id="unhide_analysis" type="button" class="btn btn-small"><i class="icon-eye-open"></i> unhide</button>
</div>
<button id="delete_analysis" type="button" class="btn btn-small"><i class="icon-remove"></i> delete</button>
</th>
</tr>
</tfoot>
......@@ -127,7 +130,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
In the table below are listed all users with an access to the project, the administrator is the user who had run the pipeline and the manager is the user in charge of managing access to the project. As a project member you can browse all the data related to the project. For further information, send an email to the project manager(s).
{/if}
</p>
<table class="display" id="users_data_table">
<table class="table table-striped table-bordered dataTable" id="users_data_table">
<thead>
<tr>
{if $needs_action}
......@@ -215,7 +218,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<tr>
<th align="left" colspan="7">
With selection :
<button id="add_user" type="button" class="btn pill-l"><span><span>add user</span></span></button><button id="del_user" type="button" class="btn pill-r"><span><span>delete user</span></span></button>
<div class="btn-group">
<button id="add_user" type="button" class="btn btn-small"><i class="icon-plus"></i> add user</button>
<button id="del_user" type="button" class="btn btn-small"><i class="icon-minus"></i> delete user</button>
</div>
</th>
</tr>
</tfoot>
......@@ -239,16 +245,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{/foreach}
{* Then display the table *}
<div class="project">
<h2>Projects list you can access:</h2>
<p>
You have access to {$projects|@count} projects.
<br />
{assign var="project_size" value="<span id='size' class='tx-nG6-mini-wait'></span>"}
Raw data and analysis results use <strong>{$project_size}</strong> on the hard drive for all projects.
</p>
<h2>Projects list <small> you can access </small></h2>
<blockquote>
<p>You have access to <strong>{$projects|@count}</strong> projects.</p>
{assign var="project_size" value="<span id='size' class='tx-nG6-mini-wait'></span>"}
<p>Raw data and analysis results use <strong>{$project_size}</strong> on the hard drive for all projects.</p>
</blockquote>
</div>
<br />
<table class="display" id="project_data_table">
<table class="table table-striped table-bordered dataTable" id="project_data_table">
<thead>
<tr>
{if $is_at_least_admin_of_1_project && $login_user}
......@@ -280,9 +285,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{if $project_values.hidden == 0}
{assign var="hidden_attribute" value=""}
{/if}
<td class="{$editable} field=tx_nG6_project=name {$hidden_attribute}">{$project_values.href}</td>
<td class="{$editable} field=tx_nG6_project=crdate {$hidden_attribute}">{$project_values.date|date_format:"%d-%m-%y"}</td>
<td class="{$editable} field=tx_nG6_project=description {$hidden_attribute}">{$project_values.description}</td>
<td field=tx_nG6_project=name {$hidden_attribute}">{$project_values.href}</td>
<td field=tx_nG6_project=crdate {$hidden_attribute}">
<a href="#" class="editable-date" data-type="date" data-pk="1" data-url="/post" data-original-title="Select date">{$project_values.date|date_format:"%d/%m/%Y"}</a>
</td>
<td field=tx_nG6_project=description {$hidden_attribute}">
<a href="#" class="editable" data-type="textarea" data-pk="1" data-original-title="Enter description">
{$project_values.description}
</a>
</td>
</tr>
{/if}
{/foreach}
......@@ -290,14 +304,45 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
{if $is_at_least_admin_of_1_project && $login_user}
<tfoot>
<tr>
<th align="left" colspan="3">
With selection :
<button id="hide_project" type="button" class="btn pill-l"><span><span>hide</span></span></button><button id="unhide_project" type="button" class="btn pill-r"><span><span>unhide</span></span></button>
&nbsp;<button id="delete_project" type="button" class="btn"><span><span>delete</span></span></button>&nbsp;
<button id="publish_project" type="button" class="btn pill-l"><span><span>publish</span></span></button><button id="unpublish_project" type="button" class="btn pill-r"><span><span>unpublish</span></span></button>
<th align="left" colspan="4">
With selection :
<div class="btn-group">
<button id="hide_project" type="button" class="btn btn-small"><i class=" icon-eye-close"></i> hide</button>
<button id="unhide_project" type="button" class="btn btn-small"><i class="icon-eye-open"></i> unhide</button>
</div>
<button id="delete_project" type="button" class="btn btn-small"><i class="icon-trash"></i> delete</button>
<div class="btn-group">
<button id="publish_project" type="button" class="btn btn-small"><i class="icon-thumbs-up"></i> publish</button>
<button id="unpublish_project" type="button" class="btn btn-small"><i class="icon-thumbs-down"></i> unpublish</button>
</div>
</th>
</tr>
</tfoot>
{/if}
</table>
{/if}
\ No newline at end of file
{/if}
{* Modal initialization *}
{* Global tmpl *}
<div id="ng6modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modal-label-tmpl" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="modal-label-tmpl">Modal header</h3>
</div>
<div id="modal-body-tmpl" class="modal-body"></div>
<div id="modal-foot-tmpl" class="modal-footer"></div>
</div>
{* Error No raw selected modal *}
<div id="ng6modal-DTnoraw" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel-DTnoraw" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Error</h3>
</div>
<div class="modal-body">
<div class='tx-nG6-pi1-error'>No raw selected, please select a raw to access this fonctionality.</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> Close</button>
</div>
</div>
\ No newline at end of file
ui/nG6/pi1/run_table.tpl
View file @ 67f4614a
......@@ -15,7 +15,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*}
<table class="display" id="run_data_table">
<table class="table table-striped table-bordered dataTable" id="run_data_table">
<thead>
<tr>
{if $is_at_least_admin_of_1_run && $login_user}
......@@ -69,8 +69,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<tr>
<th align="left" colspan="11">
With selection :
<button id="hide_run" type="button" class="btn pill-l"><span><span>hide</span></span></button><button id="unhide_run" type="button" class="btn pill-r"><span><span>unhide</span></span></button>
&nbsp;<button id="delete_run" type="button" class="btn"><span><span>delete</span></span></button>
<div class="btn-group">
<button id="hide_run" type="button" class="btn btn-small"><i class=" icon-eye-close"></i> hide</button>
<button id="unhide_run" type="button" class="btn btn-small"><i class="icon-eye-open"></i> unhide</button>
</div>
<button id="delete_run" type="button" class="btn btn-small"><i class="icon-remove"></i> delete</button>
</th>
</tr>
</tfoot>
......
ui/nG6/res/css/DT_bootstrap.css 0 → 100644
View file @ 67f4614a
/*
* Datatable bootstrap local update
*/
div.dataTables_length label {
float: left;
text-align: left;
width: auto;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
}
div.dataTables_filter {
width: auto;
}
div.dataTables_length {
width: auto;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table.table {
clear: both;
margin-bottom: 6px !important;
max-width: none !important;
}
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
cursor: pointer;
*cursor: hand;
}
table.table thead .sorting { background: url('../img/sort_both.png') no-repeat center right #EFECE2; }
table.table thead .sorting_asc { background: url('../img/sort_asc.png') no-repeat center right #EFECE2; }
table.table thead .sorting_desc { background: url('../img/sort_desc.png') no-repeat center right #EFECE2; }
table.table thead .sorting_asc_disabled { background: url('../img/sort_asc_disabled.png') no-repeat center right #EFECE2; }
table.table thead .sorting_desc_disabled { background: url('../img/sort_desc_disabled.png') no-repeat center right #EFECE2; }
table.dataTable th:active {
outline: none;
}
/* Scrolling */
div.dataTables_scrollHead table {
margin-bottom: 0 !important;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
div.dataTables_scrollHead table thead tr:last-child th:first-child,
div.dataTables_scrollHead table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.dataTables_scrollBody table {
border-top: none;
margin-bottom: 0 !important;
}
div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
border-top: none;
}
div.dataTables_scrollFoot table {
border-top: none;
}
/*
* TableTools styles
*/
.table tbody tr.active td,
.table tbody tr.active th {
background-color: #08C;
color: white;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #0075b0 !important;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
*cursor: hand;
}
div.DTTT .btn {
color: #333 !important;
font-size: 12px;
}
div.DTTT .btn:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu a {
color: #333 !important; /* needed only when demo_page.css is included */
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
background-color: #0088cc;
color: white !important;
}
/* TableTools information display */
div.DTTT_print_info.modal {
height: 150px;
margin-top: -75px;
text-align: center;
}
div.DTTT_print_info h6 {
font-weight: normal;
font-size: 28px;
line-height: 28px;
margin: 1em;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin-bottom: 0 !important;
}
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_LeftFootWrapper table {
border-top: none;
}
/*
* Editable styles
*/
.editable-click,
a.editable-click {
text-decoration: none;
border-bottom: dashed 0px !important;
}
a.editable-click:hover {
text-decoration: none;
border-bottom: dashed 1px #0088cc !important;
}
/*
* Modal styles
*/
#ng6modal .modal-body {
max-height: 800px;
}
.modal-header h3 {
padding: 0 !important;
}
.form-horizontal .control-label {
width: 200px !important;
}
.form-horizontal .controls {
margin-left: 220px !important;
}
\ No newline at end of file
ui/nG6/res/css/bootstrap-editable.css 0 → 100644
View file @ 67f4614a
/*! X-editable - v1.4.3
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
* http://github.com/vitalets/x-editable
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
margin-bottom: 0; /* overwrites bootstrap margin */
}
.editableform .control-group {
margin-bottom: 0; /* overwrites bootstrap margin */
white-space: nowrap; /* prevent wrapping buttons on new line */
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
}
.editable-buttons {
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
vertical-align: top;
margin-left: 7px;
/* inline-block emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-input {
vertical-align: top;
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
white-space: normal; /* reset white-space decalred in parent*/
/* display-inline emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-buttons .editable-cancel {
margin-left: 7px;
}
/*for jquery-ui buttons need set height to look more pretty*/
.editable-buttons button.ui-button-icon-only {
height: 24px;
width: 30px;
}
.editableform-loading {
background: url('../img/loading.gif') center center no-repeat;
height: 25px;
width: auto;
min-width: 25px;
}
.editable-inline .editableform-loading {
background-position: left 5px;
}
.editable-error-block {
max-width: 300px;
margin: 5px 0 0 0;
width: auto;
white-space: normal;
}
/*add padding for jquery ui*/
.editable-error-block.ui-state-error {
padding: 3px;
}
.editable-error {
color: red;
}
.editableform .editable-date {
padding: 0;
margin: 0;
float: left;
}
/* checklist vertical alignment */
.editable-checklist label input[type="checkbox"],
.editable-checklist label span {
vertical-align: middle;
margin: 0;
}
.editable-checklist label {
white-space: nowrap;
}
/* set exact width of textarea to fit buttons toolbar */
.editable-wysihtml5 {
width: 566px;
height: 250px;
}
/* clear button shown as link in date inputs */
.editable-clear {
clear: both;
font-size: 0.9em;
text-decoration: none;
text-align: right;
}
/* IOS-style clear button for text inputs */
.editable-clear-x {
background: url('../img/clear.png') center center no-repeat;
display: block;
width: 13px;
height: 13px;
position: absolute;
opacity: 0.6;
z-index: 100;
}
.editable-clear-x:hover {
opacity: 1;
}
.editable-container {
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
}
.editable-container.popover {
/* width: 300px;*/ /* debug */
width: auto; /* without this rule popover does not stretch */
}
.editable-container.editable-inline {
display: inline-block;
vertical-align: middle;
width: auto;
/* inline-block emulation for IE7*/
zoom: 1;
*display: inline;
}
.editable-container.ui-widget {
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
}
.editable-click,
a.editable-click,
a.editable-click:hover {
text-decoration: none;
border-bottom: dashed 1px #0088cc;
}
.editable-click.editable-disabled,
a.editable-click.editable-disabled,
a.editable-click.editable-disabled:hover {
color: #585858;
cursor: default;
border-bottom: none;
}
.editable-empty, .editable-empty:hover{
font-style: italic;
color: #DD1144;
border-bottom: none;
text-decoration: none;
}
.editable-unsaved {
font-weight: bold;
}
.editable-unsaved:after {
/* content: '*'*/
}
/*see https://github.com/vitalets/x-editable/issues/139 */
.form-horizontal .editable
{
padding-top: 5px;
display:inline-block;