Permalink
Browse files

Add pie-loader for following task progress.

  • Loading branch information...
1 parent 44c2d7e commit 56e4b604110931bb9ad99956bbca0eaf4551e12b @cdujeu cdujeu committed May 22, 2016
@@ -5,7 +5,11 @@
constructor(data){
this._internal = data;
}
-
+
+ getId(){
+ return this._internal['id'];
+ }
+
isStoppable(){
return this._internal['flags'] & Task.FLAG_STOPPABLE;
}
@@ -18,6 +22,10 @@
return this._internal['flags'] & Task.FLAG_HAS_PROGRESS;
}
+ getProgress(){
+ return this._internal['progress'];
+ }
+
getLabel(){
return this._internal['label'];
}
@@ -136,18 +144,86 @@
getTasks(forceRefresh = false){
if(this._tasksList == undefined || forceRefresh){
- var taskMap = new Map();
+ this._tasksList = new Map();
TaskAPI.loadTasks(function(tasks){
- tasks.map(function(t){taskMap.set(t.id, t)});
- });
- this._tasksList = taskMap;
- this.notify("tasks_updated");
+ let taskMap = new Map();
+ tasks.map(function(t){taskMap.set(t.getId(), t)});
+ this._tasksList = taskMap;
+ this.notify("tasks_updated");
+ }.bind(this));
}
return this._tasksList;
}
}
+ var TaskAction = React.createClass({
+
+ getInitialState: function(){
+ return {showProgress: true};
+ },
+
+ showAction: function(){
+ this.setState({showProgress: false});
+ },
+
+ showProgress: function(){
+ this.setState({showProgress: true});
+ },
+
+ render: function(){
+ let t = this.props.task;
+
+ let actions;
+ if(t.getStatus() == Task.STATUS_RUNNING){
+ if(t.isStoppable()){
+ actions = (<span className="icon-stop" onClick={t.pause.bind(t)}/>);
+ }
+ }else{
+ actions = (<span className="mdi mdi-close-circle-outline" onClick={t.stop.bind(t)}/>);
+ }
+ if(this.state.showProgress && t.hasProgress()){
+ actions = (
+ <div className="radial-progress">
+ <div className={"pie-wrapper pie-wrapper--solid progress-" + t.getProgress()}></div>
+ </div>
+ );
+ }
+ return <div className="task_actions" onMouseOver={this.showAction} onMouseOut={this.showProgress}>{actions}</div>;
+ }
+
+ });
+
+ var TaskEntry = React.createClass({
+ render: function(){
+ let t = this.props.task;
+ let actions;
+ if(t.getStatus() == Task.STATUS_RUNNING){
+ if(t.isStoppable()){
+ actions = (<span className="icon-stop" onClick={t.pause.bind(t)}/>);
+ }
+ }else{
+ actions = (<span className="mdi mdi-close-circle-outline" onClick={t.stop.bind(t)}/>);
+ }
+ if(t.hasProgress()){
+ actions = (
+ <div className="radial-progress">
+ <div className={"pie-wrapper pie-wrapper--solid progress-" + t.getProgress()}></div>
+ </div>
+ );
+ }
+ return (
+ <div className="task">
+ <div className="task_texts">
+ <div className="task_label">{t.getLabel()}</div>
+ <div className="status_message" title={t.getStatusMessage()}>{t.getStatusMessage()}</div>
+ </div>
+ <TaskAction task={t}/>
+ </div>
+ );
+ }
+ });
+
var TasksPanel = React.createClass({
refreshTasks: function(){
@@ -177,23 +253,7 @@
let tasks = [];
this.state.tasks.forEach(function(t){
if(t.getStatus() == Task.STATUS_COMPLETE) return;
- let actions;
- if(t.getStatus() == Task.STATUS_RUNNING){
- if(t.isStoppable()){
- actions = (<span className="icon-stop" onClick={t.pause.bind(t)}/>);
- }
- }else{
- actions = (<span className="mdi mdi-close-circle-outline" onClick={t.stop.bind(t)}/>);
- }
- tasks.push(
- <div className="task">
- <div className="task_texts">
- <div className="task_label">{t.getLabel()}</div>
- <div className="status_message" title={t.getStatusMessage()}>{t.getStatusMessage()}</div>
- </div>
- <div className="task_actions">{actions}</div>
- </div>
- );
+ tasks.push(<TaskEntry task={t}/>);
});
let className = "pydio-tasks-panel";
let heightStyle;
@@ -114,3 +114,201 @@
}
}
+
+.radial-progress{
+
+ display: inline-block;
+
+ .size(@w, @h) {
+ height: @h;
+ width: @w;
+ }
+
+ *,
+ *:before,
+ *:after {
+ box-sizing: border-box;
+ }
+
+ .charts-container:after {
+ clear: both;
+ content: "";
+ display: table;
+ }
+
+ @bg: #ffffff;
+ @pie-main: @teal-500;
+ @size: 16px;
+
+ .pie-wrapper {
+ .size(@size, @size);
+ float: left;
+ margin: 13px 8px 0 0;
+ position: relative;
+
+ &:nth-child(3n+1) {
+ clear: both;
+ }
+
+ .pie {
+ .size(100%, 100%);
+ clip: rect(0, @size, @size, @size / 2);
+ left: 0;
+ position: absolute;
+ top: 0;
+
+ .half-circle {
+ .size(100%, 100%);
+ border: @size / 10 solid #3498db;
+ border-radius: 50%;
+ clip: rect(0, @size / 2, @size, 0);
+ left: 0;
+ position: absolute;
+ top: 0;
+ }
+ }
+
+ .label {
+ @font-size: @size / 4;
+ @font-size-redo: @size * 4;
+
+ background: @bg;
+ border-radius: 50%;
+ bottom: @font-size-redo / 10;
+ color: #ecf0f1;
+ cursor: default;
+ display: block;
+ font-size: @font-size;
+ left: @font-size-redo / 10;
+ line-height: @font-size-redo * .65;
+ position: absolute;
+ right: @font-size-redo / 10;
+ text-align: center;
+ top: @font-size-redo / 10;
+
+ .smaller {
+ color: #bdc3c7;
+ font-size: .45em;
+ padding-bottom: 20px;
+ vertical-align: super;
+ }
+ }
+
+ .shadow {
+ .size(100%, 100%);
+ border: @size / 10 solid #bdc3c7;
+ border-radius: 50%;
+ }
+
+ &.style-2 {
+ .label {
+ background: none;
+ color: #7f8c8d;
+
+ .smaller {
+ color: #bdc3c7;
+ }
+ }
+ }
+
+ &.progress-30 {
+ .draw-progress(30, #3498db);
+ }
+
+ &.progress-60 {
+ .draw-progress(60, #9b59b6);
+ }
+
+ &.progress-90 {
+ .draw-progress(90, #e67e22);
+ }
+
+ &.progress-45 {
+ .draw-progress(45, #1abc9c);
+ }
+
+ &.progress-75 {
+ .draw-progress(75, #8e44ad);
+ }
+
+ &.progress-95 {
+ .draw-progress(95, #e74c3c);
+ }
+ }
+
+ .pie-wrapper--solid {
+ border-radius: 50%;
+ overflow: hidden;
+
+ &:before {
+ border-radius: 0 100% 100% 0 / 50%;
+ content: '';
+ display: block;
+ height: 100%;
+ margin-left: 50%;
+ transform-origin: left;
+ }
+
+ .label {
+ background: transparent;
+ }
+
+ // GENERATE ALL VALUES FROM 1 to 100
+ .loop(@name, @progressValue) when (@progressValue <= 100){
+ .loop(@name; (@progressValue + 1));
+ &.@{name}-@{progressValue} { .draw-progress--solid(@progressValue, @pie-main, @bg); }
+ }
+ .loop(progress, 0);
+ }
+
+ // --
+ .draw-progress(@progress, @color) when (@progress <= 50) {
+ .pie {
+ .right-side {
+ display: none;
+ }
+ }
+ }
+
+ .draw-progress(@progress, @color) when (@progress > 50) {
+ .pie {
+ clip: rect(auto, auto, auto, auto);
+
+ .right-side {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .draw-progress(@progress, @color) {
+ .pie {
+ .half-circle {
+ border-color: @color;
+ }
+
+ .left-side {
+ @rotate: @progress * 3.6;
+ transform: rotate(~'@{rotate}deg');
+ }
+ }
+ }
+
+ .draw-progress--solid(@progress, @color, @bg) when (@progress <= 50) {
+ &:before {
+ background: @bg;
+ transform: rotate((100 - (50 - @progress)) / 100 * 360deg * -1);
+ }
+ }
+
+ .draw-progress--solid(@progress, @color, @bg) when (@progress > 50) {
+ &:before {
+ background: @color;
+ transform: rotate((100 - @progress) / 100 * 360deg);
+ }
+ }
+
+ .draw-progress--solid(@progress, @color, @bg) {
+ background: linear-gradient(to right, @color 50%, @bg 50%);
+ }
+}
+
@@ -9,6 +9,7 @@ div.pydio-tasks-panel{
bottom: @pydio-task-panel-margin;
right: @pydio-task-panel-margin;
overflow-y: auto;
+ overflow-x: hidden;
background-color: white;
box-shadow: @reactBoxShadowDepth1;
z-index: 20001;
@@ -23,7 +24,7 @@ div.pydio-tasks-panel{
flex-direction: row;
.task_texts{
flex: 5;
- max-width: @pydio-task-panel-width - 42px;
+ max-width: @pydio-task-panel-width - 60px;
div{
text-overflow: ellipsis;
overflow: hidden;
Oops, something went wrong.

0 comments on commit 56e4b60

Please sign in to comment.