fly/fgdata
1
0
Fork 0
Code Activity

Phi: make widgets closable and detachable

Browse source 
Clicking the close-button removes the widget from the sidebar
Clicking the newwin-button detaches the widget into a dialog

TODO:
- add a way to re-attach or re-create a widget
- make sure widgets correctly scale with resizing of the dialog
- make widget area layout persistent
This commit is contained in:
Torsten Dreyer 2015-10-09 09:52:37 +02:00
parent d04bf9d849
commit 57b48abe58
2 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
Phi/widgets/sidebarwidget.html
View file

@ -2,15 +2,16 @@
.widget-header-button {
font-size: unset;
}
.widget-handle {
cursor: pointer;
font-weight: bold;
cursor: pointer;
font-weight: bold;
}
</style>
<div data-bind="event: { mouseover: onMouseover, mouseout: onMouseout }">
<div class="ui-state-default widget-handle">
<button
data-bind="
<button
data-bind="
button: {
icons: {
primary: pinned() ? 'ui-icon-pin-s' : 'ui-icon-pin-w'
@ -18,9 +19,19 @@
text: false
},
click: pin"
class="widget-header-button" title="Pin"></button>
<button
data-bind="
class="widget-header-button" title="Pin"></button>
<button
data-bind="
button: {
icons: {
primary: 'ui-icon-newwin'
},
text: false
},
click: detach"
class="widget-header-button" title="Detach"></button>
<button style="float: right"
data-bind="
button: {
icons: {
primary: 'ui-icon-circlesmall-close'
@ -28,7 +39,8 @@
text: false
},
click: close"
class="widget-header-button" title="Close"></button>
class="widget-header-button" title="Close"></button>
<span data-bind="text: widget"></span>
</div>

18
Phi/widgets/sidebarwidget.js
View file

@ -1,10 +1,12 @@
define([
'jquery', 'knockout', 'text!./sidebarwidget.html', 'jquery-ui/draggable',
'jquery', 'knockout', 'text!./sidebarwidget.html', 'jquery-ui/draggable', 'jquery-ui/dialog'
], function(jquery, ko, htmlString) {
function ViewModel(params) {
function ViewModel(params, componentInfo) {
var self = this;
self.element = componentInfo.element;
self.widget = ko.observable(params.widget);
self.pinned = ko.observable(true);
@ -13,6 +15,12 @@ define([
}
self.close = function() {
jquery(self.element).remove();
}
self.detach = function() {
jquery(self.element).find('.phi-widget').dialog();
jquery(self.element).remove();
}
self.expanded = ko.observable(true);
@ -29,7 +37,11 @@ define([
// Return component definition
return {
viewModel : ViewModel,
viewModel : {
createViewModel : function(params, componentInfo) {
return new ViewModel(params, componentInfo);
},
},
template : htmlString
};
});