Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Bug 428148 - New, always visible, progress icon 
--Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
  • Loading branch information
@elijahe
elijahe committed Feb 13, 2014
1 parent b72bc90 commit 9ff5914
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 28 deletions.
2 changes: 1 addition & 1 deletion bundles/org.eclipse.orion.client.ui/web/css/images.css
View file
Expand Up @@ -17,7 +17,7 @@
vertical-align: middle;
}

.core-sprite-progress, .progressPane_running {
.core-sprite-progress {
height:14px;
width:14px;
-webkit-animation: progressAnimation .7s infinite linear;
Expand Down
201 changes: 180 additions & 21 deletions bundles/org.eclipse.orion.client.ui/web/css/progress.css
View file
Expand Up @@ -44,17 +44,189 @@
height: 16px;
}

.progressPane_operations {
/* background-image: url(../images/core_sprites.png);
background-position: -96px -328px; */
width: 16px; height: 16px;
visibility: hidden; /* accessibility. don't tab here when invisible */
.progressWatch {
cursor: pointer;
top: 10px;
right: 50px;
text-align: center;
position: absolute;
display: block;
width: 16px;
height: 16px;
background: transparent;
border: none;
padding: none;
margin: none;
}

.watchButton {
border-top: 1px solid #ddd;
position: absolute;
top: 0;
width: 3px;
left: calc(50% - 2px);
height: 0px;
border-radius: 40%;
transition: top 0.5s ease, border-color 1s ease;
}

.watchBody {
position: absolute;
left: 1px;
top: 2px;
width: calc(100% - 5px); /* subtract borders and button height */
height: calc(100% - 5px); /* subtract borders, button height and space between button and body */
background: transparent;
border: 1px solid #ddd;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

transition: border-color 1s ease;
}

.watchBody span.hand {
position: absolute;
border-radius: 40%;
}

.watchBody .hand.longMinute {
top: 1px;
left: 5px;
position: absolute;
height: 9px;
width: 1px;
}

.watchBody .hand.longMinute > .darkSide {
position: absolute;
left: 0;
width: 1px;
display: block;
border-radius: 40%;
height: 5px;
background: #ddd;
transition: background-color 1s ease;
}

.watchBody .hand.longHour {
top: 5px;
left: 2px;
position: absolute;
width: calc(100% - 4px);
height: 1px;
}

.watchBody .hand.longHour > .darkSide {
position: absolute;
height: 1px;
display: inline-block;
border-radius: 40%;
right: 0;
width: 4px;
background: #ddd;

transition: background-color 1s ease;
}

/* watch running */
.progressWatch.running .watchBody .hand {
-webkit-animation: rotate 60s infinite linear;
-moz-animation: rotate 60s infinite linear;
-ms-animation: rotate 60s infinite linear;
-o-animation: rotate 60s infinite linear;
animation: rotate 60s infinite linear;
}

.progressWatch.running .watchBody .hand.longHour {
-webkit-animation-duration: 2.4s;
-moz-animation-duration: 2.4s;
-ms-animation-duration: 2.4s;
-o-animation-duration: 2.4s;
animation-duration: 2.4s;
}

.progressWatch.running .watchBody .hand.longMinute {
-webkit-animation-duration: 0.2s;
-moz-animation-duration: 0.2s;
-ms-animation-duration: 0.2s;
-o-animation-duration: 0.2s;
animation-duration: 0.2s;
}

.progressWatch.running .watchButton {
border-color: #F58B0F;
top: 1px;
}

.progressWatch.running .watchBody {
border-color: #F58B0F;
}

.progressWatch.running .watchBody .hand.longHour > .darkSide {
background-color: red;
}

.progressWatch.running .watchBody .hand.longMinute > .darkSide {
background-color: red;
}

/* warning */

.progressWatch.warning .watchButton {
border-color: #d99608;
}

.progressWatch.warning .watchBody {
border-color: #d99608;
background-color: #fce1a9;
}

.progressWatch.warning .watchBody .hand.longHour > .darkSide {
background-color: #d99608;
}

.progressWatch.warning .watchBody .hand.longMinute > .darkSide {
background-color: #d99608;
}

/* error */

.progressWatch.error .watchButton {
border-color: #b94a48;
}

.progressWatch.error .watchBody {
border-color: #b94a48;
background-color: #EFA1A7;
}

.progressPane_running {
/* defined in images.css */
.progressWatch.error .watchBody .hand.longHour > .darkSide {
background-color: #b94a48;
}

.progressWatch.error .watchBody .hand.longMinute > .darkSide {
background-color: #b94a48;
}


@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}

@keyframes rotate {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}



.progressWarning .progressPane_running, .progressWarning .core-sprite-progress {
border-color: #c09853;
}
Expand Down Expand Up @@ -83,21 +255,8 @@
width: 16px; height: 16px;
}

.progressPane_error {
background-image: url(../images/core_sprites.png);
background-position: 0 -561px;
width: 16px; height: 16px;
}

.progressPane_warning {
background-image: url(../images/core_sprites.png);
background-position: -96px -1440px;
width: 16px; height: 16px;
}

.progressPane_empty {
background: inherit;
visibility: hidden; /* accessibility. don't tab here when empty */

}

.notificationShow {
Expand Down
13 changes: 12 additions & 1 deletion bundles/org.eclipse.orion.client.ui/web/orion/banner/banner.html
View file
Expand Up @@ -15,8 +15,19 @@
<input type="text" id="search" autocomplete="off" class="layoutLeft spacingLeft searchbox" role="search" style="display:none;">
<div id="searchOptions" class="layoutLeft" style="padding-top:1px;display:none;"></div>
<div id="userMenu" class="spacingRight layoutRight" style="color:#ccc;line-height:16px;">
<div id="progressPane" class="progressWatch" tabindex="0" role="progressbar">
<div id="watchButton" class="watchButton"></div>
<div id="watchBody" class="watchBody">
<span class="hand longMinute">
<span class="darkSide"></span>
</span>
<span class="hand longHour">
<span class="darkSide"></span>
</span>
</div>
</div>

<div style="position: absolute;right: 0px;top:0;width: 39px;height:36px; z-index:-50;border-left: 1px solid #ddd;"></div>
<img class="progressPane" id="progressPane" tabindex="0" role="progressbar"></img>
<span id="userTrigger" tabindex="0" role="button" class="dropdownTrigger" style="z-index:2;">
<span class="dropdownArrowEmpty"></span>
</span>
Expand Down
13 changes: 8 additions & 5 deletions bundles/org.eclipse.orion.client.ui/web/orion/progress.js
View file
Expand Up @@ -13,7 +13,6 @@
define(['i18n!orion/nls/messages', 'require', 'orion/Deferred', 'orion/webui/littlelib', 'orion/webui/dialogs/OperationsDialog'],
function(messages, require, Deferred, lib, mOperationsDialog) {


function ProgressMonitorTool(progressPane, commandRegistry){
if(this._progressPane){
return;
Expand All @@ -26,6 +25,10 @@ function(messages, require, Deferred, lib, mOperationsDialog) {
that._operationsDialog.show();
}
});

this._progressPane.addEventListener("click", function(evt) { //$NON-NLS-0$
that._operationsDialog.show();
});
}

ProgressMonitorTool.prototype = {
Expand Down Expand Up @@ -75,19 +78,19 @@ function(messages, require, Deferred, lib, mOperationsDialog) {
this._progressPane.title = messages["Operations running"];
this._progressPane.alt = messages['Operations running'];
this._progressPane.setAttribute("aria-valuetext", messages['Operations running']); //$NON-NLS-0$
this._switchIconTo("progressPane_running"); //$NON-NLS-0$
this._switchIconTo("running"); //$NON-NLS-0$
break;
case "warning": //$NON-NLS-0$
this._progressPane.title = messages["Some operations finished with warning"];
this._progressPane.alt = messages['Some operations finished with warning'];
this._progressPane.setAttribute("aria-valuetext", messages['Some operations finished with warning']); //$NON-NLS-0$
this._switchIconTo("progressPane_warning"); //$NON-NLS-0$
this._switchIconTo("warning"); //$NON-NLS-0$
break;
case "error": //$NON-NLS-0$
this._progressPane.title = messages["Some operations finished with error"];
this._progressPane.alt = messages['Some operations finished with error'];
this._progressPane.setAttribute("aria-valuetext", messages['Some operations finished with error']); //$NON-NLS-0$
this._switchIconTo("progressPane_error"); //$NON-NLS-0$
this._switchIconTo("error"); //$NON-NLS-0$
break;
default:
this._progressPane.title = messages["Operations"];
Expand All @@ -107,7 +110,7 @@ function(messages, require, Deferred, lib, mOperationsDialog) {
}
};

ProgressMonitorTool.prototype.constructon = ProgressMonitorTool;
ProgressMonitorTool.prototype.constructor = ProgressMonitorTool;

/**
* Service for tracking operations changes
Expand Down

0 comments on commit 9ff5914

Please sign in to comment.