Revision 121f8ff1
Von Sven Schöling vor fast 8 Jahren hinzugefügt
| SL/Layout/ActionBar/ComboBox.pm | ||
|---|---|---|
| 21 | 21 |
sub render {
|
| 22 | 22 |
my ($first, @rest) = @{ $_[0]->parsed_actions };
|
| 23 | 23 |
$_[0]->p->html_tag('div',
|
| 24 |
$_[0]->p->html_tag('div', $first->render, class => 'layout-actionbar-combobox-head') .
|
|
| 24 |
$_[0]->p->html_tag('div', $first->render . $_[0]->p->html_tag('span'), class => 'layout-actionbar-combobox-head') .
|
|
| 25 | 25 |
$_[0]->p->html_tag('div', join('', map { $_->render } @rest), class => 'layout-actionbar-combobox-list'),
|
| 26 | 26 |
id => $_[0]->id, |
| 27 | 27 |
class => 'layout-actionbar-combobox', |
| css/lx-office-erp/main.css | ||
|---|---|---|
| 564 | 564 |
|
| 565 | 565 |
div.layout-actionbar-separator {
|
| 566 | 566 |
display: inline-block; |
| 567 |
width: 10px;
|
|
| 567 |
width: 20px;
|
|
| 568 | 568 |
} |
| 569 | 569 |
|
| 570 | 570 |
div.layout-actionbar div.layout-actionbar-submit, |
| ... | ... | |
| 609 | 609 |
display: inline-block; |
| 610 | 610 |
} |
| 611 | 611 |
|
| 612 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head:after {
|
|
| 612 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head div {
|
|
| 613 |
width: 100px |
|
| 614 |
} |
|
| 615 |
|
|
| 616 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head span {
|
|
| 617 |
display: inline-block; |
|
| 618 |
border-width: 1px 1px 1px 1px; |
|
| 619 |
border-style: solid; |
|
| 620 |
border-color: darkgray; |
|
| 621 |
padding: 4px; |
|
| 622 |
width: 14px; |
|
| 623 |
height: 15px; |
|
| 624 |
position: absolute; |
|
| 625 |
top: 0; |
|
| 626 |
right: 0; |
|
| 627 |
-webkit-border-top-right-radius: 2px; |
|
| 628 |
-webkit-border-bottom-right-radius: 2px; |
|
| 629 |
-moz-border-radius-topright: 2px; |
|
| 630 |
-moz-border-radius-bottomright: 2px; |
|
| 631 |
border-top-right-radius: 2px; |
|
| 632 |
border-bottom-right-radius: 2px; |
|
| 633 |
background-color: whitesmoke; |
|
| 634 |
} |
|
| 635 |
|
|
| 636 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head span:hover {
|
|
| 637 |
background-color: lightgray; |
|
| 638 |
} |
|
| 639 |
|
|
| 640 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head span:after {
|
|
| 613 | 641 |
content: ""; |
| 614 | 642 |
width: 0; |
| 615 | 643 |
height: 0; |
| 616 | 644 |
position: absolute; |
| 617 |
right: 10px;
|
|
| 645 |
right: 8px;
|
|
| 618 | 646 |
top: 50%; |
| 619 | 647 |
margin-top: -3px; |
| 620 | 648 |
border-width: 3px 3px 0 3px; |
| ... | ... | |
| 622 | 650 |
border-color: black transparent; |
| 623 | 651 |
} |
| 624 | 652 |
|
| 625 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head.active:after {
|
|
| 626 |
border-width: 3px 3px 0 3px;
|
|
| 653 |
div.layout-actionbar-combobox.active div.layout-actionbar-combobox-head span:after {
|
|
| 654 |
border-width: 0 3px 3px 3px;
|
|
| 627 | 655 |
} |
| 628 | 656 |
|
| 629 | 657 |
|
| 630 | 658 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head {
|
| 659 |
padding-right: 20px; |
|
| 631 | 660 |
white-space: nowrap; |
| 632 | 661 |
display: block; |
| 633 | 662 |
} |
| 634 | 663 |
|
| 635 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head div.layout-actionbar-action::after {
|
|
| 636 |
} |
|
| 637 |
|
|
| 638 | 664 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-list {
|
| 639 | 665 |
position: absolute; |
| 640 | 666 |
display: none; |
| 641 | 667 |
min-width: 120px; |
| 642 | 668 |
} |
| 643 | 669 |
|
| 644 |
div.layout-actionbar-combobox:hover div.layout-actionbar-combobox-list {
|
|
| 670 |
div.layout-actionbar-combobox.active div.layout-actionbar-combobox-list {
|
|
| 645 | 671 |
display: inline-block; |
| 646 | 672 |
z-index: 10; |
| 647 | 673 |
} |
| js/kivi.ActionBar.js | ||
|---|---|---|
| 2 | 2 |
'use strict'; |
| 3 | 3 |
|
| 4 | 4 |
var CLASSES = {
|
| 5 |
disabled: 'layout-actionbar-action-disabled' |
|
| 5 |
active: 'active', |
|
| 6 |
actionbar: 'layout-actionbar', |
|
| 7 |
disabled: 'layout-actionbar-action-disabled', |
|
| 8 |
action: 'layout-actionbar-action', |
|
| 9 |
combobox: 'layout-actionbar-combobox', |
|
| 6 | 10 |
} |
| 7 | 11 |
|
| 8 |
k.ActionBarAction = function(e) {
|
|
| 9 |
var data = $(e).data('action');
|
|
| 10 |
if (undefined === data) return; |
|
| 12 |
k.ActionBarCombobox = function(e) {
|
|
| 13 |
this.combobox = e; |
|
| 14 |
this.head = e.childNodes[0]; |
|
| 15 |
this.toggle = this.head.childNodes[1]; |
|
| 16 |
this.list = e.childNodes[0]; |
|
| 17 |
this.init(); |
|
| 18 |
} |
|
| 19 |
k.ActionBarCombobox.prototype = {
|
|
| 20 |
init: function() {
|
|
| 21 |
var obj = this; |
|
| 22 |
$(obj.toggle).on('click', function(event){
|
|
| 23 |
$(obj.combobox).toggleClass(CLASSES.active); |
|
| 24 |
event.stopPropagation(); |
|
| 25 |
}); |
|
| 26 |
} |
|
| 27 |
} |
|
| 28 |
|
|
| 29 |
k.ActionBarAction = function(e) {
|
|
| 30 |
var data = $(e).data('action');
|
|
| 31 |
if (undefined === data) return; |
|
| 11 | 32 |
|
| 12 |
if (data.disabled) {
|
|
| 13 |
$(e).addClass(CLASSES.disabled);
|
|
| 14 |
}
|
|
| 33 |
if (data.disabled) {
|
|
| 34 |
$(e).addClass(CLASSES.disabled); |
|
| 35 |
} |
|
| 15 | 36 |
|
| 16 |
if (data.call || data.submit) {
|
|
| 17 |
$(e).click(function(event) {
|
|
| 18 |
var $hidden, key, func, check; |
|
| 19 |
if ($(e).hasClass(CLASSES.disabled)) return; |
|
| 20 |
if (data.checks) {
|
|
| 21 |
for (var i=0; i < data.checks.length; i++) {
|
|
| 22 |
check = data.checks[i]; |
|
| 23 |
func = kivi.get_function_by_name(check); |
|
| 24 |
if (!func) console.log('Cannot find check function: ' + check);
|
|
| 25 |
if (!func()) return; |
|
| 26 |
} |
|
| 27 |
} |
|
| 28 |
if (data.confirm && !confirm(data.confirm)) return; |
|
| 29 |
if (data.call) {
|
|
| 30 |
func = kivi.get_function_by_name(data.call[0]); |
|
| 31 |
func.apply(document, data.call.slice(1)) |
|
| 32 |
} |
|
| 33 |
if (data.submit) {
|
|
| 34 |
var form = data.submit[0]; |
|
| 35 |
var params = data.submit[1]; |
|
| 36 |
for (key in params) {
|
|
| 37 |
$hidden = $('<input type=hidden>')
|
|
| 38 |
$hidden.attr('name', key)
|
|
| 39 |
$hidden.attr('value', params[key])
|
|
| 40 |
$(form).append($hidden) |
|
| 41 |
} |
|
| 42 |
$(form).submit(); |
|
| 43 |
} |
|
| 44 |
}); |
|
| 45 |
} |
|
| 46 |
} |
|
| 37 |
if (data.call || data.submit) {
|
|
| 38 |
$(e).click(function(event) {
|
|
| 39 |
var $hidden, key, func, check; |
|
| 40 |
if ($(e).hasClass(CLASSES.disabled)) {
|
|
| 41 |
event.stopPropagation(); |
|
| 42 |
return; |
|
| 43 |
} |
|
| 44 |
if (data.checks) {
|
|
| 45 |
for (var i=0; i < data.checks.length; i++) {
|
|
| 46 |
check = data.checks[i]; |
|
| 47 |
func = kivi.get_function_by_name(check); |
|
| 48 |
if (!func) console.log('Cannot find check function: ' + check);
|
|
| 49 |
if (!func()) return; |
|
| 50 |
} |
|
| 51 |
} |
|
| 52 |
if (data.confirm && !confirm(data.confirm)) return; |
|
| 53 |
if (data.call) {
|
|
| 54 |
func = kivi.get_function_by_name(data.call[0]); |
|
| 55 |
func.apply(document, data.call.slice(1)) |
|
| 56 |
} |
|
| 57 |
if (data.submit) {
|
|
| 58 |
var form = data.submit[0]; |
|
| 59 |
var params = data.submit[1]; |
|
| 60 |
for (key in params) {
|
|
| 61 |
$hidden = $('<input type=hidden>')
|
|
| 62 |
$hidden.attr('name', key)
|
|
| 63 |
$hidden.attr('value', params[key])
|
|
| 64 |
$(form).append($hidden) |
|
| 65 |
} |
|
| 66 |
$(form).submit(); |
|
| 67 |
} |
|
| 68 |
}); |
|
| 69 |
} |
|
| 70 |
} |
|
| 47 | 71 |
}); |
| 48 | 72 |
|
| 49 | 73 |
$(function(){
|
| 50 | 74 |
$('div.layout-actionbar .layout-actionbar-action').each(function(_, e) {
|
| 51 |
kivi.ActionBarAction(e); |
|
| 75 |
kivi.ActionBarAction(e) |
|
| 76 |
}); |
|
| 77 |
$('div.layout-actionbar-combobox').each(function(_, e) {
|
|
| 78 |
$(e).data('combobox', new kivi.ActionBarCombobox(e));
|
|
| 79 |
}); |
|
| 80 |
$(document).click(function() {
|
|
| 81 |
$('div.layout-actionbar-combobox').removeClass('active');
|
|
| 52 | 82 |
}); |
| 53 | 83 |
}); |
Auch abrufbar als: Unified diff
ComboBox: stateful dropdown