Commit f13d62a1 authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review

Merge "Style profile progress bar (bug: 1465107)"

parents 1a41a2e8 5ea18fb3
......@@ -228,7 +228,7 @@ function FileBrowser(idprefix, folderid, config, globalconfig) {
}
quotaUpdate(data.quotaused, data.quota);
if (data.returnCode == '0') {
if (data.returnCode == '0' || data.uploaded) {
// pass the artefacttype to update progress bar
progressbarUpdate(data.artefacttype, data.deleted);
}
......
......@@ -847,7 +847,7 @@ function augment_tags_control(elem, returnContainer) {
};
function progressbarUpdate(artefacttype, remove) {
if (! $('progress_bar')) {
if (! $('progressbarwrap')) {
return;
}
// are we adding or deleting?
......@@ -880,7 +880,7 @@ function progressbarUpdate(artefacttype, remove) {
$('progress_completed_total').innerHTML = totalcompleted;
var percentage = roundToFixed((totalcompleted / totalcounting) * 100, 0);
$('progress_bar_percentage').innerHTML = percentage + '%';
setStyle($('progress_bar_fill'), {'width': (percentage*2) + 'px'});
setStyle($('progress_bar_fill'), {'width': percentage + '%'});
}
}
}
......
......@@ -223,3 +223,14 @@
.form-group .select2-container .select2-selection .select2-search input[type=search] {
width: 100% !important;
}
.progress-bar {
position: relative;
&.small-progress span {
color: $text-color;
display: block;
left: 100%;
padding-left: 5px;
position: absolute;
}
}
......@@ -87,7 +87,7 @@ h4.list-group-item-heading {
.list-group-item-link {
padding: 0;
a {
font-size: 0.9em;
font-size: $font-size-small;
display: block;
padding: 10px 15px;
color: #666;
......
......@@ -107,3 +107,7 @@ body {
.pagedescription {
padding-top: 30px;
}
.progress-container {
padding-top: 20px;
}
......@@ -12,8 +12,8 @@
{$GROUPQUOTA_MESSAGE|safe}
</p>
<div id="quotawrap" class="progress">
<div id="quota_fill" class="progress-bar" role="progressbar" aria-valuenow="{if $GROUPQUOTA_PERCENTAGE }{$GROUPQUOTA_PERCENTAGE}{else}0{/if}" aria-valuemin="0" aria-valuemax="100" style="width: {$GROUPQUOTA_PERCENTAGE*2}px;">
{$GROUPQUOTA_PERCENTAGE}%
<div id="quota_fill" class="progress-bar {if $GROUPQUOTA_PERCENTAGE < 11}small-progress{/if}" role="progressbar" aria-valuenow="{if $GROUPQUOTA_PERCENTAGE }{$GROUPQUOTA_PERCENTAGE}{else}0{/if}" aria-valuemin="0" aria-valuemax="100" style="width: {$GROUPQUOTA_PERCENTAGE}%;">
<span>{$GROUPQUOTA_PERCENTAGE}%</span>
</div>
</div>
</div>
......
......@@ -3,57 +3,60 @@
<h3 class="panel-heading">
{if $sbdata.preview}{str tag="profilecompletenesspreview"}{else}{str tag="profilecompleteness"}{/if}
</h3>
{if $sbdata.count > 1}
<!-- @todo move this to somewhere better - it shouldn't be rendered in the middle of a page -->
<script language="javascript">
function reloadSideBar() {
window.location.href = window.location.href.split('?')[0]+'?i='+$('progresssidebarselect_institution').value;
}
addLoadEvent(function() {
connect($('progresssidebarselect_institution'), 'onchange', reloadSideBar);
});
</script>
<form class="pieform panel-body" name="progresssidebarselect" method="post" action="" id="progresssidebarselect">
<table cellspacing="0"><tbody>
<tr id="progresssidebarselect_institution_container" class="select">
<th><label for="progresssidebarselect_institution">{str tag=profilecompletionforwhichinstitution}</label></th>
<td><select class="select autofocus" id="progresssidebarselect_institution" name="institution" tabindex="1" style="">
<div class="panel-body">
{if $sbdata.count > 1}
<form class="pieform" name="progresssidebarselect" method="post" action="" id="progresssidebarselect">
<div id="progresssidebarselect_institution_container" class="select dropdown with-label-widthauto">
<label class="sr-only" for="progresssidebarselect_institution">{str tag=profilecompletionforwhichinstitution}</label>
<select class="form-control select" id="progresssidebarselect_institution" name="institution" tabindex="1" style="">
{foreach from=$sbdata.institutions key=inst item=displayname}
<option value="{$inst}"{if $inst == $sbdata.institution} selected="selected"{/if}>{$displayname|str_shorten_html:25:true}</option>
{/foreach}
</select></td>
</tr>
</tbody></table>
</form>
{/if}
<div class="panel-body">
<div id="progressbarwrap">
{if $sbdata.percent < 100}
<div id="progress_bar_fill" style="width: {$sbdata.percent*2}px;">&nbsp;</div>
<p id="progress_bar">
<span id="progress_bar_percentage">{$sbdata.percent}%</span>
</p>
<div id="profile_completeness_tips">
<span class="hidden" id="progress_counting_total">{$sbdata.totalcounting}</span>
<span class="hidden" id="progress_completed_total">{$sbdata.totalcompleted}</span>
<strong>{str tag=profilecompletenesstips}</strong>
<ul>
{foreach from=$sbdata.data item=item}
<li{if $item.display <= 0} class="hidden"{/if}>
<span id="progress_counting_{$item.artefact}" class="hidden">{$item.counting}</span>
<span id="progress_completed_{$item.artefact}" class="hidden">{$item.completed}</span>
{if $item.link}<a href="{$WWWROOT}{$item.link}">{/if}<span id="progress_item_{$item.artefact}">{$item.label}</span>{if $item.link}</a>{/if}
</li>
{/foreach}
</ul>
</select>
</div>
{else}
<div id="progress_bar_fill" style="display: none; width: {$sbdata.percent*2}px;">&nbsp;</div>
<p id="progress_bar_100">
<span id="progress_bar_percentage">{$sbdata.percent}%</span>
</p>
</form>
{/if}
<div id="progressbarwrap" class="progress-container">
{if $sbdata.percent < 100}
<div class="progress">
<div id="progress_bar_fill" class="progress-bar {if $sbdata.percent < 11}small-progress{/if}" role="progressbar" aria-valuemax="100" aria-valuemin="0" style="width: {$sbdata.percent}%;">
<span id="progress_bar_percentage">{$sbdata.percent}%</span>
</div>
</div>
<div id="profile_completeness_tips" class="list-group">
<span class="hidden" id="progress_counting_total">{$sbdata.totalcounting}</span>
<span class="hidden" id="progress_completed_total">{$sbdata.totalcompleted}</span>
<div class="list-group-item-heading">{str tag=profilecompletenesstips}</div>
<ul class="list-nested list-group-item-text list-unstyled list-group-item-link">
{foreach from=$sbdata.data item=item}
<li{if $item.display <= 0} class="hidden"{/if}>
<span id="progress_counting_{$item.artefact}" class="hidden">{$item.counting}</span>
<span id="progress_completed_{$item.artefact}" class="hidden">{$item.completed}</span>
{if $item.link}<a href="{$WWWROOT}{$item.link}">{/if}<span id="progress_item_{$item.artefact}">{$item.label}</span>{if $item.link}</a>{/if}
</li>
{/foreach}
</ul>
</div>
{else}
<div id="progress_bar_100" class="progress">
<div id="progress_bar_fill" class="progress-bar" role="progressbar" aria-valuemax="100" aria-valuemin="0" style="width: {$sbdata.percent}%;">
{$sbdata.percent}%
</div>
</div>
{/if}
</div>
</div>
</div>
{if $sbdata.count > 1}
<!-- @todo move this to somewhere better - it shouldn't be rendered in the middle of a page -->
<script language="javascript">
function reloadSideBar() {
window.location.href = window.location.href.split('?')[0]+'?i='+$('progresssidebarselect_institution').value;
}
addLoadEvent(function() {
connect($('progresssidebarselect_institution'), 'onchange', reloadSideBar);
});
</script>
{/if}
{/if}
......@@ -11,8 +11,8 @@
{$QUOTA_MESSAGE|safe}
</p>
<div id="quotawrap" class="progress">
<div id="quota_fill" class="progress-bar" role="progressbar" aria-valuenow="{if $QUOTA_PERCENTAGE }{$QUOTA_PERCENTAGE}{else}0{/if}" aria-valuemin="0" aria-valuemax="100" style="width: {$QUOTA_PERCENTAGE}%;">
{$QUOTA_PERCENTAGE}%
<div id="quota_fill" class="progress-bar {if $QUOTA_PERCENTAGE < 11}small-progress{/if}" role="progressbar" aria-valuenow="{if $QUOTA_PERCENTAGE }{$QUOTA_PERCENTAGE}{else}0{/if}" aria-valuemin="0" aria-valuemax="100" style="width: {$QUOTA_PERCENTAGE}%;">
<span>{$QUOTA_PERCENTAGE}%</span>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment