Skip to content

Commit

Permalink
fixed activation/deactivation behaviour; fixed popover positioning to…
Browse files Browse the repository at this point in the history 
… keep tab ordering
  • Loading branch information
@alex40724
alex40724 committed Oct 23, 2018
1 parent eb6adcc commit c872761
Show file tree
Hide file tree
Showing 10 changed files with 162 additions and 74 deletions.
2 changes: 1 addition & 1 deletion Services/Container/Filter/classes/class.ilContainerFilterUtil.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ public function getFilterForRefId($ref_id, $action): \ILIAS\UI\Component\Input\C
switch ($field->getFieldId())
{
case ilContainerFilterField::STD_FIELD_TITLE:
$fields["title"] = $ui->input()->field()->text($lng->txt("title"));
$fields["title"] = $ui->input()->field()->text($lng->txt("title"))->withValue("test");
$fields_act[] = true;
break;
case ilContainerFilterField::STD_FIELD_DESCRIPTION:
Expand Down
42 changes: 34 additions & 8 deletions src/UI/Implementation/Component/Input/Container/Filter/Renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,26 +40,52 @@ protected function renderStandard(Component\Input\Container\Filter\Standard $com
$tpl->setVariable("COLLAPSE", "in");
}
//replace with Apply Glyph and use language variable
$apply = $f->button()->bulky($f->glyph()->note(), "Apply", "#")
->withOnLoadCode(function ($id) {
$apply = $f->button()->bulky($f->glyph()->note(), "Apply", "");

if (!$component->isActivated()) {
$apply = $apply->withUnavailableAction(true);
$reset = $f->button()->bulky($f->glyph()->comment(), "Reset", "") //replace with Reset Glyph and use
->withUnavailableAction(true);
} else {
$apply = $apply->withOnLoadCode(function ($id) {
return "$('#{$id}').on('click', function(ev) {" . " $('#{$id}').parents('form').submit();" . "});";
});
$reset = $f->button()->bulky($f->glyph()->comment(), "Reset", $component->getResetAction()); //replace with Reset Glyph and use language variable
$reset = $f->button()->bulky($f->glyph()->comment(), "Reset", $component->getResetAction()); //replace with Reset Glyph and use
}


//todo: Expand Filter when acitvated (only desktop, not mobile)
$toggle = $f->button()->toggle("", $component->getToggleOnAction(), $component->getToggleOffAction(), $component->isActivated());

$tpl->setVariable("APPLY", $default_renderer->render($apply));
$tpl->setVariable("RESET", $default_renderer->render($reset));
$tpl->setVariable("TOGGLE", $default_renderer->render($toggle));

for ($i = 1; $i <= count($component->getInputs()); $i++) {
$tpl->setCurrentBlock("active_inputs");
$tpl->setVariable("ID", $i);
$tpl->parseCurrentBlock();
$input_group = $component->getInputGroup();

if ($component->isActivated())
{
if (!$component->isExpanded())
{
for ($i = 1; $i <= count($component->getInputs()); $i++)
{
$tpl->setCurrentBlock("active_inputs");
$tpl->setVariable("ID", $i);
$tpl->parseCurrentBlock();
}
if (count($component->getInputs()) > 0)
{
$tpl->setCurrentBlock("active_inputs_section");
$tpl->parseCurrentBlock();
}
}
} else {
$tpl->touchBlock("deactivated");
$input_group = $input_group->withLabel("disabled");
}

$renderer = $default_renderer->withAdditionalContext($component);
$tpl->setVariable("INPUTS", $renderer->render($component->getInputGroup()));
$tpl->setVariable("INPUTS", $renderer->render($input_group));

return $tpl->get();
}
Expand Down
32 changes: 21 additions & 11 deletions src/UI/Implementation/Component/Input/Field/FilterContextRenderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,14 @@ protected function renderFieldGroups(Group $group, RendererInterface $default_re
$inputs = "";
$input_labels = array();
foreach ($group->getInputs() as $input) {
$input = $input->withByLine($group->getLabel());
$inputs .= $default_renderer->render($input);
$input_labels[] = $input->getLabel();
}

$inputs .= $this->renderAddField($input_labels, $default_renderer);
if ($group->getLabel() != "disabled")
{
$inputs .= $this->renderAddField($input_labels, $default_renderer);
}

return $inputs;
}
Expand All @@ -94,14 +97,18 @@ protected function renderProxyFieldWithContext(Template $input_tpl, Input $input
$f = $this->getUIFactory();
$tpl = $this->getTemplate("tpl.context_filter.html", true, true);

$remove_glyph = $f->glyph()->remove()->withAdditionalOnLoadCode(function ($id) {
$code = "$('#$id').on('click', function(event) {
il.UI.filter.onRemoveClick(event, '$id');
return false; // stop event propagation
});";
//var_dump($code); exit;
return $code;
});
if ($input->getByline() == "disabled") {
$remove_glyph = $f->glyph()->remove()->withUnavailableAction(true);
} else {
$remove_glyph = $f->glyph()->remove()->withAdditionalOnLoadCode(function ($id) {
$code = "$('#$id').on('click', function(event) {
il.UI.filter.onRemoveClick(event, '$id');
return false; // stop event propagation
});";
//var_dump($code); exit;
return $code;
});
}

$tpl->setCurrentBlock("addon_left");
$tpl->setVariable("LABEL", $input->getLabel());
Expand Down Expand Up @@ -134,7 +141,10 @@ protected function renderProxyField(Template $input_tpl, Input $input, RendererI
$tpl->setVariable("POPOVER", $default_renderer->render($popover));

$prox = new ProxyFilterField();
$prox = $prox->withOnClick($popover->getShowSignal());
if ($input->getByline() != "disabled")
{
$prox = $prox->withOnClick($popover->getShowSignal());
}

$this->maybeRenderId($prox, $tpl);
return $tpl->get();
Expand Down
47 changes: 39 additions & 8 deletions src/UI/templates/default/Input/input.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,30 @@

.il-filter-bar {
font-size: 1.4em;
padding: 10px;
padding-bottom: 25px;
border-bottom: 1px solid black;
padding: @padding-small-vertical @padding-large-horizontal;

.il-toggle-button {
height: 13px;
border-radius: 13px;
padding-left: 15px;
padding-right: 15px;

.il-toggle-switch {
border-radius: 19px;
width: 19px;
height: 19px;
}
}

.btn-bulky {
display: inline-flex;
width: auto;
background-color: initial;
font-size: 0.9em;
font-size: 0.7em;
border-width: 0;
&.disabled .bulky-label{
color: #b0b0b0;
}
}
.glyph {
padding-right: 0.3em;
Expand All @@ -81,10 +97,15 @@
}

.il-filter-inputs-active {
//overflow: hidden;
//white-space: nowrap;
//text-overflow: ellipsis;
//max-width: 100%;
background-color: @il-secondary-container-bg;
padding: @padding-small-vertical @padding-large-horizontal;

span {
display: inline-block;
margin: 1px 4px;
float: left;
background-color: @il-primary-container-bg;
}
}

.col-md-4 {
Expand Down Expand Up @@ -136,9 +157,19 @@
display: none;
}
}
}

.il-filter.disabled {
.input-group-addon {
background-color: @il-primary-container-bg;
color: #b0b0b0;
}
.input-group span.form-control {
color: #b0b0b0;
}
}


//== Specific Inputs
//
//
Expand Down
4 changes: 2 additions & 2 deletions src/UI/templates/default/Input/tpl.context_filter.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="col-md-4">
<div class="col-md-4 il-popover-container">
<div class="input-group">
<!-- BEGIN addon_left -->
<span class="input-group-addon" id="leftaddon">{LABEL}</span>
Expand All @@ -10,5 +10,5 @@
<span class="input-group-addon" id="rightaddon">{DELETE}</span>
<!-- END addon_right -->
</div>
{POPOVER}
</div>
{POPOVER}
2 changes: 1 addition & 1 deletion src/UI/templates/default/Input/tpl.filter_field.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<span role="button" tabindex="0" class="form-control il-filter-field" <!-- BEGIN id -->id="{ID}"<!-- END id --> data-placement="bottom"></span> {POPOVER}
<span role="button" <!-- BEGIN tabindex -->tabindex="0"<!-- END tabindex --> class="form-control il-filter-field" <!-- BEGIN id -->id="{ID}"<!-- END id --> data-placement="bottom"></span> {POPOVER}
20 changes: 12 additions & 8 deletions src/UI/templates/default/Input/tpl.standard_filter.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<form class="il-standard-form form-horizontal" enctype="multipart/formdata" action="{URL}" method="post" novalidate="novalidate">
<div class="il-filter-bar">
<span class="il-filter-bar-opener" data-toggle="collapse" data-target="#inputs" aria-expanded="false"> {OPENER} </span>
<span class="il-filter-bar-controls"> {APPLY} {RESET} {TOGGLE} </span>
</div>
<div class="il-filter-inputs-active"><!-- BEGIN active_inputs --> <span id={ID}> </span> <!-- END active_inputs --></div>
<div id="inputs" class="form-group row collapse {COLLAPSE}"> {INPUTS} </div>
</form>
<div class="il-filter <!-- BEGIN deactivated -->disabled<!-- END deactivated -->">
<form class="il-standard-form form-horizontal" enctype="multipart/formdata" action="{URL}" method="post" novalidate="novalidate">
<div class="il-filter-bar">
<span class="il-filter-bar-opener" data-toggle="collapse" data-target="#inputs" aria-expanded="false"> {OPENER} </span>
<span class="il-filter-bar-controls"> {APPLY} {RESET} {TOGGLE} </span>
</div>
<!-- BEGIN active_inputs_section -->
<div class="il-filter-inputs-active clearfix"><!-- BEGIN active_inputs --> <span id={ID}> </span> <!-- END active_inputs --></div>
<!-- END active_inputs_section -->
<div id="inputs" class="form-group row collapse {COLLAPSE}"> {INPUTS} </div>
</form>
</div>


<script>
Expand Down
21 changes: 6 additions & 15 deletions src/UI/templates/js/Popover/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,29 +77,20 @@ il.UI = il.UI || {};
return true;
}

// if triggerer is within a form, make form the container (instead of window.body)
var form;
// webui is moving the content at the end of the document which makes it impossible to use
// popovers in forms without specifying a container here. We search for upper il-popover-container.
// If given we use this element as a container for the popover
var container;
console.log(options);
if (form = $('#' + $triggerer.attr('id')).parents("form")[0]) {
//options.container = form;
options = $.extend({}, {container: form}, options);
if (container = $('#' + $triggerer.attr('id')).parents(".il-popover-container")[0]) {
options = $.extend({}, {container: container}, options);
}
console.log(options);

options = $.extend({}, defaultOptions, options);
// Extend options with data from the signal
$triggerer.webuiPopover(options).webuiPopover('show');

// webui.popover does not place elements correctly in containers, since it always calculates
// top, left relative to the document not to the nearest positioned ancestor
if (form) {
var reg = il.Util.getRegion($(form).offsetParent()); // nearest positioned ancestor
var popel = $('#' + $('#' + $triggerer.attr('id')).data("target"));
popel.css("top",
parseInt(popel.css("top"), 10) - reg.top);
popel.css("left",
parseInt(popel.css("left"), 10) - reg.left);
}

return false;
};
Expand Down
65 changes: 45 additions & 20 deletions templates/default/delos.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7248,11 +7248,13 @@ a.btn-link.ilSubmitInactive:hover {
}
.il-toggle-button {
position: relative;
display: inline-block;
height: 19px;
padding: 0px 25px;
padding-left: 25px;
padding-right: 25px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 40px;
background: lightgrey;
background: #cdcdcd;
cursor: pointer;
}
.il-toggle-button .il-toggle-switch {
Expand All @@ -7263,17 +7265,17 @@ a.btn-link.ilSubmitInactive:hover {
height: 25px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 40px;
background: grey;
background: #808080;
-webkit-transition: all 0.25s ease-in-out;
/* Safari */
transition: all 0.25s ease-in-out;
}
.il-toggle-button.on {
background: #b3b3cc;
background: #a1b3ca;
}
.il-toggle-button.on .il-toggle-switch {
left: 53%;
background: #666699;
background: #4c6586;
}
h6.il-divider {
padding: 3px 6px;
Expand Down Expand Up @@ -8514,32 +8516,48 @@ ul.breadcrumb li:hover {
width: unset;
}
.il-standard-form .il-filter-bar {
padding: 10px;
padding-bottom: 25px;
border-bottom: 1px solid black;
}
.il-standard-form .il-filter-bar-opener {
font-size: 1.4em;
cursor: pointer;
padding: 3px 12px;
}
.il-standard-form .il-filter-bar-controls {
font-size: 1.4em;
float: right;
.il-standard-form .il-filter-bar .il-toggle-button {
height: 13px;
border-radius: 13px;
padding-left: 15px;
padding-right: 15px;
}
.il-standard-form .il-filter-bar .il-toggle-button .il-toggle-switch {
border-radius: 19px;
width: 19px;
height: 19px;
}
.il-standard-form .il-filter-bar-controls .btn-bulky {
.il-standard-form .il-filter-bar .btn-bulky {
display: inline-flex;
width: auto;
background-color: initial;
font-size: 0.9em;
font-size: 0.7em;
border-width: 0;
}
.il-standard-form .il-filter-bar .btn-bulky.disabled .bulky-label {
color: #b0b0b0;
}
.il-standard-form .il-filter-bar-controls .glyph {
.il-standard-form .il-filter-bar .glyph {
padding-right: 0.3em;
}
.il-standard-form .il-filter-bar-controls {
float: right;
}
.il-standard-form .il-filter-bar-controls .il-toggle-button {
vertical-align: middle;
}
.il-standard-form .il-filter-bar-opener-collapse .glyph {
margin-left: 8px;
.il-standard-form .il-filter-inputs-active {
background-color: #f9f9f9;
padding: 3px 12px;
}
.il-standard-form .il-filter-inputs-active span {
display: inline-block;
margin: 1px 4px;
float: left;
background-color: white;
}
.il-standard-form .col-md-4 {
padding-bottom: 10px;
Expand Down Expand Up @@ -8575,10 +8593,17 @@ ul.breadcrumb li:hover {
cursor: text;
}
@media (max-width: 768px) {
.il-standard-form .bulky-label {
.il-standard-form .il-filter-bar-controls .bulky-label {
display: none;
}
}
.il-filter.disabled .input-group-addon {
background-color: white;
color: #b0b0b0;
}
.il-filter.disabled .input-group span.form-control {
color: #b0b0b0;
}
.il-input-tag {
height: auto;
min-height: 1.42857143;
Expand Down
Loading

0 comments on commit c872761

Please sign in to comment.