1
0
Fork 0
fgdata/Phi/widgets/sidebarwidget.html
Torsten Dreyer 57b48abe58 Phi: make widgets closable and detachable
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
2015-10-09 09:56:06 +02:00

49 lines
1.3 KiB
HTML

<style>
.widget-header-button {
font-size: unset;
}
.widget-handle {
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: {
icons: {
primary: pinned() ? 'ui-icon-pin-s' : 'ui-icon-pin-w'
},
text: false
},
click: pin"
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'
},
text: false
},
click: close"
class="widget-header-button" title="Close"></button>
<span data-bind="text: widget"></span>
</div>
<div class="phi-widget" data-bind="component: { name: widget }, visible: expanded"></div>
</div>