提交 3c61efd2 编写于 作者: C Catouse

* added refresh button to the dashboard.

上级 072d97b6
因为 它太大了无法显示 source diff 。你可以改为 查看blob
此差异已折叠。
......@@ -88,15 +88,15 @@
</nav>
<article>
<h1>Dashboard</h1>
<div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px; background: #3280fc'>
<div class="segment" style='max-width: 1600px; width: inherit; padding: 80px 50px;'>
<div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
<header></header>
<section class='row'>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel" data-url='http://baidu.com'>
<div class="panel-heading">
<div class="panel-actions">
<button class="btn btn-mini"><i class="icon-refresh"></i></button>
<button class="btn btn-mini refresh-panel"><i class="icon-refresh"></i></button>
<div class="dropdown">
<button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
......@@ -123,7 +123,7 @@
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel" data-url='http://chanzhi.org'>
<div class="panel-heading">
<div class="panel-actions">
<a href="#"><i class="icon-refresh"></i></a>
......@@ -131,6 +131,7 @@
<a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
<li><a href="#" class='refresh-panel'><i class="icon-refresh"></i> 刷新</a></li>
<li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
</ul>
</div>
......
......@@ -41,6 +41,15 @@
});
};
Dashboard.prototype.handleRefreshEvent = function()
{
this.$.find('.refresh-panel').click(function()
{
var panel = $(this).closest('.panel');
refreshPanel(panel);
});
}
Dashboard.prototype.handleDraggable = function()
{
var dashboard = this.$;
......@@ -59,6 +68,7 @@
var panel = $(this).closest('.panel');
var row = panel.closest('.row');
var dPanel = panel.clone().addClass('panel-dragging-shadow');
var dCol = panel.parent().clone().addClass('panel-shadow-col');
var pos = panel.offset();
var dPos = dashboard.offset();
......@@ -175,11 +185,37 @@
});
};
function refreshPanel(panel)
{
var url = panel.data('url');
if(!url) return;
panel.addClass('panel-loading').find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').addClass('icon-spin');
$.ajax(
{
url: url,
dataType: 'html',
})
.done(function(data)
{
panel.find('.panel-body').html(data);
})
.fail(function()
{
panel.addClass('panel-error');
})
.always(function()
{
panel.removeClass('panel-loading');
panel.find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').removeClass('icon-spin');
});
}
Dashboard.prototype.init = function()
{
this.handlePanelHeight();
this.handlePanelPadding();
this.handleRemoveEvent();
this.handleRefreshEvent();
if(this.draggable) this.handleDraggable();
......@@ -196,6 +232,8 @@
{
$this.attr('data-id', orderSeed);
}
refreshPanel($this);
});
}
......
......@@ -1770,6 +1770,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
};
})(jQuery);
/* Dashboard */
+function($, window, document, Math)
{
......@@ -1813,6 +1814,15 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
});
};
Dashboard.prototype.handleRefreshEvent = function()
{
this.$.find('.refresh-panel').click(function()
{
var panel = $(this).closest('.panel');
refreshPanel(panel);
});
}
Dashboard.prototype.handleDraggable = function()
{
var dashboard = this.$;
......@@ -1831,6 +1841,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
var panel = $(this).closest('.panel');
var row = panel.closest('.row');
var dPanel = panel.clone().addClass('panel-dragging-shadow');
var dCol = panel.parent().clone().addClass('panel-shadow-col');
var pos = panel.offset();
var dPos = dashboard.offset();
......@@ -1947,11 +1958,37 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
});
};
function refreshPanel(panel)
{
var url = panel.data('url');
if(!url) return;
panel.addClass('panel-loading').find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').addClass('icon-spin');
$.ajax(
{
url: url,
dataType: 'html',
})
.done(function(data)
{
panel.find('.panel-body').html(data);
})
.fail(function()
{
panel.addClass('panel-error');
})
.always(function()
{
panel.removeClass('panel-loading');
panel.find('.panel-heading .icon-refresh,.panel-heading .icon-repeat').removeClass('icon-spin');
});
}
Dashboard.prototype.init = function()
{
this.handlePanelHeight();
this.handlePanelPadding();
this.handleRemoveEvent();
this.handleRefreshEvent();
if(this.draggable) this.handleDraggable();
......@@ -1968,6 +2005,8 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
{
$this.attr('data-id', orderSeed);
}
refreshPanel($this);
});
}
......
......@@ -88,7 +88,7 @@
.panel
{
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.panel-body
......@@ -136,12 +136,12 @@
{
position: absolute;
border: 2px solid rgba(255,255,255,0.9);
box-shadow: 2px 0 25px rgba(0,0,0,0.8)!important;
box-shadow: 1px 2px 15px rgba(0,0,0,0.5)!important;
background: rgba(255,255,255,0.5);
> * {.opacity(0.7);}
}
.dragging-in:before {box-sizing: content-box; content:' '; display: block; position: absolute; left: -2px; top: -10px; width: 2px; height: 100%; background-color: rgba(255,255,255, 0.5); border: 1px solid #fff;}
.dragging-in:before {box-sizing: content-box; content:' '; display: block; position: absolute; left: -2px; top: -10px; width: 2px; height: 100%; background-color: rgba(0,0,0, 0.15); border: 1px solid #eee;}
.dragging-in.dragging-col:before {display: none;}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册