composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-22 18:18:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Taxons: Rework of CSS & markup in the console (portal still to come).

Browse Source
This commit is contained in:
Molkobain
2018-09-27 16:45:04 +02:00
parent 58525f247e
commit 5fa4b4cb88
10 changed files with 87 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
application/cmdbabstract.class.inc.php
View File

@@ -2044,7 +2044,7 @@ EOF
/** @var \ormSet $value */
$sJson = $oAttDef->GetJsonForWidget($value, $aArgs);
$sInputId = "attr_{$sFormPrefix}{$sAttCode}";
$sHTMLValue = "<div class=\"field_input_zone field_input_tagset\"><input id='$sInputId' name='$sInputId' type='hidden' value='$sJson'></div>{$sValidationSpan}{$sReloadSpan}";
$sHTMLValue = "<div class=\"field_input_zone field_input_set\"><input id='$sInputId' name='$sInputId' type='hidden' value='$sJson'></div>{$sValidationSpan}{$sReloadSpan}";
$sScript = "$('#$sInputId').set_widget();";
$oPage->add_ready_script($sScript);
break;

8
core/attributedef.class.inc.php
View File

@@ -6786,7 +6786,7 @@ class AttributeTagSet extends AttributeSet
* @throws \CoreException
* @throws \OQLException
*/
public function GetJsonForWidget($oValue, $aArgs)
public function GetJsonForWidget($oValue, $aArgs = array())
{
$aJson = array();
@@ -9415,7 +9415,7 @@ abstract class AttributeSet extends AttributeDBFieldVoid
* @throws \CoreException
* @throws \OQLException
*/
public function GetJsonForWidget($oValue, $aArgs)
public function GetJsonForWidget($oValue, $aArgs = array())
{
$aJson = array();
@@ -9871,7 +9871,7 @@ class AttributeClassAttCodeSet extends AttributeSet
}
$value = $aLocalizedValues;
}
return implode(' ', $value);
$value = implode('', $value);
}
return '<span class="'.implode(' ', $this->aCSSClasses).'">'.$value.'</span>';
}
@@ -10059,7 +10059,7 @@ class AttributeQueryAttCodeSet extends AttributeSet
}
$value = $aLocalizedValues;
}
$value = implode(' ', $value);
$value = implode('', $value);
}
return '<span class="'.implode(' ', $this->aCSSClasses).'">'.$value.'</span>';

35
css/light-grey.css
View File

@@ -1944,26 +1944,19 @@ fieldset .details > .field_container {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_extkey > .field_input_btn > img {
max-width: 20px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control {
width: 100%;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input input {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-dropdown, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input, .field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input input {
font-size: 12px;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input {
padding: 2px 2px 0px 2px;
/* padding-bottom = padding-top - item margin-bottom */
border: 1px solid #ababab;
border-radius: 0;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: #222;
}
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_tagset .selectize-control .selectize-input .attribute-set-item.partial-code {
.field_container > div > div.field_value .attribute-edit .field_input_zone.field_input_set .selectize-control .selectize-input .attribute-set-item.partial-code {
color: rgba(34, 34, 34, 0.6);
background-color: #eaeaea;
}
@@ -2899,7 +2892,22 @@ table.listResults .originColor {
.menu-icon-select > .ui-menu-item {
padding: 0.3em 3%;
}
div.selectize-control > div.selectize-input > div.item[data-value], div.selectize-control > div.selectize-input > div.item[data-value].active, .attribute-set .attribute-set-item {
.selectize-control .selectize-input.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: #222;
}
.attribute.attribute-set .attribute-set-item::after {
content: ",";
margin-right: 0.5em;
}
.attribute.attribute-set .attribute-set-item:last-of-type::after {
content: "";
margin-right: 0;
}
.attribute-edit .attribute-set .attribute-set-item, .attribute-set.attribute-tag-set .attribute-set-item, div.selectize-control > div.selectize-input > div.item[data-value], div.selectize-control > div.selectize-input > div.item[data-value].active {
display: inline-block;
margin-right: 3px;
margin-bottom: 3px;
@@ -2918,6 +2926,9 @@ div.selectize-control > div.selectize-input > div.item[data-value], div.selectiz
text-overflow: ellipsis;
white-space: nowrap;
}
.attribute-edit .attribute-set .attribute-set-item::after, .attribute-set.attribute-tag-set .attribute-set-item::after, div.selectize-control > div.selectize-input > div.item[data-value]::after, div.selectize-control > div.selectize-input > div.item[data-value].active::after {
content: "";
}
div.selectize-control > div.selectize-input > div.item[data-value] > .remove {
border: none;
}

48
css/light-grey.scss
View File

@@ -2265,7 +2265,7 @@ fieldset .details>.field_container {
}
}
&.field_input_tagset{
&.field_input_set{
.selectize-control{
width: 100%;
@@ -2279,14 +2279,6 @@ fieldset .details>.field_container {
border: 1px solid #ABABAB;
border-radius: 0;
&.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: $gray-darker;
}
.attribute-set-item.partial-code{
color: transparentize($gray-darker, 0.4);
background-color: lighten($gray-lighter, 5%);
@@ -3323,9 +3315,38 @@ table.listResults .originColor{
//////////////////////
// Selectize widget //
//
.selectize-control{
.selectize-input{
&.has-items:after {
content: "+";
display: inline-block;
font-size: 17px;
font-weight: bold;
color: $gray-darker;
}
}
}
.attribute {
&.attribute-set {
.attribute-set-item{
&::after{
content: ",";
margin-right: 0.5em;
}
&:last-of-type::after{
content: "";
margin-right: 0;
}
}
}
}
.attribute-edit .attribute-set .attribute-set-item,
.attribute-set.attribute-tag-set .attribute-set-item,
div.selectize-control > div.selectize-input > div.item[data-value],
div.selectize-control > div.selectize-input > div.item[data-value].active,
.attribute-set .attribute-set-item {
div.selectize-control > div.selectize-input > div.item[data-value].active{
display: inline-block;
margin-right: 3px;
margin-bottom: 3px;
@@ -3344,9 +3365,14 @@ div.selectize-control > div.selectize-input > div.item[data-value].active,
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&::after{
content: "";
}
}
div.selectize-control > div.selectize-input > div.item[data-value] > .remove {
border: none;
}

4
datamodels/2.x/itop-portal-base/portal/src/views/layout.html.twig
View File

@@ -118,7 +118,7 @@
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'lib/handlebars/js/handlebars.min-768ddbd.js'|add_itop_version }}"></script>
{# Selectize for sets #}
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/selectize.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/jquery.itop-tagset-widget.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/jquery.itop-set-widget.js'|add_itop_version }}"></script>
{# Form files #}
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/form_handler.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/form_field.js'|add_itop_version }}"></script>
@@ -128,7 +128,7 @@
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/portal_form_handler.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/portal_form_field.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/portal_form_field_html.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/portal_form_field_tagset.js'|add_itop_version }}"></script>
<script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'js/portal_form_field_set.js'|add_itop_version }}"></script>
{# UI Extensions JS, in an undefined order #}
{% if app['combodo.portal.instance.conf'].ui_extensions.js_files is defined %}
{% for js_file in app['combodo.portal.instance.conf'].ui_extensions.js_files %}

9
datamodels/2.x/itop-portal-base/portal/web/js/portal_form_field_tagset.js → datamodels/2.x/itop-portal-base/portal/web/js/portal_form_field_set.js
View File

@@ -1,11 +1,11 @@
//iTop Portal Form field TagSet
//iTop Portal Form field Set
//Used for field containing tagset ...
;
$(function()
{
// the widget definition, where 'itop' is the namespace,
// 'portal_form_field' the widget name
$.widget( 'itop.portal_form_field_tagset', $.itop.portal_form_field,
$.widget( 'itop.portal_form_field_set', $.itop.portal_form_field,
{
// the constructor
_create: function()
@@ -13,7 +13,7 @@ $(function()
this.element
.addClass('portal_form_field_tagset');
this.element.find('input[type="hidden"]').tagset_widget();
this.element.find('input[type="hidden"]').set_widget();
this._super();
},
@@ -52,5 +52,4 @@ $(function()
return oResult;
}
});
});
light
});

2
sources/autoload.php
View File

@@ -58,6 +58,6 @@ require_once APPROOT . 'sources/renderer/bootstrap/bsformrenderer.class.inc.php'
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bssimplefieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bsselectobjectfieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bslinkedsetfieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bstagsetfieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bsitemsetfieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bssubformfieldrenderer.class.inc.php';
require_once APPROOT . 'sources/renderer/bootstrap/fieldrenderer/bsfileuploadfieldrenderer.class.inc.php';

2
sources/renderer/bootstrap/bsformrenderer.class.inc.php
View File

@@ -55,7 +55,7 @@ class BsFormRenderer extends FormRenderer
$this->AddSupportedField('SubFormField', 'BsSubFormFieldRenderer');
$this->AddSupportedField('SelectObjectField', 'BsSelectObjectFieldRenderer');
$this->AddSupportedField('LinkedSetField', 'BsLinkedSetFieldRenderer');
$this->AddSupportedField('TagSetField', 'BsTagSetFieldRenderer');
$this->AddSupportedField('TagSetField', 'BsItemSetFieldRenderer');
$this->AddSupportedField('DateTimeField', 'BsSimpleFieldRenderer');
$this->AddSupportedField('DurationField', 'BsSimpleFieldRenderer');
$this->AddSupportedField('FileUploadField', 'BsFileUploadFieldRenderer');

27
sources/renderer/bootstrap/fieldrenderer/bstagsetfieldrenderer.class.inc.php → sources/renderer/bootstrap/fieldrenderer/bsitemsetfieldrenderer.class.inc.php
View File

@@ -29,11 +29,11 @@ use Combodo\iTop\Renderer\FieldRenderer;
use Combodo\iTop\Renderer\RenderingOutput;
/**
* Description of BsTagSetFieldRenderer
* Description of BsItemSetFieldRenderer
*
* @author Guillaume Lajarige <guillaume.lajarige@combodo.com>
*/
class BsTagSetFieldRenderer extends FieldRenderer
class BsItemSetFieldRenderer extends FieldRenderer
{
/**
* @inheritdoc
@@ -56,8 +56,8 @@ class BsTagSetFieldRenderer extends FieldRenderer
// Rendering field
if (!$this->oField->GetHidden())
{
/** @var \ormTagSet $oOrmSet */
$oOrmSet = $this->oField->GetCurrentValue();
/** @var \ormSet $oOrmItemSet */
$oOrmItemSet = $this->oField->GetCurrentValue();
// Opening container
$oOutput->AddHtml('<div class="form-group form_group_small ' . $sFieldMandatoryClass . '">');
@@ -77,8 +77,8 @@ class BsTagSetFieldRenderer extends FieldRenderer
// ... in edit mode
if(!$this->oField->GetReadOnly())
{
$oAttDef = MetaModel::GetAttributeDef($oOrmSet->GetClass(), $oOrmSet->GetAttCode());
$sJSONForWidget = $oAttDef->GetJsonForWidget($oOrmSet);
$oAttDef = MetaModel::GetAttributeDef($oOrmItemSet->GetClass(), $oOrmItemSet->GetAttCode());
$sJSONForWidget = $oAttDef->GetJsonForWidget($oOrmItemSet);
// - Help block
$oOutput->AddHtml('<div class="help-block"></div>');
@@ -94,7 +94,7 @@ class BsTagSetFieldRenderer extends FieldRenderer
$sValidators = json_encode($aValidators);
$oOutput->AddJs(
<<<EOF
$("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}']").portal_form_field_tagset({
$("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}']").portal_form_field_set({
validators: $sValidators,
// Overloading default callback as the Selectize widget adds several inputs and we want to retrieve only the one with the value.
get_current_value_callback: function(me, oEvent, oData){
@@ -105,7 +105,6 @@ class BsTagSetFieldRenderer extends FieldRenderer
return value;
},
set_current_value_callback: function(me, oEvent, oData){ console.log($(me).element); /*$(me.element).find('textarea').val(oData);*/ }
});
EOF
);
@@ -113,15 +112,15 @@ EOF
// ... in view mode
else
{
$aTags = $oOrmSet->GetTags();
$aItems = $oOrmItemSet->GetTags();
$oOutput->AddHtml('<div class="form-control-static">')
->AddHtml('<span class="label-group">');
foreach($aTags as $sTagCode => $oTag)
foreach($aItems as $sItemCode => $oItem)
{
$sTagLabel = $oTag->Get('label');
$sTagDescription = $oTag->Get('description');
$oOutput->AddHtml('<span class="label label-default" data-tag-code="'.$sTagCode.'" data-tag-label="'.$sTagLabel.'" data-tag-description="">')
->AddHtml($sTagLabel, true)
$sItemLabel = $oItem->Get('label');
$sItemDescription = $oItem->Get('description');
$oOutput->AddHtml('<span class="label label-default" data-item-code="'.$sItemCode.'" data-item-label="'.$sItemLabel.'" data-item-description="">')
->AddHtml($sItemLabel, true)
->AddHtml('</span>');
}
$oOutput->AddHtml('</span>')

2
test/attributeset_widget_poc.html
View File

@@ -48,7 +48,7 @@ var aDictEntries = {"Core:AttributeSet:placeholder": "click to add"};
<div>
<div class="field_value">
<div class="attribute-edit">
<div class="field_input_zone field_input_tagset">
<div class="field_input_zone field_input_set">
<textarea id="tagset-field" rows="30" cols="60">
{
"possible_values": [