added button styling functionality, removed "output" in the menu

This commit is contained in:
electr0sheep
2018-02-21 23:12:43 -07:00
parent b684644bbe
commit 09ff8e9953
4 changed files with 69 additions and 18 deletions

View File

@ -3,14 +3,14 @@
<div style="min-height:15px; margin: 16px 16px; border:1px solid #00e500" id="base" data-bind="contextMenu: { menuSelector: '#controlContextMenu', menuSelected: $root.controlContextMenu }">
</div>
<!-- "width: 588px" to be the same as teh real Control tab-->
<!-- "width: 588px" to be the same as teh real Control tab-->
<div class="innerSortable" style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
<li>
<a href="#" cmd="createContainer">{{ _('Create Container') }}</a>
</li>
</ul>
</ul>
<ul id="commandContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
<li><a href="#" cmd="editElement">{{ _('Edit') }}</a></li>
<li><a href="#" cmd="deleteElement">{{ _('Delete') }}</a></li>
@ -19,13 +19,23 @@
<a href="#">Style</a>
<ul class="dropdown-menu">
<li>
<a href="#" cmd="editStyle">Normal</a>
<a href="#" cmd="editStyleNormal">Normal</a>
</li>
<li class="btn-primary">
<a href="#" cmd="editStyle">Primary</a>
<a href="#" cmd="editStylePrimary">Primary</a>
</li>
<li class="btn-danger">
<a href="#" cmd="editStyle">Danger</a>
<a href="#" cmd="editStyleDanger">Danger</a>
</li>
<li class="btn-warning">
<a href="#" cmd="editStyleWarning">Warning</a>
</li>
<li class="btn-success">
<a href="#" cmd="editStyleSuccess">Success</a>
</li>
<li class="btn-info">
<a href="#" cmd="editStyleInfo">Info</a>
<li>
</li>
</ul>
</li>
@ -34,10 +44,10 @@
<li class="dropdown-submenu">
<a href="#">Create Command</a>
<ul class="dropdown-menu">
<li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
<li><a href="#" cmd="createContainer">{{ _('Container') }}</a></li>
<li><a href="#" cmd="createCommand">{{ _('Command') }}</a></li>
<li><a href="#" cmd="createScript">{{ _('Script Command') }}</a></li>
<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>
<!--<li><a href="#" cmd="createOutput">{{ _('Output') }}</a></li>-->
</ul>
</li>
<li class="divider"></li>
@ -76,8 +86,10 @@
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, css: { 'sortable': $parent.layout() != 'horizontal_grid' }, attr: { 'id': id }">
<div data-bind="text: console.log($data)"></div>
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: !$data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command_styled', data: $data, if: $data.hasOwnProperty('style') && ($data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript')) } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('value') } --><!-- /ko -->
</form>
</script>
@ -98,4 +110,7 @@
<script type="text/html" id="settingsCustomControls_controlTemplate_command">
<button class="btn" data-bind="text: name" onclick="event.preventDefault()"></button>
</script>
<!-- End of templates for custom controls -->
<script type="text/html" id="settingsCustomControls_controlTemplate_command_styled">
<button data-bind="text: name, attr: { 'class': style }" onclick="event.preventDefault()"></button>
</script>
<!-- End of templates for custom controls -->