mirror of https://github.com/status-im/consul.git
ui: Remove custom css-vars 'polyfill' and use native CSS props (#7249)
* ui: Remove custom css-vars 'polyfill' and use native CSS props Previously we used a sort of polyfill for certain places where we needed CSS property-like behavior. This meant duplicating code between JS and CSS, specifically some of our SVG icons. We moved to CSS props only in the places where they are beneficial and populated the variables with our already existing SASS variables. This means we no longer have to duplicate CSS and we can remove our custom css-var helper/polyfill.
This commit is contained in:
John Cowen
John Cowen
parent
662c28307c
commit
b6915793d0
|
|
@ -1,19 +0,0 @@
|
||||||
import { helper } from '@ember/component/helper';
|
|
||||||
// TODO: Look at ember-inline-svg
|
|
||||||
const cssVars = {
|
|
||||||
'--decor-border-100': '1px solid',
|
|
||||||
'--decor-border-200': '2px solid',
|
|
||||||
'--decor-radius-300': '3px',
|
|
||||||
'--white': '#FFF',
|
|
||||||
'--gray-500': '#6f7682',
|
|
||||||
'--kubernetes-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" stroke="%23FFF" fill="none"><path d="M10.21 1.002a1.241 1.241 0 0 0-.472.12L3.29 4.201a1.225 1.225 0 0 0-.667.83l-1.591 6.922a1.215 1.215 0 0 0 .238 1.035l4.463 5.55c.234.29.59.46.964.46l7.159-.002c.375 0 .73-.168.964-.459l4.462-5.55c.234-.292.322-.673.238-1.036l-1.593-6.921a1.225 1.225 0 0 0-.667-.83l-6.45-3.08a1.242 1.242 0 0 0-.598-.12z" fill="%23326CE5"/><path d="M10.275 3.357c-.213 0-.386.192-.386.429v.11c.005.136.035.24.052.367.033.27.06.492.043.7a.421.421 0 0 1-.125.2l-.01.163a4.965 4.965 0 0 0-3.22 1.548 6.47 6.47 0 0 1-.138-.099c-.07.01-.139.03-.23-.022-.172-.117-.33-.277-.52-.47-.087-.093-.15-.181-.254-.27L5.4 5.944a.46.46 0 0 0-.269-.101.372.372 0 0 0-.307.136c-.133.167-.09.422.094.57l.006.003.08.065c.11.08.21.122.32.187.231.142.422.26.574.403.06.063.07.175.078.223l.123.11a4.995 4.995 0 0 0-.787 3.483l-.162.047c-.042.055-.103.141-.166.167-.198.063-.422.086-.692.114-.126.01-.236.004-.37.03-.03.005-.07.016-.103.023l-.003.001-.006.002c-.228.055-.374.264-.327.47.047.206.27.331.498.282h.006c.003-.001.005-.003.008-.003l.1-.022c.131-.036.227-.088.346-.133.255-.092.467-.168.673-.198.086-.007.177.053.222.078l.168-.029a5.023 5.023 0 0 0 2.226 2.78l-.07.168c.025.065.053.154.034.218-.075.195-.203.4-.35.628-.07.106-.142.188-.206.309l-.05.104c-.099.212-.026.456.165.548.191.092.43-.005.532-.218h.001v-.001c.015-.03.036-.07.048-.098.055-.126.073-.233.111-.354.102-.257.159-.526.3-.694.038-.046.1-.063.166-.08l.087-.159a4.987 4.987 0 0 0 3.562.01l.083.148c.066.021.138.032.197.12.105.179.177.391.265.648.038.121.057.229.112.354.012.029.033.069.048.099.102.213.341.311.533.219.19-.092.264-.337.164-.549l-.05-.104c-.064-.12-.136-.202-.207-.307-.146-.23-.267-.419-.342-.613-.032-.1.005-.163.03-.228-.015-.017-.047-.111-.065-.156a5.023 5.023 0 0 0 2.225-2.8l.165.03c.058-.039.112-.088.216-.08.206.03.418.106.673.198.12.045.215.098.347.133.028.008.068.015.1.022l.007.002.006.001c.229.05.45-.076.498-.282.047-.206-.1-.415-.327-.47l-.112-.027c-.134-.025-.243-.019-.37-.03-.27-.027-.494-.05-.692-.113-.081-.031-.139-.128-.167-.167l-.156-.046a4.997 4.997 0 0 0-.804-3.474l.137-.123c.006-.069.001-.142.073-.218.151-.143.343-.261.574-.404.11-.064.21-.106.32-.187.025-.018.06-.047.086-.068.185-.148.227-.403.094-.57-.133-.166-.39-.182-.575-.034-.027.02-.062.048-.086.068-.104.09-.168.178-.255.27-.19.194-.348.355-.52.471-.075.044-.185.029-.235.026l-.146.104A5.059 5.059 0 0 0 10.7 5.328a9.325 9.325 0 0 1-.009-.172c-.05-.048-.11-.09-.126-.193-.017-.208.011-.43.044-.7.018-.126.047-.23.053-.367l-.001-.11c0-.237-.173-.429-.386-.429zM9.79 6.351l-.114 2.025-.009.004a.34.34 0 0 1-.54.26l-.003.002-1.66-1.177A3.976 3.976 0 0 1 9.79 6.351zm.968 0a4.01 4.01 0 0 1 2.313 1.115l-1.65 1.17-.006-.003a.34.34 0 0 1-.54-.26h-.003L10.76 6.35zm-3.896 1.87l1.516 1.357-.002.008a.34.34 0 0 1-.134.585l-.001.006-1.944.561a3.975 3.975 0 0 1 .565-2.516zm6.813.001a4.025 4.025 0 0 1 .582 2.51l-1.954-.563-.001-.008a.34.34 0 0 1-.134-.585v-.004l1.507-1.35zm-3.712 1.46h.62l.387.483-.139.602-.557.268-.56-.269-.138-.602.387-.482zm1.99 1.652a.339.339 0 0 1 .08.005l.002-.004 2.01.34a3.98 3.98 0 0 1-1.609 2.022l-.78-1.885.002-.003a.34.34 0 0 1 .296-.475zm-3.375.008a.34.34 0 0 1 .308.474l.005.007-.772 1.866a3.997 3.997 0 0 1-1.604-2.007l1.993-.339.003.005a.345.345 0 0 1 .067-.006zm1.683.817a.338.338 0 0 1 .312.179h.008l.982 1.775a3.991 3.991 0 0 1-2.57-.002l.979-1.772h.001a.34.34 0 0 1 .288-.18z" stroke-width=".25" fill="%23FFF"/></g></svg>')`,
|
|
||||||
'--terraform-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>')`,
|
|
||||||
'--nomad-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>')`,
|
|
||||||
'--consul-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>')`,
|
|
||||||
'--aws-color-svg': `url('data:image/svg+xml;charset=UTF-8,<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M13.574 22.395c0 .588.063 1.065.174 1.414.127.35.286.731.509 1.145.08.127.111.254.111.365 0 .16-.095.318-.302.477l-1.001.668a.762.762 0 0 1-.413.143c-.16 0-.318-.08-.477-.223a4.917 4.917 0 0 1-.572-.747c-.16-.27-.318-.572-.493-.938-1.24 1.463-2.797 2.194-4.673 2.194-1.335 0-2.4-.382-3.179-1.145-.779-.763-1.176-1.78-1.176-3.051 0-1.351.477-2.448 1.446-3.274.97-.827 2.257-1.24 3.895-1.24.54 0 1.096.047 1.684.127.588.08 1.192.207 1.828.35V17.5c0-1.209-.254-2.051-.747-2.544-.509-.492-1.367-.73-2.59-.73-.557 0-1.13.063-1.717.206-.588.143-1.16.318-1.717.54a4.56 4.56 0 0 1-.556.207.975.975 0 0 1-.254.047c-.223 0-.334-.158-.334-.492v-.779c0-.254.032-.445.111-.556.08-.112.223-.223.445-.334.556-.286 1.224-.525 2.003-.715a9.636 9.636 0 0 1 2.48-.302c1.89 0 3.273.429 4.164 1.287.874.858 1.319 2.162 1.319 3.91v5.15h.032zM7.12 24.81c.524 0 1.064-.096 1.637-.286.572-.191 1.08-.54 1.51-1.018.254-.302.445-.635.54-1.017.095-.381.159-.842.159-1.383v-.667c-.461-.112-.954-.207-1.462-.27a11.976 11.976 0 0 0-1.494-.096c-1.065 0-1.844.207-2.369.636-.524.43-.778 1.033-.778 1.828 0 .747.19 1.303.588 1.685.381.397.937.588 1.669.588zm12.762 1.716c-.286 0-.476-.048-.604-.159-.127-.095-.238-.318-.333-.62L15.21 13.462c-.096-.318-.143-.524-.143-.636 0-.254.127-.397.381-.397h1.558c.302 0 .508.048.62.16.127.094.222.317.317.619l2.67 10.522 2.48-10.522c.08-.318.175-.525.302-.62.127-.095.35-.159.636-.159h1.271c.302 0 .509.048.636.16.127.094.238.317.302.619l2.511 10.649 2.75-10.65c.095-.317.207-.524.318-.619.127-.095.334-.159.62-.159h1.478c.254 0 .397.127.397.397 0 .08-.016.16-.032.255a2.261 2.261 0 0 1-.11.397l-3.831 12.286c-.096.318-.207.525-.334.62-.127.095-.334.159-.604.159h-1.367c-.302 0-.509-.048-.636-.159s-.238-.318-.302-.636l-2.463-10.251-2.448 10.235c-.08.318-.175.525-.302.636-.127.111-.35.16-.636.16h-1.367zm20.424.43c-.826 0-1.653-.096-2.447-.287-.795-.19-1.415-.397-1.828-.636-.255-.143-.43-.302-.493-.445a1.122 1.122 0 0 1-.095-.445v-.81c0-.334.127-.493.365-.493a.9.9 0 0 1 .286.048c.096.032.239.095.398.159.54.238 1.128.429 1.748.556.636.127 1.256.19 1.891.19 1.002 0 1.78-.174 2.321-.524.54-.35.826-.858.826-1.51 0-.445-.143-.81-.429-1.112-.286-.302-.826-.573-1.605-.827l-2.305-.715c-1.16-.366-2.018-.906-2.543-1.621-.524-.7-.794-1.478-.794-2.305 0-.667.143-1.255.429-1.764a4.087 4.087 0 0 1 1.144-1.303 5.045 5.045 0 0 1 1.653-.827 6.927 6.927 0 0 1 2.003-.27c.35 0 .715.016 1.065.063.365.048.699.112 1.033.175.318.08.62.16.906.255.286.095.508.19.667.286.223.127.382.254.477.397.095.127.143.302.143.525v.747c0 .333-.127.508-.365.508-.128 0-.334-.063-.604-.19-.906-.414-1.924-.62-3.052-.62-.906 0-1.621.143-2.114.445-.493.302-.747.763-.747 1.414 0 .445.159.827.477 1.129.318.302.906.604 1.748.874l2.257.715c1.145.366 1.971.874 2.464 1.526.492.652.73 1.399.73 2.225 0 .684-.142 1.303-.412 1.844a4.275 4.275 0 0 1-1.16 1.398c-.493.398-1.081.684-1.765.89a7.558 7.558 0 0 1-2.273.334z" fill="%23252F3E" fill-rule="nonzero"/><path d="M43.311 34.68c-5.229 3.863-12.826 5.913-19.359 5.913-9.155 0-17.404-3.385-23.634-9.012-.493-.445-.048-1.049.54-.699 6.74 3.91 15.052 6.278 23.65 6.278 5.802 0 12.175-1.208 18.04-3.687.875-.398 1.622.572.763 1.208zm2.178-2.479c-.668-.858-4.419-.413-6.12-.206-.508.063-.588-.382-.127-.716 2.988-2.098 7.9-1.494 8.472-.794.572.715-.159 5.626-2.956 7.979-.43.365-.843.174-.652-.302.636-1.574 2.05-5.118 1.383-5.96z" fill="%23F90"/></g></svg>')`,
|
|
||||||
};
|
|
||||||
export function cssVar(params, hash) {
|
|
||||||
return typeof cssVars[params[0]] !== 'undefined' ? cssVars[params[0]] : params[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default helper(cssVar);
|
|
||||||
|
|
@ -7,7 +7,7 @@ export function serviceExternalSource(params, hash) {
|
||||||
source = get(params[0], 'Meta.external-source');
|
source = get(params[0], 'Meta.external-source');
|
||||||
}
|
}
|
||||||
const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix;
|
const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix;
|
||||||
if (source) {
|
if (source && ['kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) {
|
||||||
return `${prefix}${source}`;
|
return `${prefix}${source}`;
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ $arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24"
|
||||||
$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%232eb039"/></svg>');
|
$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%232eb039"/></svg>');
|
||||||
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
|
$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 13h14.2l-3.6 3.6L15 18l6-6-6-6-1.4 1.4 3.6 3.6H3v2z" fill="%23000"/></svg>');
|
||||||
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
|
$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 21V6.8l3.6 3.6L18 9l-6-6-6 6 1.4 1.4L11 6.8V21h2z" fill="%23000"/></svg>');
|
||||||
|
$aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M13.574 22.395c0 .588.063 1.065.174 1.414.127.35.286.731.509 1.145.08.127.111.254.111.365 0 .16-.095.318-.302.477l-1.001.668a.762.762 0 0 1-.413.143c-.16 0-.318-.08-.477-.223a4.917 4.917 0 0 1-.572-.747c-.16-.27-.318-.572-.493-.938-1.24 1.463-2.797 2.194-4.673 2.194-1.335 0-2.4-.382-3.179-1.145-.779-.763-1.176-1.78-1.176-3.051 0-1.351.477-2.448 1.446-3.274.97-.827 2.257-1.24 3.895-1.24.54 0 1.096.047 1.684.127.588.08 1.192.207 1.828.35V17.5c0-1.209-.254-2.051-.747-2.544-.509-.492-1.367-.73-2.59-.73-.557 0-1.13.063-1.717.206-.588.143-1.16.318-1.717.54a4.56 4.56 0 0 1-.556.207.975.975 0 0 1-.254.047c-.223 0-.334-.158-.334-.492v-.779c0-.254.032-.445.111-.556.08-.112.223-.223.445-.334.556-.286 1.224-.525 2.003-.715a9.636 9.636 0 0 1 2.48-.302c1.89 0 3.273.429 4.164 1.287.874.858 1.319 2.162 1.319 3.91v5.15h.032zM7.12 24.81c.524 0 1.064-.096 1.637-.286.572-.191 1.08-.54 1.51-1.018.254-.302.445-.635.54-1.017.095-.381.159-.842.159-1.383v-.667c-.461-.112-.954-.207-1.462-.27a11.976 11.976 0 0 0-1.494-.096c-1.065 0-1.844.207-2.369.636-.524.43-.778 1.033-.778 1.828 0 .747.19 1.303.588 1.685.381.397.937.588 1.669.588zm12.762 1.716c-.286 0-.476-.048-.604-.159-.127-.095-.238-.318-.333-.62L15.21 13.462c-.096-.318-.143-.524-.143-.636 0-.254.127-.397.381-.397h1.558c.302 0 .508.048.62.16.127.094.222.317.317.619l2.67 10.522 2.48-10.522c.08-.318.175-.525.302-.62.127-.095.35-.159.636-.159h1.271c.302 0 .509.048.636.16.127.094.238.317.302.619l2.511 10.649 2.75-10.65c.095-.317.207-.524.318-.619.127-.095.334-.159.62-.159h1.478c.254 0 .397.127.397.397 0 .08-.016.16-.032.255a2.261 2.261 0 0 1-.11.397l-3.831 12.286c-.096.318-.207.525-.334.62-.127.095-.334.159-.604.159h-1.367c-.302 0-.509-.048-.636-.159s-.238-.318-.302-.636l-2.463-10.251-2.448 10.235c-.08.318-.175.525-.302.636-.127.111-.35.16-.636.16h-1.367zm20.424.43c-.826 0-1.653-.096-2.447-.287-.795-.19-1.415-.397-1.828-.636-.255-.143-.43-.302-.493-.445a1.122 1.122 0 0 1-.095-.445v-.81c0-.334.127-.493.365-.493a.9.9 0 0 1 .286.048c.096.032.239.095.398.159.54.238 1.128.429 1.748.556.636.127 1.256.19 1.891.19 1.002 0 1.78-.174 2.321-.524.54-.35.826-.858.826-1.51 0-.445-.143-.81-.429-1.112-.286-.302-.826-.573-1.605-.827l-2.305-.715c-1.16-.366-2.018-.906-2.543-1.621-.524-.7-.794-1.478-.794-2.305 0-.667.143-1.255.429-1.764a4.087 4.087 0 0 1 1.144-1.303 5.045 5.045 0 0 1 1.653-.827 6.927 6.927 0 0 1 2.003-.27c.35 0 .715.016 1.065.063.365.048.699.112 1.033.175.318.08.62.16.906.255.286.095.508.19.667.286.223.127.382.254.477.397.095.127.143.302.143.525v.747c0 .333-.127.508-.365.508-.128 0-.334-.063-.604-.19-.906-.414-1.924-.62-3.052-.62-.906 0-1.621.143-2.114.445-.493.302-.747.763-.747 1.414 0 .445.159.827.477 1.129.318.302.906.604 1.748.874l2.257.715c1.145.366 1.971.874 2.464 1.526.492.652.73 1.399.73 2.225 0 .684-.142 1.303-.412 1.844a4.275 4.275 0 0 1-1.16 1.398c-.493.398-1.081.684-1.765.89a7.558 7.558 0 0 1-2.273.334z" fill="%23252F3E" fill-rule="nonzero"/><path d="M43.311 34.68c-5.229 3.863-12.826 5.913-19.359 5.913-9.155 0-17.404-3.385-23.634-9.012-.493-.445-.048-1.049.54-.699 6.74 3.91 15.052 6.278 23.65 6.278 5.802 0 12.175-1.208 18.04-3.687.875-.398 1.622.572.763 1.208zm2.178-2.479c-.668-.858-4.419-.413-6.12-.206-.508.063-.588-.382-.127-.716 2.988-2.098 7.9-1.494 8.472-.794.572.715-.159 5.626-2.956 7.979-.43.365-.843.174-.652-.302.636-1.574 2.05-5.118 1.383-5.96z" fill="%23F90"/></g></svg>');
|
||||||
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
|
$calendar-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.429 19.143h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428v-1.429h-1.428v1.429zm-2.857 0h1.428v-1.429H14.43v1.429zm-2.858 0H13v-1.429h-1.429v1.429zm-2.857 0h1.429v-1.429H8.714v1.429zm-2.857 0h1.429v-1.429H5.857v1.429zm11.429-2.857h1.428V12h-1.428v1.429zm-2.857 0h1.428V12H14.43v1.429zm-2.858 0H13V12h-1.429v1.429zm-2.857 0h1.429V12H8.714v1.429zm-2.857 0h1.429V12H5.857v1.429zm11.429-2.858h1.428V9.143h-1.428v1.428zm-2.857 0h1.428V9.143H14.43v1.428zm-2.858 0H13V9.143h-1.429v1.428zm-2.857 0h1.429V9.143H8.714v1.428zm7.143-5.714h1.429V2h-1.429v2.857zm-8.571 0h1.428V2H7.286v2.857zM4.429 20.571h15.714V7.714H4.429v12.857zM20.143 3.43h-1.429v2.14c0 .4-.314.715-.714.715h-2.857a.707.707 0 0 1-.714-.715V3.43h-4.286v2.14c0 .4-.314.715-.714.715H6.57a.707.707 0 0 1-.714-.715V3.43H4.43A1.43 1.43 0 0 0 3 4.857v15.714C3 21.357 3.643 22 4.429 22h15.714c.786 0 1.428-.643 1.428-1.429V4.857c0-.786-.642-1.428-1.428-1.428z" fill-rule="evenodd" fill="%23000"/></svg>');
|
||||||
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
|
$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="%23000"/></svg>');
|
||||||
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="%23000"/></svg>');
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,12 @@
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
||||||
|
--kubernetes-icon: #{$kubernetes-logo-color-svg};
|
||||||
|
--terraform-icon: #{$terraform-logo-color-svg};
|
||||||
|
--nomad-icon: #{$nomad-logo-color-svg};
|
||||||
|
--consul-icon: #{$consul-logo-color-svg};
|
||||||
|
--aws-icon: #{$aws-logo-color-svg};
|
||||||
}
|
}
|
||||||
%app-view h2,
|
%app-view h2,
|
||||||
%app-view fieldset {
|
%app-view fieldset {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,15 @@
|
||||||
@import './custom-query';
|
@import './custom-query';
|
||||||
|
|
||||||
|
// TODO: Setup only the CSS props we actually need here
|
||||||
|
// potentially see if our compiled can automatically remove
|
||||||
|
// unused CSS props
|
||||||
|
:root {
|
||||||
|
--white: #{$white};
|
||||||
|
--decor-border-100: #{$decor-border-100};
|
||||||
|
--decor-radius-300: #{$decor-radius-300};
|
||||||
|
--gray-500: #{$gray-500};
|
||||||
|
}
|
||||||
|
|
||||||
$gray: $gray-200;
|
$gray: $gray-200;
|
||||||
$gray-025: #fafbfc;
|
$gray-025: #fafbfc;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,10 @@
|
||||||
{{selected.nodes}} {
|
{{selected.nodes}} {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
|
|
||||||
background-color: {{css-var '--white'}};
|
background-color: var(--white);
|
||||||
border: {{css-var '--decor-border-100'}};
|
border: var(--decor-border-100);
|
||||||
border-radius: {{css-var '--decor-radius-300'}};
|
border-radius: var(--decor-radius-300);
|
||||||
border-color: {{css-var '--gray-500'}};
|
border-color: var(--gray-500);
|
||||||
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,13 @@
|
||||||
{{#block-slot name='row'}}
|
{{#block-slot name='row'}}
|
||||||
<td data-test-service-name="{{item.Service}}">
|
<td data-test-service-name="{{item.Service}}">
|
||||||
<a href={{href-to 'dc.services.show' item.Service}}>
|
<a href={{href-to 'dc.services.show' item.Service}}>
|
||||||
<span data-test-external-source="{{service/external-source item}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item) '-color-svg') 'none')}}}></span>
|
{{#let (service/external-source item) as |externalSource| }}
|
||||||
|
{{#if externalSource }}
|
||||||
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
|
||||||
|
{{else}}
|
||||||
|
<span></span>
|
||||||
|
{{/if}}
|
||||||
|
{{/let}}
|
||||||
{{item.Service}}{{#if (not-eq item.ID item.Service) }} <em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
|
{{item.Service}}{{#if (not-eq item.ID item.Service) }} <em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,15 @@
|
||||||
<th>Service Checks</th>
|
<th>Service Checks</th>
|
||||||
{{/block-slot}}
|
{{/block-slot}}
|
||||||
{{#block-slot name='row'}}
|
{{#block-slot name='row'}}
|
||||||
<td data-test-id="{{item.Service.ID}}">
|
<td data-test-id={{item.Service.ID}}>
|
||||||
<a href={{href-to 'dc.services.instance' item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
|
<a href={{href-to 'dc.services.instance' item.Service.Service item.Node.Node (or item.Service.ID item.Service.Service)}}>
|
||||||
<span data-test-external-source="{{service/external-source item.Service}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item.Service) '-color-svg') 'none')}}}></span>
|
{{#let (service/external-source item.Service) as |externalSource| }}
|
||||||
|
{{#if externalSource }}
|
||||||
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
|
||||||
|
{{else}}
|
||||||
|
<span></span>
|
||||||
|
{{/if}}
|
||||||
|
{{/let}}
|
||||||
{{or item.Service.ID item.Service.Service}}
|
{{or item.Service.ID item.Service.Service}}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,13 @@
|
||||||
{{#block-slot name='row'}}
|
{{#block-slot name='row'}}
|
||||||
<td data-test-service="{{item.Name}}" style={{remainingWidth}}>
|
<td data-test-service="{{item.Name}}" style={{remainingWidth}}>
|
||||||
<a href={{href-to 'dc.services.show' item.Name}}>
|
<a href={{href-to 'dc.services.show' item.Name}}>
|
||||||
<span data-test-external-source="{{service/external-source item}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item) '-color-svg') 'none')}}}></span>
|
{{#let (service/external-source item) as |externalSource| }}
|
||||||
|
{{#if externalSource }}
|
||||||
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
|
||||||
|
{{else}}
|
||||||
|
<span></span>
|
||||||
|
{{/if}}
|
||||||
|
{{/let}}
|
||||||
{{item.Name}}
|
{{item.Name}}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,11 @@
|
||||||
{{#block-slot name='header'}}
|
{{#block-slot name='header'}}
|
||||||
<h1>
|
<h1>
|
||||||
{{ item.ID }}
|
{{ item.ID }}
|
||||||
{{#with (service/external-source item) as |externalSource| }}
|
{{#let (service/external-source item) as |externalSource| }}
|
||||||
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg| }}
|
{{#if externalSource }}
|
||||||
{{#if (not-eq bg 'none') }}
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
|
||||||
<span data-test-external-source="{{externalSource}}" style={{{ concat 'background-image:' bg }}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/with}}
|
{{/let}}
|
||||||
{{/with}}
|
|
||||||
{{#if (eq item.Kind 'connect-proxy')}}
|
{{#if (eq item.Kind 'connect-proxy')}}
|
||||||
<span class="kind-proxy">Proxy</span>
|
<span class="kind-proxy">Proxy</span>
|
||||||
{{else if (eq item.Kind 'mesh-gateway')}}
|
{{else if (eq item.Kind 'mesh-gateway')}}
|
||||||
|
|
|
||||||
|
|
@ -11,13 +11,11 @@
|
||||||
{{#block-slot name='header'}}
|
{{#block-slot name='header'}}
|
||||||
<h1>
|
<h1>
|
||||||
{{item.Service.Service}}
|
{{item.Service.Service}}
|
||||||
{{#with (service/external-source item.Service) as |externalSource|}}
|
{{#let (service/external-source item.Service) as |externalSource| }}
|
||||||
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}}
|
{{#if externalSource }}
|
||||||
{{#if (not-eq bg 'none')}}
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
|
||||||
<span data-test-external-source={{externalSource}} style={{{concat 'background-image:' bg}}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/with}}
|
{{/let}}
|
||||||
{{/with}}
|
|
||||||
{{#if (eq item.Service.Kind 'connect-proxy')}}
|
{{#if (eq item.Service.Kind 'connect-proxy')}}
|
||||||
<span class="kind-proxy">Proxy</span>
|
<span class="kind-proxy">Proxy</span>
|
||||||
{{else if (eq item.Service.Kind 'mesh-gateway')}}
|
{{else if (eq item.Service.Kind 'mesh-gateway')}}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
import { module, test } from 'qunit';
|
|
||||||
import { setupRenderingTest } from 'ember-qunit';
|
|
||||||
import { render } from '@ember/test-helpers';
|
|
||||||
import hbs from 'htmlbars-inline-precompile';
|
|
||||||
|
|
||||||
module('helper:css-var', function(hooks) {
|
|
||||||
setupRenderingTest(hooks);
|
|
||||||
|
|
||||||
// Replace this with your real tests.
|
|
||||||
test("it renders nothing if the variable doesn't exist", async function(assert) {
|
|
||||||
this.set('inputValue', '1234');
|
|
||||||
|
|
||||||
await render(hbs`{{css-var inputValue}}`);
|
|
||||||
|
|
||||||
assert.dom('*').hasText('');
|
|
||||||
});
|
|
||||||
test("it renders a default if the variable doesn't exist", async function(assert) {
|
|
||||||
this.set('inputValue', '1234');
|
|
||||||
|
|
||||||
await render(hbs`{{css-var inputValue 'none'}}`);
|
|
||||||
|
|
||||||
assert.dom('*').hasText('none');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue