Skip to content

Commit

Permalink
Add possibility to disable components if current TAU is too old
Browse files Browse the repository at this point in the history 
[Issue] #140
[Problem] There was no mechanism to disable components depending
          on TAU version
[Solution] Add new config field and disable component in tray
           if current version is earlier than minimal required

Signed-off-by: Pawel Kaczmarczyk <p.kaczmarczy@samsung.com>
  • Loading branch information
@pkaczmarczy
pkaczmarczy committed Jul 17, 2019
1 parent 8613c5a commit 253d82b
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 26 deletions.
3 changes: 2 additions & 1 deletion design-editor/src/events-emitter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@ const EVENTS = {
ChangeImageFilter: 'changeImageFilter',
PopupOpened : 'global:Popup.opened',
ChangeCapability: 'attributes:change-capability',
ChangeCapabilityParam: 'attributes:change-capability-params'
ChangeCapabilityParam: 'attributes:change-capability-params',
TAULoaded: 'editor:TAU-loaded'
};

export {EVENTS, eventEmitter};
5 changes: 4 additions & 1 deletion design-editor/src/pane/design-editor-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,9 @@ class DesignEditor extends DressElement {
console.log('$iframe.pageshow');
this._updateIFrameHeight();
iframeDocument.querySelector('base').setAttribute('href', finalBase);
// "pageshow" event is triggered by TAU then TAU shoud be exists in iframe scope
// "pageshow" event is triggered by TAU then TAU should be exists in iframe scope
const tau = iframeDocument.defaultView.tau;
StateManager.set('tau-version', tau.version);

// fix data-ids for contained widgets
const components = packageManager.getPackages(Package.TYPE.COMPONENT);
Expand Down Expand Up @@ -268,6 +269,8 @@ class DesignEditor extends DressElement {
}
});
});

eventEmitter.emit(EVENTS.TAULoaded, tau.version);
});
}

Expand Down
10 changes: 5 additions & 5 deletions design-editor/src/panel/property/component/component-element-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
<ul class="closet-attribute-common-list closet-property-list">
{{#standalone-component}}
<li class="closet-component-element-list-item {{#new}}item-new{{/new}}" data-component-name="{{name}}">
<li class="closet-component-element-list-item {{#new}}item-new{{/new}} {{^isAvailable}}not-available component-disabled{{/isAvailable}}" data-component-name="{{name}}" {{^isAvailable}} data-content="Since TAU {{availableSince}}"{{/isAvailable}}>
<div class="component-label">
{{label}}
</div>
Expand All @@ -25,7 +25,7 @@
</div>
<ul class="closet-attribute-common-list closet-property-list">
{{#container-component}}
<li class="closet-component-element-list-item {{#new}}item-new{{/new}}" data-component-name="{{name}}">
<li class="closet-component-element-list-item {{#new}}item-new{{/new}} {{^isAvailable}}not-available component-disabled{{/isAvailable}}" data-component-name="{{name}}" {{^isAvailable}} data-content="Since TAU {{availableSince}}"{{/isAvailable}}>
<div class="component-label">
{{label}}
</div>
Expand All @@ -42,7 +42,7 @@
</div>
<ul class="closet-attribute-common-list closet-property-list">
{{#interactive-container-component}}
<li class="closet-component-element-list-item {{#new}}item-new{{/new}}" data-component-name="{{name}}">
<li class="closet-component-element-list-item {{#new}}item-new{{/new}} {{^isAvailable}}not-available component-disabled{{/isAvailable}}" data-component-name="{{name}}" {{^isAvailable}} data-content="Since TAU {{availableSince}}"{{/isAvailable}}>
<div class="component-label">
{{label}}
</div>
Expand All @@ -51,7 +51,7 @@
</ul>
<ul class="closet-attribute-common-list closet-property-list">
{{#hiding-container-component}}
<li class="closet-component-element-list-item {{#new}}item-new{{/new}}" data-component-name="{{name}}">
<li class="closet-component-element-list-item {{#new}}item-new{{/new}} {{^isAvailable}}not-available component-disabled{{/isAvailable}}" data-component-name="{{name}}" {{^isAvailable}} data-content="Since TAU {{availableSince}}"{{/isAvailable}}>
<div class="component-label">
{{label}}
</div>
Expand All @@ -68,7 +68,7 @@
</div>
<ul class="closet-attribute-common-list closet-property-list">
{{#layout-component}}
<li class="closet-component-element-list-item {{#new}}item-new{{/new}}" data-component-name="{{name}}">
<li class="closet-component-element-list-item {{#new}}item-new{{/new}} {{^isAvailable}}not-available component-disabled{{/isAvailable}}" data-component-name="{{name}}" {{^isAvailable}} data-content="Since TAU {{availableSince}}"{{/isAvailable}}>
<div class="component-label">
{{label}}
</div>
Expand Down
72 changes: 54 additions & 18 deletions design-editor/src/panel/property/component/component-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,36 @@ function dragInterval() {
eventEmitter.emit(EVENTS.ComponentDragged, event, dragInfo.componentInfo);
}

/**
* Returns true if version requirement is met, otherwise false.
* In case of missing parameters it returns true.
* @param {string} currentVersion
* @param {string} requiredVersion
*/
function _compareVersions(currentVersion, requiredVersion) {
if (!currentVersion || !requiredVersion) {
return true;
}

const current = currentVersion.split('.').map((s) => parseInt(s));
const required = requiredVersion.split('.').map((s) => parseInt(s));
const minLength = Math.min(current.length, required.length);

for (let i = 0; i < minLength; i++) {
if (current[i] > required[i]) {
return true;
} else if (current[i] < required[i]) {
return false;
}
}

if (current.length > minLength) {
return true;
}

return false;
}

/**
*
*/
Expand Down Expand Up @@ -181,6 +211,8 @@ class Component extends DressElement {
eventEmitter.on(EVENTS.ChangeShape, self._changeShape.bind(self));

eventEmitter.on(EVENTS.ActiveEditorUpdated, self._onUpdateActiveEditor.bind(self));

eventEmitter.on(EVENTS.TAULoaded, self._render.bind(self, true));
}

/**
Expand Down Expand Up @@ -251,23 +283,28 @@ class Component extends DressElement {

/**
* Fill component info at panel
* @param {Boolean?} force - force rendering even if last render was done
* less than minimum timeout. Default value is false.
* @private
*/
_render() {
_render(force) {
var self = this,
time = Date.now(),
componentsInfoProfile = null;
componentsInfoProfile = null;

if (componentsInfo && time - self._lastRender >= 100) {
force = (force === undefined) ? false : force;

if (componentsInfo && (time - self._lastRender >= 100 || force)) {
componentsInfoProfile = self._selectComponentsToDeviceProfile(componentsInfo);
self._getItemTemplate(componentsInfoProfile)
.then((template) => {
var $content = self.$el.find('.closet-component-element-content');
$content.html('');
$content.append($(template));
self._$componentButtonList = this.$el.find('.' + ITEM_BUTTON_CLASS);
self._setIcon(self._$componentButtonList);
self._setDraggable(self._$componentButtonList);
self._setIcon(self._$componentButtonList);
self._setDraggable(self._$componentButtonList.filter(
':not(.component-disabled), :not(.not-available)'));
}, (err) => {
throw err;
}
Expand Down Expand Up @@ -337,13 +374,6 @@ class Component extends DressElement {
$(element).css('background-image', 'none')
.addClass('closet-component-element-list-item-noicon');
}

var baseColor = $(element).css('background-color');
$(element).hover(function(){
$(element).css('background-color', '#0566c5');
}, function() {
$(element).css('background-color', baseColor);
});
});
}

Expand Down Expand Up @@ -527,20 +557,26 @@ class Component extends DressElement {
_componentsToOptions(info) {
var options = {},
profile = this._profile,
shape = this._shape;
shape = this._shape,
isAvailable;

const defaultWeight = 10000;
const defaultWeight = 10000;
const currentTauVersion = StateManager.get('tau-version', undefined);

Object.keys(info).forEach((id) => {
Object.keys(info).forEach((id) => {
if (info[id].options.attachable !== false && correctVersion(info[id].options.version, profile, shape)) {
if (!options[info[id].options.type]) {
options[info[id].options.type] = [];
}

isAvailable = _compareVersions(currentTauVersion, info[id].options.since);
options[info[id].options.type].push({
name: info[id].name,
new: info[id].options.new,
label: info[id].options.label,
weight: info[id].options.displayOrderWeight || defaultWeight
new: isAvailable && info[id].options.new,
label: info[id].options.label,
weight: info[id].options.displayOrderWeight || defaultWeight,
isAvailable: isAvailable,
availableSince: info[id].options.since
});
}
});
Expand Down
42 changes: 41 additions & 1 deletion design-editor/styles/design-editor/component-element.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,13 @@ closet-component-element {
transition-property: background, opacity;
transition-duration: 1s;
transition-timing-function: linear;

&:not(.component-disabled) {
&:hover {
background-color: #0566c5;
}
}

.component-label {
transition-property: border-color;
transition-duration: 1s;
Expand All @@ -39,14 +46,27 @@ closet-component-element {
left: 0;
text-align: center;
}
.component-label-not-available {
transition-property: border-color;
transition-duration: 1s;
transition-timing-function: linear;
position: absolute;
color: red;
width: 100%;
font-size: 12px;
margin-top: 5px;
border-top: 90px solid transparent;
left: 0;
text-align: center;
}
&.closet-component-element-list-item-noicon {
.component-label {
height: auto;
border-top-color: @button-border-color;
}
}
&.component-disabled {
opacity: 0.1;
opacity: 0.3;
}
&.item-new {
&::after{
Expand All @@ -63,6 +83,26 @@ closet-component-element {
background: linear-gradient(to bottom, #77e59c 0%,green 100%);
}
}

&.not-available {
&::before{
content: attr(data-content);
color: white;
position: absolute;
width: 40px;
height: 40px;
right: 5px;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 10px;
margin-top: 5px;
border-radius: 50%;
box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.3);
background: linear-gradient(to bottom, #e7505d 0%,red 100%);
opacity: 1;
}
}
}
}
}
Expand Down

0 comments on commit 253d82b

Please sign in to comment.