From 072bf361de2a60261f9489c85daffdeec96294a2 Mon Sep 17 00:00:00 2001 From: Joshi Date: Mon, 30 Mar 2020 16:20:22 -0700 Subject: [PATCH 1/8] Store styles for telemetry on domain objects --- .../components/TelemetryView.vue | 58 ++++++------------- .../mixins/objectlStyles-mixin.js | 6 +- src/ui/inspector/StylesInspectorView.vue | 10 ++-- 3 files changed, 25 insertions(+), 49 deletions(-) diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 0a9ea7b856..1db72426b5 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -37,7 +37,7 @@ v-if="showLabel" class="c-telemetry-view__label" :class="[styleClass]" - :style="objectStyle" + :style="telemetryObjectStyle" >
{{ domainObject.name }} @@ -49,7 +49,7 @@ :title="fieldName" class="c-telemetry-view__value" :class="[telemetryClass, !telemetryClass && styleClass]" - :style="!telemetryClass && objectStyle" + :style="!telemetryClass && telemetryObjectStyle" >
{{ telemetryValue }} @@ -62,7 +62,7 @@ - - - - diff --git a/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.14.6)/prettify.js b/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.14.6)/prettify.js deleted file mode 100644 index ef51e03866..0000000000 --- a/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.14.6)/prettify.js +++ /dev/null @@ -1 +0,0 @@ -window.PR_SHOULD_USE_CONTINUATION=true;(function(){var h=["break,continue,do,else,for,if,return,while"];var u=[h,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var p=[u,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var l=[p,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var x=[p,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var R=[x,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];var r="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes";var w=[p,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var s="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var I=[h,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var f=[h,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var H=[h,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var A=[l,R,w,s+I,f,H];var e=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;var C="str";var z="kwd";var j="com";var O="typ";var G="lit";var L="pun";var F="pln";var m="tag";var E="dec";var J="src";var P="atn";var n="atv";var N="nocode";var M="(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function k(Z){var ad=0;var S=false;var ac=false;for(var V=0,U=Z.length;V122)){if(!(al<65||ag>90)){af.push([Math.max(65,ag)|32,Math.min(al,90)|32])}if(!(al<97||ag>122)){af.push([Math.max(97,ag)&~32,Math.min(al,122)&~32])}}}}af.sort(function(av,au){return(av[0]-au[0])||(au[1]-av[1])});var ai=[];var ap=[NaN,NaN];for(var ar=0;arat[0]){if(at[1]+1>at[0]){an.push("-")}an.push(T(at[1]))}}an.push("]");return an.join("")}function W(al){var aj=al.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var ah=aj.length;var an=[];for(var ak=0,am=0;ak=2&&ai==="["){aj[ak]=X(ag)}else{if(ai!=="\\"){aj[ak]=ag.replace(/[a-zA-Z]/g,function(ao){var ap=ao.charCodeAt(0);return"["+String.fromCharCode(ap&~32,ap|32)+"]"})}}}}return aj.join("")}var aa=[];for(var V=0,U=Z.length;V=0;){S[ac.charAt(ae)]=Y}}var af=Y[1];var aa=""+af;if(!ag.hasOwnProperty(aa)){ah.push(af);ag[aa]=null}}ah.push(/[\0-\uffff]/);V=k(ah)})();var X=T.length;var W=function(ah){var Z=ah.sourceCode,Y=ah.basePos;var ad=[Y,F];var af=0;var an=Z.match(V)||[];var aj={};for(var ae=0,aq=an.length;ae=5&&"lang-"===ap.substring(0,5);if(am&&!(ai&&typeof ai[1]==="string")){am=false;ap=J}if(!am){aj[ag]=ap}}var ab=af;af+=ag.length;if(!am){ad.push(Y+ab,ap)}else{var al=ai[1];var ak=ag.indexOf(al);var ac=ak+al.length;if(ai[2]){ac=ag.length-ai[2].length;ak=ac-al.length}var ar=ap.substring(5);B(Y+ab,ag.substring(0,ak),W,ad);B(Y+ab+ak,al,q(ar,al),ad);B(Y+ab+ac,ag.substring(ac),W,ad)}}ah.decorations=ad};return W}function i(T){var W=[],S=[];if(T.tripleQuotedStrings){W.push([C,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(T.multiLineStrings){W.push([C,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{W.push([C,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(T.verbatimStrings){S.push([C,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var Y=T.hashComments;if(Y){if(T.cStyleComments){if(Y>1){W.push([j,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{W.push([j,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}S.push([C,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,null])}else{W.push([j,/^#[^\r\n]*/,null,"#"])}}if(T.cStyleComments){S.push([j,/^\/\/[^\r\n]*/,null]);S.push([j,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(T.regexLiterals){var X=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");S.push(["lang-regex",new RegExp("^"+M+"("+X+")")])}var V=T.types;if(V){S.push([O,V])}var U=(""+T.keywords).replace(/^ | $/g,"");if(U.length){S.push([z,new RegExp("^(?:"+U.replace(/[\s,]+/g,"|")+")\\b"),null])}W.push([F,/^\s+/,null," \r\n\t\xA0"]);S.push([G,/^@[a-z_$][a-z_$@0-9]*/i,null],[O,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[F,/^[a-z_$][a-z_$@0-9]*/i,null],[G,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[F,/^\\[\s\S]?/,null],[L,/^.[^\s\w\.$@\'\"\`\/\#\\]*/,null]);return g(W,S)}var K=i({keywords:A,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function Q(V,ag){var U=/(?:^|\s)nocode(?:\s|$)/;var ab=/\r\n?|\n/;var ac=V.ownerDocument;var S;if(V.currentStyle){S=V.currentStyle.whiteSpace}else{if(window.getComputedStyle){S=ac.defaultView.getComputedStyle(V,null).getPropertyValue("white-space")}}var Z=S&&"pre"===S.substring(0,3);var af=ac.createElement("LI");while(V.firstChild){af.appendChild(V.firstChild)}var W=[af];function ae(al){switch(al.nodeType){case 1:if(U.test(al.className)){break}if("BR"===al.nodeName){ad(al);if(al.parentNode){al.parentNode.removeChild(al)}}else{for(var an=al.firstChild;an;an=an.nextSibling){ae(an)}}break;case 3:case 4:if(Z){var am=al.nodeValue;var aj=am.match(ab);if(aj){var ai=am.substring(0,aj.index);al.nodeValue=ai;var ah=am.substring(aj.index+aj[0].length);if(ah){var ak=al.parentNode;ak.insertBefore(ac.createTextNode(ah),al.nextSibling)}ad(al);if(!ai){al.parentNode.removeChild(al)}}}break}}function ad(ak){while(!ak.nextSibling){ak=ak.parentNode;if(!ak){return}}function ai(al,ar){var aq=ar?al.cloneNode(false):al;var ao=al.parentNode;if(ao){var ap=ai(ao,1);var an=al.nextSibling;ap.appendChild(aq);for(var am=an;am;am=an){an=am.nextSibling;ap.appendChild(am)}}return aq}var ah=ai(ak.nextSibling,0);for(var aj;(aj=ah.parentNode)&&aj.nodeType===1;){ah=aj}W.push(ah)}for(var Y=0;Y=S){ah+=2}if(V>=ap){Z+=2}}}var t={};function c(U,V){for(var S=V.length;--S>=0;){var T=V[S];if(!t.hasOwnProperty(T)){t[T]=U}else{if(window.console){console.warn("cannot override language handler %s",T)}}}}function q(T,S){if(!(T&&t.hasOwnProperty(T))){T=/^\s*]*(?:>|$)/],[j,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[L,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);c(g([[F,/^[\s]+/,null," \t\r\n"],[n,/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[[m,/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],[P,/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[L,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);c(g([],[[n,/^[\s\S]+/]]),["uq.val"]);c(i({keywords:l,hashComments:true,cStyleComments:true,types:e}),["c","cc","cpp","cxx","cyc","m"]);c(i({keywords:"null,true,false"}),["json"]);c(i({keywords:R,hashComments:true,cStyleComments:true,verbatimStrings:true,types:e}),["cs"]);c(i({keywords:x,cStyleComments:true}),["java"]);c(i({keywords:H,hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);c(i({keywords:I,hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);c(i({keywords:s,hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);c(i({keywords:f,hashComments:true,multiLineStrings:true,regexLiterals:true}),["rb"]);c(i({keywords:w,cStyleComments:true,regexLiterals:true}),["js"]);c(i({keywords:r,hashComments:3,cStyleComments:true,multilineStrings:true,tripleQuotedStrings:true,regexLiterals:true}),["coffee"]);c(g([],[[C,/^[\s\S]+/]]),["regex"]);function d(V){var U=V.langExtension;try{var S=a(V.sourceNode);var T=S.sourceCode;V.sourceCode=T;V.spans=S.spans;V.basePos=0;q(U,T)(V);D(V)}catch(W){if("console" in window){console.log(W&&W.stack?W.stack:W)}}}function y(W,V,U){var S=document.createElement("PRE");S.innerHTML=W;if(U){Q(S,U)}var T={langExtension:V,numberLines:U,sourceNode:S};d(T);return S.innerHTML}function b(ad){function Y(af){return document.getElementsByTagName(af)}var ac=[Y("pre"),Y("code"),Y("xmp")];var T=[];for(var aa=0;aa=0){var ah=ai.match(ab);var am;if(!ah&&(am=o(aj))&&"CODE"===am.tagName){ah=am.className.match(ab)}if(ah){ah=ah[1]}var al=false;for(var ak=aj.parentNode;ak;ak=ak.parentNode){if((ak.tagName==="pre"||ak.tagName==="code"||ak.tagName==="xmp")&&ak.className&&ak.className.indexOf("prettyprint")>=0){al=true;break}}if(!al){var af=aj.className.match(/\blinenums\b(?::(\d+))?/);af=af?af[1]&&af[1].length?+af[1]:true:false;if(af){Q(aj,af)}S={langExtension:ah,sourceNode:aj,numberLines:af};d(S)}}}if(X]*(?:>|$)/],[PR.PR_COMMENT,/^<\!--[\s\S]*?(?:-\->|$)/],[PR.PR_PUNCTUATION,/^(?:<[%?]|[%?]>)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-handlebars",/^]*type\s*=\s*['"]?text\/x-handlebars-template['"]?\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-js",/^]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i],[PR.PR_DECLARATION,/^{{[#^>/]?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{&?\s*[\w.][^}]*}}/],[PR.PR_DECLARATION,/^{{{>?\s*[\w.][^}]*}}}/],[PR.PR_COMMENT,/^{{![^}]*}}/]]),["handlebars","hbs"]);PR.registerLangHandler(PR.createSimpleLexer([[PR.PR_PLAIN,/^[ \t\r\n\f]+/,null," \t\r\n\f"]],[[PR.PR_STRING,/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],[PR.PR_STRING,/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],[PR.PR_KEYWORD,/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],[PR.PR_COMMENT,/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],[PR.PR_COMMENT,/^(?:)/],[PR.PR_LITERAL,/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],[PR.PR_LITERAL,/^#(?:[0-9a-f]{3}){1,2}/i],[PR.PR_PLAIN,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],[PR.PR_PUNCTUATION,/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_KEYWORD,/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[[PR.PR_STRING,/^[^\)\"\']+/]]),["css-str"]); diff --git a/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.14.6)/sort-arrow-sprite.png b/coverage/HeadlessChrome 0.0.0 (Mac OS X 10.14.6)/sort-arrow-sprite.png deleted file mode 100644 index 03f704a609c6fd0dbfdac63466a7d7c958b5cbf3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 209 zcmeAS@N?(olHy`uVBq!ia0vp^>_9Bd!3HEZxJ@+%Qj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS>Jii$m5978H@?Fn+^JD|Y9yzj{W`447Gxa{7*dM7nnnD-Lb z6^}Hx2)'; - } - } - return cols; - } - // attaches a data attribute to every tr element with an object - // of data values keyed by column name - function loadRowData(tableRow) { - var tableCols = tableRow.querySelectorAll('td'), - colNode, - col, - data = {}, - i, - val; - for (i = 0; i < tableCols.length; i += 1) { - colNode = tableCols[i]; - col = cols[i]; - val = colNode.getAttribute('data-value'); - if (col.type === 'number') { - val = Number(val); - } - data[col.key] = val; - } - return data; - } - // loads all row data - function loadData() { - var rows = getTableBody().querySelectorAll('tr'), - i; - - for (i = 0; i < rows.length; i += 1) { - rows[i].data = loadRowData(rows[i]); - } - } - // sorts the table using the data for the ith column - function sortByIndex(index, desc) { - var key = cols[index].key, - sorter = function (a, b) { - a = a.data[key]; - b = b.data[key]; - return a < b ? -1 : a > b ? 1 : 0; - }, - finalSorter = sorter, - tableBody = document.querySelector('.coverage-summary tbody'), - rowNodes = tableBody.querySelectorAll('tr'), - rows = [], - i; - - if (desc) { - finalSorter = function (a, b) { - return -1 * sorter(a, b); - }; - } - - for (i = 0; i < rowNodes.length; i += 1) { - rows.push(rowNodes[i]); - tableBody.removeChild(rowNodes[i]); - } - - rows.sort(finalSorter); - - for (i = 0; i < rows.length; i += 1) { - tableBody.appendChild(rows[i]); - } - } - // removes sort indicators for current column being sorted - function removeSortIndicators() { - var col = getNthColumn(currentSort.index), - cls = col.className; - - cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); - col.className = cls; - } - // adds sort indicators for current column being sorted - function addSortIndicators() { - getNthColumn(currentSort.index).className += currentSort.desc ? ' sorted-desc' : ' sorted'; - } - // adds event listeners for all sorter widgets - function enableUI() { - var i, - el, - ithSorter = function ithSorter(i) { - var col = cols[i]; - - return function () { - var desc = col.defaultDescSort; - - if (currentSort.index === i) { - desc = !currentSort.desc; - } - sortByIndex(i, desc); - removeSortIndicators(); - currentSort.index = i; - currentSort.desc = desc; - addSortIndicators(); - }; - }; - for (i =0 ; i < cols.length; i += 1) { - if (cols[i].sortable) { - // add the click event handler on the th so users - // dont have to click on those tiny arrows - el = getNthColumn(i).querySelector('.sorter').parentElement; - if (el.addEventListener) { - el.addEventListener('click', ithSorter(i)); - } else { - el.attachEvent('onclick', ithSorter(i)); - } - } - } - } - // adds sorting functionality to the UI - return function () { - if (!getTable()) { - return; - } - cols = loadColumns(); - loadData(cols); - addSortIndicators(); - enableUI(); - }; -})(); - -window.addEventListener('load', addSorting); From 698508fde47504e6d13bc4ecc6ad7e385ba391bc Mon Sep 17 00:00:00 2001 From: Joshi Date: Mon, 6 Apr 2020 14:02:06 -0700 Subject: [PATCH 4/8] Use the subobject view type to determine where styles should be saved --- .../condition/components/inspector/ConditionalStylesView.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue index 4e7168d3ca..45b0c63eef 100644 --- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue +++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue @@ -173,22 +173,21 @@ export default { return styleProps; }, getDomainObjectFromSelection() { - let layoutItem = {}; let domainObject; if (this.selection[0].length > 1) { //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control. //The second item in the this.selection[0] list is the container object (usually a layout) + let layoutItem = this.selection[0][0].context.layoutItem; const item = this.selection[0][0].context.item; this.canHide = true; - if (item && item.composition) { + if (layoutItem && (layoutItem.type === 'subobject-view')) { domainObject = item; } else { domainObject = this.selection[0][1].context.item; if (!item) { //if this isn't a sub-object this.initialStyles = {}; - layoutItem = this.selection[0][0].context.layoutItem; this.initialStyles = this.getStyleProperties(layoutItem); this.itemId = layoutItem.id; } else { From cdc7c1af648bc9ff2e139d86070d9c12fcfa7646 Mon Sep 17 00:00:00 2001 From: Joshi Date: Mon, 6 Apr 2020 14:04:11 -0700 Subject: [PATCH 5/8] Removes unused data --- src/ui/inspector/StylesInspectorView.vue | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/ui/inspector/StylesInspectorView.vue b/src/ui/inspector/StylesInspectorView.vue index 7af1953f95..ce8b4f29e8 100644 --- a/src/ui/inspector/StylesInspectorView.vue +++ b/src/ui/inspector/StylesInspectorView.vue @@ -61,13 +61,6 @@ export default { components: { ConditionalStylesView }, - data() { - return { - // layoutItem, - // styleProps, - // isChildItem - } - }, template: '' }); } From e05b0bb562708dac1cf4f530fd5f08c2cbd9db4c Mon Sep 17 00:00:00 2001 From: Joshi Date: Tue, 7 Apr 2020 11:34:48 -0700 Subject: [PATCH 6/8] Address review comments: Fixes telemetry view visibility and styling issue Removes none option for border and background styles for drawing objects --- .../inspector/ConditionalStylesView.vue | 52 ++++------ .../components/inspector/StyleEditor.vue | 51 +++++++--- src/plugins/condition/utils/styleUtils.js | 96 +++++++++++++++---- .../components/TelemetryView.vue | 8 +- 4 files changed, 136 insertions(+), 71 deletions(-) diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue index 45b0c63eef..7a978d2e23 100644 --- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue +++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue @@ -33,6 +33,7 @@
@@ -105,7 +106,7 @@ import ConditionDescription from "@/plugins/condition/components/ConditionDescri import ConditionError from "@/plugins/condition/components/ConditionError.vue"; import Vue from 'vue'; import PreviewAction from "@/ui/preview/PreviewAction.js"; -import { getStyleProp } from "@/plugins/condition/utils/styleUtils"; +import {getInitialStyleForItem} from "@/plugins/condition/utils/styleUtils"; export default { name: 'ConditionalStylesView', @@ -126,15 +127,8 @@ export default { isEditing: this.openmct.editor.isEditing(), conditions: undefined, conditionsLoaded: false, - navigateToPath: '' - } - }, - watch: { - domainObject: { - handler(newDomainObject) { - this.domainObject = newDomainObject; - }, - deep: true + navigateToPath: '', + preventNone: false } }, destroyed() { @@ -143,13 +137,7 @@ export default { } }, mounted() { - this.canHide = false; this.itemId = ''; - this.initialStyles = this.getStyleProperties({ - fill: 'transparent', - stroke: 'transparent', - color: 'transparent' - }); this.getDomainObjectFromSelection(); this.previewAction = new PreviewAction(this.openmct); if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) { @@ -165,44 +153,40 @@ export default { this.openmct.editor.on('isEditing', this.setEditState); }, methods: { - getStyleProperties(item) { - let styleProps = {}; - Object.keys(item).forEach((key) => { - Object.assign(styleProps, getStyleProp(key, item[key])); - }); - return styleProps; + isItemType(type, item) { + return item && (item.type === type); + }, + isDrawingItem(item) { + return !this.isItemType('subobject-view', item) && !this.isItemType('telemetry-view', item); }, getDomainObjectFromSelection() { + let layoutItem; let domainObject; if (this.selection[0].length > 1) { //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control. //The second item in the this.selection[0] list is the container object (usually a layout) - let layoutItem = this.selection[0][0].context.layoutItem; + layoutItem = this.selection[0][0].context.layoutItem; const item = this.selection[0][0].context.item; this.canHide = true; - if (layoutItem && (layoutItem.type === 'subobject-view')) { + if (item && this.isItemType('subobject-view', layoutItem)) { domainObject = item; } else { domainObject = this.selection[0][1].context.item; - if (!item) { - //if this isn't a sub-object - this.initialStyles = {}; - this.initialStyles = this.getStyleProperties(layoutItem); - this.itemId = layoutItem.id; - } else { - layoutItem = Object.assign({}, { id: this.selection[0][0].context.layoutItem.id }, item); - this.itemId = layoutItem.id; - } + this.itemId = layoutItem.id; + this.preventNone = this.isDrawingItem(layoutItem); } } else { domainObject = this.selection[0][0].context.item; } this.domainObject = domainObject; + this.initialStyles = getInitialStyleForItem(domainObject, layoutItem); if (this.stopObserving) { this.stopObserving(); } - this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject); + if (this.domainObject) { + this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject); + } }, initialize(conditionSetDomainObject) { //If there are new conditions in the conditionSet we need to set those styles to default diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue index b830c1fc3d..8bb480190d 100644 --- a/src/plugins/condition/components/inspector/StyleEditor.vue +++ b/src/plugins/condition/components/inspector/StyleEditor.vue @@ -24,7 +24,7 @@
- - - - - { + style[key] = this.normalizeValue(this.styleItem.style[key]); + }); + return style; + }, borderColorOption() { + let value = this.styleItem.style.border.replace('1px solid ', ''); return { icon: 'icon-line-horz', title: STYLE_CONSTANTS.borderColorTitle, - value: this.styleItem.style.border.replace('1px solid ', ''), + value: this.normalizeValue(value), property: 'border', - isEditing: this.isEditing + isEditing: this.isEditing, + preventNone: this.preventNone } }, backgroundColorOption() { + let value = this.styleItem.style.backgroundColor; return { icon: 'icon-paint-bucket', title: STYLE_CONSTANTS.backgroundColorTitle, - value: this.styleItem.style.backgroundColor, + value: this.normalizeValue(value), property: 'backgroundColor', - isEditing: this.isEditing + isEditing: this.isEditing, + preventNone: this.preventNone } }, colorOption() { + let value = this.styleItem.style.color; return { icon: 'icon-font', title: STYLE_CONSTANTS.textColorTitle, - value: this.styleItem.style.color, + value: this.normalizeValue(value), property: 'color', isEditing: this.isEditing } @@ -138,7 +154,8 @@ export default { property: 'imageUrl', formKeys: ['url'], value: {url: this.styleItem.style.imageUrl}, - isEditing: this.isEditing + isEditing: this.isEditing, + preventNone: this.preventNone } }, isStyleInvisibleOption() { @@ -146,6 +163,7 @@ export default { value: this.styleItem.style.isStyleInvisible, property: 'isStyleInvisible', isEditing: this.isEditing, + preventNone: this.preventNone, options: [ { value: '', @@ -163,6 +181,15 @@ export default { } }, methods: { + hasProperty(property) { + return property !== undefined; + }, + normalizeValue(value) { + if (!value) { + return 'transparent'; + } + return value; + }, updateStyleValue(value, item) { if (item.property === 'border') { value = '1px solid ' + value; diff --git a/src/plugins/condition/utils/styleUtils.js b/src/plugins/condition/utils/styleUtils.js index 10dcb986f1..a89644417d 100644 --- a/src/plugins/condition/utils/styleUtils.js +++ b/src/plugins/condition/utils/styleUtils.js @@ -19,27 +19,81 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +const NONE_VALUE = 'transparent'; -export const getStyleProp = (key, defaultValue) => { - let styleProp = undefined; - switch(key) { - case 'fill': styleProp = { - backgroundColor: defaultValue || 'transparent' - }; - break; - case 'stroke': styleProp = { - border: '1px solid ' + (defaultValue || 'transparent') - }; - break; - case 'color': styleProp = { - color: defaultValue || 'transparent' - }; - break; - case 'url': styleProp = { - imageUrl: defaultValue || 'transparent' - }; - break; +const styleProps = { + backgroundColor: { + svgProperty: 'fill', + noneValue: NONE_VALUE, + applicableForType: type => { + return !type ? true : (type === 'text-view' || + type === 'telemetry-view' || + type === 'box-view' || + type === 'subobject-view'); + } + }, + border: { + svgProperty: 'stroke', + noneValue: NONE_VALUE, + applicableForType: type => { + return !type ? true : (type === 'text-view' || + type === 'telemetry-view' || + type === 'box-view' || + type === 'image-view' || + type === 'line-view'|| + type === 'subobject-view'); + } + }, + color: { + svgProperty: 'color', + noneValue: 'NONE_VALUE', + applicableForType: type => { + return !type ? true : (type === 'text-view' || + type === 'telemetry-view'|| + type === 'subobject-view'); + } + }, + imageUrl: { + svgProperty: 'url', + noneValue: '', + applicableForType: type => { + return !type ? false : type === 'image-view'; + } } - - return styleProp; +}; + +const getStaticStyleForItem = (domainObject, id) => { + let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles; + if (domainObjectStyles) { + if (id && domainObjectStyles[id] && domainObjectStyles[id].staticStyle) { + return domainObjectStyles[id].staticStyle.style; + } else if (domainObjectStyles.staticStyle) { + return domainObjectStyles.staticStyle.style; + } + } +}; + +//Returns either existing static styles or uses SVG defaults if available +export const getInitialStyleForItem = (domainObject, item) => { + const type = item && item.type; + const id = item && item.id; + let style = {}; + + let staticStyle = getStaticStyleForItem(domainObject, id); + + const properties = Object.keys(styleProps); + properties.forEach(property => { + const styleProp = styleProps[property]; + if (styleProp.applicableForType(type)) { + let defaultValue; + if (staticStyle) { + defaultValue = staticStyle[property]; + } else if (item) { + defaultValue = item[styleProp.svgProperty]; + } + style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue; + } + }); + + return style; }; diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 7513ccda39..382d9caf7a 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -30,7 +30,8 @@
{{ telemetryValue }} @@ -135,7 +135,7 @@ export default { } }, styleClass() { - return this.telemetryObjectStyle && !!this.telemetryObjectStyle.isStyleInvisible; + return this.telemetryObjectStyle && this.telemetryObjectStyle.isStyleInvisible; }, telemetryObjectStyle() { let styleObj = Object.assign({}, this.itemStyle); From f510f3edd00f5d1c6f719e8218bb6df77d1fa475 Mon Sep 17 00:00:00 2001 From: Joshi Date: Tue, 7 Apr 2020 11:59:24 -0700 Subject: [PATCH 7/8] Removes missed code --- src/plugins/condition/components/inspector/StyleEditor.vue | 4 +--- src/plugins/displayLayout/components/TelemetryView.vue | 2 -- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue index 8bb480190d..8552800f61 100644 --- a/src/plugins/condition/components/inspector/StyleEditor.vue +++ b/src/plugins/condition/components/inspector/StyleEditor.vue @@ -154,8 +154,7 @@ export default { property: 'imageUrl', formKeys: ['url'], value: {url: this.styleItem.style.imageUrl}, - isEditing: this.isEditing, - preventNone: this.preventNone + isEditing: this.isEditing } }, isStyleInvisibleOption() { @@ -163,7 +162,6 @@ export default { value: this.styleItem.style.isStyleInvisible, property: 'isStyleInvisible', isEditing: this.isEditing, - preventNone: this.preventNone, options: [ { value: '', diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 382d9caf7a..d85e44b36d 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -37,8 +37,6 @@
{{ domainObject.name }} From 73b0fc6f79cd28dec5f64ee2e9d8fb396b12376e Mon Sep 17 00:00:00 2001 From: Joshi Date: Wed, 8 Apr 2020 11:46:12 -0700 Subject: [PATCH 8/8] Removes preventNone as per conversation with UX designer. --- .../components/inspector/ConditionalStylesView.vue | 12 ++++-------- .../condition/components/inspector/StyleEditor.vue | 9 ++------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue index 7a978d2e23..a960790f87 100644 --- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue +++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue @@ -33,7 +33,6 @@
@@ -127,8 +126,7 @@ export default { isEditing: this.openmct.editor.isEditing(), conditions: undefined, conditionsLoaded: false, - navigateToPath: '', - preventNone: false + navigateToPath: '' } }, destroyed() { @@ -156,9 +154,6 @@ export default { isItemType(type, item) { return item && (item.type === type); }, - isDrawingItem(item) { - return !this.isItemType('subobject-view', item) && !this.isItemType('telemetry-view', item); - }, getDomainObjectFromSelection() { let layoutItem; let domainObject; @@ -173,8 +168,9 @@ export default { domainObject = item; } else { domainObject = this.selection[0][1].context.item; - this.itemId = layoutItem.id; - this.preventNone = this.isDrawingItem(layoutItem); + if (layoutItem) { + this.itemId = layoutItem.id; + } } } else { domainObject = this.selection[0][0].context.item; diff --git a/src/plugins/condition/components/inspector/StyleEditor.vue b/src/plugins/condition/components/inspector/StyleEditor.vue index 8552800f61..1828d67348 100644 --- a/src/plugins/condition/components/inspector/StyleEditor.vue +++ b/src/plugins/condition/components/inspector/StyleEditor.vue @@ -83,9 +83,6 @@ export default { isEditing: { type: Boolean }, - preventNone: { - type: Boolean - }, styleItem: { type: Object, required: true @@ -107,8 +104,7 @@ export default { title: STYLE_CONSTANTS.borderColorTitle, value: this.normalizeValue(value), property: 'border', - isEditing: this.isEditing, - preventNone: this.preventNone + isEditing: this.isEditing } }, backgroundColorOption() { @@ -118,8 +114,7 @@ export default { title: STYLE_CONSTANTS.backgroundColorTitle, value: this.normalizeValue(value), property: 'backgroundColor', - isEditing: this.isEditing, - preventNone: this.preventNone + isEditing: this.isEditing } }, colorOption() {