mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-25 01:25:36 -05:00
Fixing icons and styling in Query Plan (#18328)
* Fixing icons and styling * Fixng some hc styling
This commit is contained in:
Aasim Khan
@@ -248,3 +248,17 @@ export let queryPlanNodeIconPaths =
|
||||
|
||||
unionAll: imageBasePath + 'union_all.png'
|
||||
};
|
||||
|
||||
const parentContainer = 'qps-container';
|
||||
export const savePlanIconClassNames = [parentContainer, 'save-plan-icon'].join(' ');
|
||||
export const openPropertiesIconClassNames = [parentContainer, 'open-properties-icon'].join(' ');
|
||||
export const openQueryIconClassNames = [parentContainer, 'open-query-icon'].join(' ');
|
||||
export const openPlanFileIconClassNames = [parentContainer, 'open-plan-file-icon'].join(' ');
|
||||
export const saveIconClassNames = [parentContainer, 'save-icon'].join(' ');
|
||||
export const searchIconClassNames = [parentContainer, 'search-icon'].join(' ');
|
||||
export const sortAlphabeticallyIconClassNames = [parentContainer, 'sort-alphabetically-icon'].join(' ');
|
||||
export const sortByDisplayOrderIconClassNames = [parentContainer, 'sort-display-order-icon'].join(' ');
|
||||
export const zoomInIconClassNames = [parentContainer, 'zoom-in-icon'].join(' ');
|
||||
export const zoomOutIconClassNames = [parentContainer, 'zoom-out-icon'].join(' ');
|
||||
export const customZoomIconClassNames = [parentContainer, 'custom-zoom-icon'].join(' ');
|
||||
export const zoomToFitIconClassNames = [parentContainer, 'zoom-to-fit-icon'].join(' ');
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F6F6F6;fill-opacity:0;}
|
||||
.st1{fill:#F6F6F6;}
|
||||
.st2{fill:#424242;}
|
||||
.st3{fill:#F0EFF1;}
|
||||
</style>
|
||||
<g id="canvas">
|
||||
<path class="st0" d="M16,16H0V0h16V16z"/>
|
||||
</g>
|
||||
<path id="outline" class="st1" d="M16,5.8c0-3.2-2.6-5.7-5.8-5.8C7,0,4.4,2.6,4.3,5.8c0,1,0.3,2,0.8,2.9l-4.7,4.7
|
||||
c-0.6,0.6-0.6,1.5,0,2.1c0.6,0.6,1.5,0.6,2.1,0l4.7-4.7c0.4,0.3,0.9,0.4,1.3,0.6l-0.8,0.8L7,16h1.4l2.4-0.8l5.2-5.1l-1-1
|
||||
C15.6,8.1,16,7,16,5.8z"/>
|
||||
<path id="iconBg" class="st2" d="M10.4,9.6c-0.1,0-0.2,0-0.2,0C8,9.7,6.3,8,6.3,5.8C6.3,3.7,8,2,10.2,2C12.3,2,14,3.7,14,5.8v0
|
||||
c0,0.6-0.2,1.2-0.5,1.8l0.7,0.7c0.4-0.7,0.7-1.6,0.7-2.5c0-2.6-2.1-4.7-4.8-4.8v0C7.5,1,5.3,3.2,5.3,5.8c0,1.1,0.4,2.2,1.1,3
|
||||
l-5.3,5.3c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l5.3-5.3c0.7,0.6,1.5,0.9,2.3,1L10.4,9.6z M8.2,15l2.1-0.7l-1.6-1.6L8.2,15z
|
||||
M12.3,9.2l1.6,1.6l0.7-0.7L13,8.5L12.3,9.2z M9.5,12l1.6,1.6l2.1-2.1l-1.6-1.6L9.5,12z"/>
|
||||
<path id="iconFg" class="st3" d="M10.2,9.7c0.1,0,0.2,0,0.2,0L13,7.1l0.6,0.6C13.8,7.1,14,6.5,14,5.8C14,3.7,12.3,2,10.2,2
|
||||
c0,0,0,0,0,0C8,2,6.3,3.7,6.3,5.8C6.3,8,8,9.7,10.2,9.7z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F6F6F6;}
|
||||
.st1{fill:#424242;}
|
||||
.st2{fill:#00539C;}
|
||||
</style>
|
||||
<path id="outline" class="st0" d="M12.2,8L12.2,8h-0.5h-1.3H9H6.5L10,4.5L6.7,1.2L5.9,0.5L3.8,2.6L4.2,3H3.5C1.6,3,0,4.6,0,6.5
|
||||
S1.6,10,3.5,10h0.3l-2,2l4,4h0.1h0.4h1.3H9h2.7h0.5h0l3.8-3.8v-0.4L12.2,8z"/>
|
||||
<path id="iconBg" class="st1" d="M7.3,14.8l0.9,0.4l2.4-6L9.7,8.8L7.3,14.8z M6.1,9.1L5.2,10h0l-2,2l2.9,2.9l0.7-0.7L4.6,12l2-2h0
|
||||
l0.1-0.1L6.1,9.1z M12.8,10L12.8,10l-0.9-0.9l-0.7,0.7l0.1,0.1h0l2,2l-2.1,2.1l0.7,0.7l2.9-2.9L12.8,10z"/>
|
||||
<path id="colorAction" class="st2" d="M1,6.5C1,5.1,2.1,4,3.5,4h3.1L5.2,2.6l0.7-0.7l0,0l0,0l2.6,2.6L5.9,7.2l0,0L5.2,6.5L6.6,5H3.5
|
||||
C2.7,5,2,5.7,2,6.5S2.7,8,3.5,8H4v1H3.5C2.1,9,1,7.9,1,6.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-bg{fill:#424242;} .icon-vs-fg{fill:#F0EFF1;}</style><rect class="icon-canvas-transparent" viewBox="0 0 16 16" id="canvas"/><rect class="icon-vs-out" width="16" height="15" id="outline"/><path class="icon-vs-bg" d="M1 1v13h14v-13h-14zm13 12h-12v-11h12v11zm-4-8h-6v-1h6v1zm-6 1h8v1h-8v-1zm6 3h-6v-1h6v1zm-6 1h8v1h-8v-1z" id="iconBg"/><path class="icon-vs-fg" d="M2 2v11h12v-11h-12zm2 2h6v1h-6v-1zm0 4h6v1h-6v-1zm8 3h-8v-1h8v1zm0-4h-8v-1h8v1z" id="iconFg"/></svg>
|
||||
|
After Width: | Height: | Size: 630 B |
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F6F6F6;fill-opacity:0;}
|
||||
.st1{fill:#F6F6F6;}
|
||||
.st2{fill:#F0EFF1;}
|
||||
.st3{fill:#424242;}
|
||||
.st4{fill:#00539C;}
|
||||
</style>
|
||||
<path id="canvas" class="st0" d="M16,16H0V0h16V16z"/>
|
||||
<path id="outline" class="st1" d="M7.9,0H6.5h-1h-1H2v2.4C1.7,2.5,1.3,2.7,1.1,3H0v13h14v-3h2V0H7.9z"/>
|
||||
<path id="iconFg" class="st2" d="M9.2,2.8L10,3.5l-4.1,4L5,6.7V9H3.5C2.9,9,2.3,8.8,1.8,8.6v5.7h10.5v-3h2V2.8H9.2z"/>
|
||||
<path id="iconBg" class="st3" d="M11,8H5v1h6V8z M7.4,1l2,2H14v8h-1V4H9.5l-2,2H12v5H4V9H3.5C3.3,9,3.2,9,3,8.9V12h9v2H2V8.6
|
||||
C1.6,8.5,1.3,8.2,1,7.9V15h12v-3h2V1H7.4z"/>
|
||||
<path id="colorAction" class="st4" d="M1,5.5C1,4.1,2.1,3,3.5,3h3.1L5.2,1.6l0.7-0.7l0,0l0,0l2.6,2.6L5.9,6.2l0,0L5.2,5.5L6.6,4H3.5
|
||||
C2.7,4,2,4.7,2,5.5S2.7,7,3.5,7H4v1H3.5C2.1,8,1,6.9,1,5.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-action-blue{fill:#00539c;}</style></defs><title>Save_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,2V16H2.586L0,13.414V2A2,2,0,0,1,2,0H14A2,2,0,0,1,16,2Z"/></g><g id="iconBg"><path class="icon-vs-action-blue" d="M6,12H8v3H6ZM15,2V15H12V10H4v5H3L1,13V2A1,1,0,0,1,2,1H14A1,1,0,0,1,15,2ZM13,3H3V7H13Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 570 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-fg{fill:#f0eff1;}.icon-vs-bg{fill:#424242;}</style></defs><title>Search_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M16,5.833a5.84,5.84,0,0,1-5.833,5.834,5.688,5.688,0,0,1-2.913-.8L2.561,15.561A1.5,1.5,0,0,1,.439,13.439L5.133,8.745a5.694,5.694,0,0,1-.8-2.912A5.834,5.834,0,0,1,16,5.833Z"/></g><g id="iconFg"><path class="icon-vs-fg" d="M14,5.833A3.834,3.834,0,1,1,10.167,2,3.838,3.838,0,0,1,14,5.833Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M10.167,1A4.839,4.839,0,0,0,5.333,5.833a4.786,4.786,0,0,0,1.1,3.029L1.147,14.146a.5.5,0,0,0,.707.708L7.138,9.569a4.783,4.783,0,0,0,3.029,1.1,4.834,4.834,0,0,0,0-9.667Zm0,8.667A3.834,3.834,0,1,1,14,5.833,3.838,3.838,0,0,1,10.167,9.667Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 956 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1,.icon-canvas-transparent{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}.icon-white{fill:#fff;}.icon-vs-action-blue{fill:#00539c;}</style></defs><title>SortAscending_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="cls-1" d="M16,9.983l-4.467,4.484-3.3-3.3L6.449,13H8v3H1V13.586L2.586,12H1V9H0V0H9V7.692l1.018,1.014V3.027h3v5.7l1.148-1.145L16,9.412Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M2,11H5L2,14v1H7V14H4.013L7,11.051,6.952,11H7V10H2ZM4.5,3.25,5.2,5H3.8ZM8,1V8H1V1ZM7,7,5,2H4L2,7H3l.4-1H5.6L6,7Z"/></g><g id="iconFg"><path class="icon-white" d="M6,7H7L5,2H4L2,7H3l.4-1H5.6ZM3.8,5l.7-1.75L5.2,5Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M14.154,8.968l.707.707-3.34,3.352L8.169,9.675l.707-.707,2.13,2.122V4h1v7.1Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 938 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}.icon-vs-blue{fill:#1ba1e2}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M5 4v1.6c.2.1.3.3.4.4H15v3H6v2h9v3H5.6c0 .3-.1.5-.2.6-.1.3-.3.6-.5.8-.2.2-.5.4-.8.5-.2 0-.4.1-.6.1H2.2c-.1 0-.3-.1-.4-.1-.2-.1-.4-.2-.5-.3l-.3-.2V8.9S1.6 8 2.1 8H1V6.3c0-.5.3-.9 1-1.1V2.7l-1 .2V1l2.8-1H5v1h10v3H5z" id="outline"/><path class="icon-vs-bg" d="M14 3H6V2h8v1zm0 4H6v1h8V7zm0 5H6v1h8v-1z" id="iconBg"/><path class="icon-vs-blue" d="M4.5 5V4H4V1l-1.6.4v.7l.6-.2V4h-.4v1h1.9zM3.4 9.1s1-1.2 1.1-1.3c.1-.1.1-.2.1-.3v-.3c0-.2 0-.3-.1-.4 0-.3 0-.4-.2-.5-.1-.1-.2-.2-.3-.2-.2-.1-.4-.1-.6-.1H3c-.1 0-1 .3-1 .3v1c0-.1.6-.3.7-.4.1 0 .2-.1.3-.1h.6c.1 0 .2.2.2.4 0 .1-.1.4-.3.6C3.3 7.9 2 9.3 2 9.3v.7h2.6v-.9H3.4zm1.2 4.2c-.2-.4-.6-.5-.6-.5.7-.1.6-.9.6-1 0-.1 0-.2-.1-.4 0-.1-.1-.2-.2-.3-.1-.1-.2-.2-.4-.2-.2-.1-.4-.1-.6-.1H3c-.1 0-.2 0-.3.1-.1 0-.2 0-.2.1-.3-.1-.5 0-.5 0v.7c.5-.3 1.1-.2 1.2-.2.5.1.2.8.1.8s-.1.1-.3.1H2.4v.7h.8c.1 0 .2.1.3.1.1 0 .1.1.2.2 0 .1.1.2.1.3 0 .2-.1.3-.2.4-.1.1-.3.2-.6.2h-.2c-.1 0-.2 0-.3-.1-.1 0-.2-.1-.2-.1-.2 0-.2-.1-.3-.1v.8c.1 0 .1.1.2.1s.2 0 .3.1h.6c.3 0 .5 0 .7-.1.2-.1.4-.2.5-.3.1-.1.2-.2.3-.4 0 0 .1-.5 0-.9z" id="colorImportance"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#F6F6F6;fill-opacity:0;}
|
||||
.st1{fill:#F6F6F6;}
|
||||
.st2{fill:#424242;}
|
||||
</style>
|
||||
<g id="canvas">
|
||||
<path class="st0" d="M16,0v16H0V0H16z"/>
|
||||
</g>
|
||||
<g id="outline">
|
||||
<path class="st1" d="M14.5,16c-0.4,0-0.8-0.2-1.1-0.4L9.9,12C6.8,13.9,2.8,13,1,9.9S0,2.8,3.1,1s7.1-0.9,9,2.1
|
||||
c1.3,2.1,1.3,4.7,0,6.8l3.5,3.5c0.6,0.6,0.6,1.5,0,2.1C15.3,15.8,14.9,16,14.5,16z"/>
|
||||
</g>
|
||||
<g id="iconBg">
|
||||
<path class="st2" d="M14.9,14.1L10.7,10c1.9-2.3,1.6-5.8-0.7-7.8S4.2,0.6,2.3,3S0.6,8.8,3,10.7c2,1.7,5,1.7,7.1,0l4.1,4.1
|
||||
c0.2,0.2,0.5,0.2,0.7,0S15,14.3,14.9,14.1z M6.5,11C4,11,2,9,2,6.5S4,2,6.5,2S11,4,11,6.5C11,9,9,11,6.5,11z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 993 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}.icon-vs-action-blue{fill:#00539c;}</style></defs><title>ZoomIn_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M14.5,16a1.494,1.494,0,0,1-1.061-.439L9.909,12.03A6.51,6.51,0,1,1,12.03,9.909l3.531,3.53A1.5,1.5,0,0,1,14.5,16Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M14.854,14.146l-4.13-4.129a5.509,5.509,0,1,0-.707.707l4.129,4.13a.5.5,0,0,0,.708-.708ZM6.5,11A4.5,4.5,0,1,1,11,6.5,4.505,4.505,0,0,1,6.5,11Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M9,6V7H7V9H6V7H4V6H6V4H7V6Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 788 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}.icon-vs-action-blue{fill:#00539c;}</style></defs><title>ZoomOut_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,0V16H0V0Z"/></g><g id="outline"><path class="icon-vs-out" d="M14.5,16a1.494,1.494,0,0,1-1.061-.439L9.909,12.03A6.51,6.51,0,1,1,12.03,9.909l3.531,3.53A1.5,1.5,0,0,1,14.5,16Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M14.854,14.146l-4.13-4.129a5.509,5.509,0,1,0-.707.707l4.129,4.13a.5.5,0,0,0,.708-.708ZM6.5,11A4.5,4.5,0,1,1,11,6.5,4.505,4.505,0,0,1,6.5,11Z"/></g><g id="colorAction"><path class="icon-vs-action-blue" d="M9,6V7H4V6Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.icon-canvas-transparent,.icon-vs-out{fill:#f6f6f6;}.icon-canvas-transparent{opacity:0;}.icon-vs-bg{fill:#424242;}</style></defs><title>ZoomToFit_16x</title><g id="canvas"><path class="icon-canvas-transparent" d="M16,16H0V0H16Z"/></g><g id="outline"><path class="icon-vs-out" d="M12.977,15s1.03.98,1.053,1h1.944c.008-.007.018-.009.026-.016V13.755l-1-.972V3H13V0H2V3H0V13H2v2Z"/></g><g id="iconBg"><path class="icon-vs-bg" d="M15.349,14.517l-4.257-4.139A4.581,4.581,0,0,0,12.125,7.5,4.625,4.625,0,1,0,7.5,12.126a4.579,4.579,0,0,0,2.885-1.04l4.266,4.147a.5.5,0,0,0,.7-.716ZM3.875,7.5A3.625,3.625,0,1,1,7.5,11.126,3.629,3.629,0,0,1,3.875,7.5ZM8,7h2V8H8v2H7V8H5V7H7V5H8ZM1,4H2v8H1ZM12,2H3V1h9ZM3,13h9v1H3Zm11-1H13V4h1Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 800 B |
@@ -33,7 +33,6 @@ However we always want it to be the width of the container it is resizing.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
/* Container that contains views made by the action-bar actions */
|
||||
@@ -81,8 +80,6 @@ However we always want it to be the width of the container it is resizing.
|
||||
/* query plan header that contains the relative query cost, query statement and recommendations */
|
||||
.qps-container .query-plan .plan .header {
|
||||
padding: 5px;
|
||||
border-top: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
@@ -106,15 +103,14 @@ However we always want it to be the width of the container it is resizing.
|
||||
overflow: hidden;
|
||||
width: 500px;
|
||||
height: calc( 100% - 2px );
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
|
||||
/* Title container of the properties view */
|
||||
.qps-container .query-plan .properties .title {
|
||||
line-height: 22px;
|
||||
line-height: 30px;
|
||||
height: 22px;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
@@ -123,11 +119,9 @@ However we always want it to be the width of the container it is resizing.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
border-bottom: solid 1px;
|
||||
flex: 0 0 25px;
|
||||
flex: 0 0 30px;
|
||||
}
|
||||
|
||||
/* text in title container of properties view */
|
||||
@@ -150,6 +144,7 @@ However we always want it to be the width of the container it is resizing.
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
flex: 0 0 30px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Operation name styling in the properties view. */
|
||||
@@ -171,7 +166,6 @@ However we always want it to be the width of the container it is resizing.
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
/* Action bar for the query plan */
|
||||
@@ -220,3 +214,82 @@ However we always want it to be the width of the container it is resizing.
|
||||
padding: 4px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.qps-container .save-plan-icon {
|
||||
background-image: url(../images/actionIcons/save.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .open-properties-icon {
|
||||
background-image: url(../images/actionIcons/openProperties.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .open-query-icon {
|
||||
background-image: url(../images/actionIcons/openQuery.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .open-plan-file-icon {
|
||||
background-image: url(../images/actionIcons/openPlanFile.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .search-icon {
|
||||
background-image: url(../images/actionIcons/search.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .sort-alphabetically-icon {
|
||||
background-image: url(../images/actionIcons/sortAlphabetically.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .sort-display-order-icon {
|
||||
background-image: url(../images/actionIcons/sortByDisplayOrder.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .zoom-in-icon {
|
||||
background-image: url(../images/actionIcons/zoomIn.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .zoom-out-icon {
|
||||
background-image: url(../images/actionIcons/zoomOut.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .custom-zoom-icon {
|
||||
background-image: url(../images/actionIcons/customZoom.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.qps-container .zoom-to-fit-icon {
|
||||
background-image: url(../images/actionIcons/zoomToFit.svg);
|
||||
background-size: 16px 16px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -13,18 +13,17 @@ import { Registry } from 'vs/platform/registry/common/platform';
|
||||
import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
import * as azdataGraphModule from 'azdataGraph';
|
||||
import { queryPlanNodeIconPaths } from 'sql/workbench/contrib/queryplan2/browser/constants';
|
||||
import { customZoomIconClassNames, openPlanFileIconClassNames, openPropertiesIconClassNames, openQueryIconClassNames, queryPlanNodeIconPaths, savePlanIconClassNames, searchIconClassNames, zoomInIconClassNames, zoomOutIconClassNames, zoomToFitIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants';
|
||||
import { isString } from 'vs/base/common/types';
|
||||
import { PlanHeader } from 'sql/workbench/contrib/queryplan2/browser/planHeader';
|
||||
import { QueryPlanPropertiesView } from 'sql/workbench/contrib/queryplan2/browser/queryPlanPropertiesView';
|
||||
import { Action } from 'vs/base/common/actions';
|
||||
import { Codicon } from 'vs/base/common/codicons';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { openNewQuery } from 'sql/workbench/contrib/query/browser/queryActions';
|
||||
import { RunQueryOnConnectionMode } from 'sql/platform/connection/common/connectionManagement';
|
||||
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
|
||||
import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { editorBackground, editorWidgetBackground, foreground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { contrastBorder, editorBackground, editorWidgetBackground, foreground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||
import { ISashEvent, ISashLayoutProvider, Orientation, Sash } from 'vs/base/browser/ui/sash/sash';
|
||||
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
|
||||
@@ -234,7 +233,7 @@ export class QueryPlan2 implements ISashLayoutProvider {
|
||||
|
||||
const actions = [
|
||||
new SavePlanFile(),
|
||||
new OpenGraphFile(),
|
||||
new OpenPlanFile(),
|
||||
new OpenQueryAction(),
|
||||
new SearchNodeAction(),
|
||||
new ZoomInAction(),
|
||||
@@ -442,7 +441,7 @@ class OpenQueryAction extends Action {
|
||||
public static LABEL = localize('openQueryAction', "Open Query");
|
||||
|
||||
constructor() {
|
||||
super(OpenQueryAction.ID, OpenQueryAction.LABEL, Codicon.dash.classNames);
|
||||
super(OpenQueryAction.ID, OpenQueryAction.LABEL, openQueryIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -455,7 +454,7 @@ class PropertiesAction extends Action {
|
||||
public static LABEL = localize('queryPlanPropertiesActionLabel', "Properties");
|
||||
|
||||
constructor() {
|
||||
super(PropertiesAction.ID, PropertiesAction.LABEL, Codicon.book.classNames);
|
||||
super(PropertiesAction.ID, PropertiesAction.LABEL, openPropertiesIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -468,7 +467,7 @@ class ZoomInAction extends Action {
|
||||
public static LABEL = localize('queryPlanZoomInActionLabel', "Zoom In");
|
||||
|
||||
constructor() {
|
||||
super(ZoomInAction.ID, ZoomInAction.LABEL, Codicon.zoomIn.classNames);
|
||||
super(ZoomInAction.ID, ZoomInAction.LABEL, zoomInIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -481,7 +480,7 @@ class ZoomOutAction extends Action {
|
||||
public static LABEL = localize('queryPlanZoomOutActionLabel', "Zoom Out");
|
||||
|
||||
constructor() {
|
||||
super(ZoomOutAction.ID, ZoomOutAction.LABEL, Codicon.zoomOut.classNames);
|
||||
super(ZoomOutAction.ID, ZoomOutAction.LABEL, zoomOutIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -494,7 +493,7 @@ class ZoomToFitAction extends Action {
|
||||
public static LABEL = localize('queryPlanFitGraphLabel', "Zoom to fit");
|
||||
|
||||
constructor() {
|
||||
super(ZoomToFitAction.ID, ZoomToFitAction.LABEL, Codicon.debugStop.classNames);
|
||||
super(ZoomToFitAction.ID, ZoomToFitAction.LABEL, zoomToFitIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -509,7 +508,7 @@ class SavePlanFile extends Action {
|
||||
public static LABEL = localize('queryPlanSavePlanXML', "Save Plan File");
|
||||
|
||||
constructor() {
|
||||
super(SavePlanFile.ID, SavePlanFile.LABEL, Codicon.save.classNames);
|
||||
super(SavePlanFile.ID, SavePlanFile.LABEL, savePlanIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -521,7 +520,7 @@ class CustomZoomAction extends Action {
|
||||
public static LABEL = localize('queryPlanCustomZoom', "Custom Zoom");
|
||||
|
||||
constructor() {
|
||||
super(CustomZoomAction.ID, CustomZoomAction.LABEL, Codicon.searchStop.classNames);
|
||||
super(CustomZoomAction.ID, CustomZoomAction.LABEL, customZoomIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -534,7 +533,7 @@ class SearchNodeAction extends Action {
|
||||
public static LABEL = localize('queryPlanSearchNodeAction', "SearchNode");
|
||||
|
||||
constructor() {
|
||||
super(SearchNodeAction.ID, SearchNodeAction.LABEL, Codicon.search.classNames);
|
||||
super(SearchNodeAction.ID, SearchNodeAction.LABEL, searchIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -542,12 +541,12 @@ class SearchNodeAction extends Action {
|
||||
}
|
||||
}
|
||||
|
||||
class OpenGraphFile extends Action {
|
||||
class OpenPlanFile extends Action {
|
||||
public static ID = 'qp.openGraphFile';
|
||||
public static Label = localize('queryPlanOpenGraphFile', "Open Graph File");
|
||||
public static Label = localize('queryPlanOpenGraphFile', "Open Plan File");
|
||||
|
||||
constructor() {
|
||||
super(OpenGraphFile.ID, OpenGraphFile.Label, Codicon.output.classNames);
|
||||
super(OpenPlanFile.ID, OpenPlanFile.Label, openPlanFileIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlan2): Promise<void> {
|
||||
@@ -556,14 +555,6 @@ class OpenGraphFile extends Action {
|
||||
}
|
||||
|
||||
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
|
||||
const menuBackgroundColor = theme.getColor(editorBackground);
|
||||
if (menuBackgroundColor) {
|
||||
collector.addRule(`
|
||||
.qps-container .query-plan .plan .plan-action-container .child {
|
||||
background-color: ${menuBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
const recommendationsColor = theme.getColor(textLinkForeground);
|
||||
if (recommendationsColor) {
|
||||
collector.addRule(`
|
||||
@@ -573,23 +564,53 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
|
||||
`);
|
||||
}
|
||||
const shadow = theme.getColor(widgetShadow);
|
||||
const widgetBackgroundColor = theme.getColor(editorWidgetBackground);
|
||||
|
||||
if (shadow) {
|
||||
collector.addRule(`
|
||||
.qps-container .query-plan .plan .plan-action-container .child {
|
||||
box-shadow: 0 0 8px 2px ${shadow};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const menuBackgroundColor = theme.getColor(listHoverBackground);
|
||||
if (menuBackgroundColor) {
|
||||
collector.addRule(`
|
||||
.qps-container .query-plan .plan .header,
|
||||
.qps-container .query-plan .properties .title,
|
||||
.qps-container .query-plan .properties .table-action-bar {
|
||||
background-color: ${menuBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const widgetBackgroundColor = theme.getColor(editorWidgetBackground);
|
||||
if (widgetBackgroundColor) {
|
||||
collector.addRule(`
|
||||
.qps-container .query-plan .plan .plan-action-container .child,
|
||||
.mxTooltip {
|
||||
background-color: ${widgetBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const widgetBorderColor = theme.getColor(contrastBorder);
|
||||
if (widgetBorderColor) {
|
||||
collector.addRule(`
|
||||
.qps-container .query-plan .plan .plan-action-container .child,
|
||||
.qps-container .query-plan .plan .header,
|
||||
.qps-container .query-plan .properties .title,
|
||||
.qps-container .query-plan .properties .table-action-bar,
|
||||
.mxTooltip {
|
||||
border: 1px solid ${widgetBorderColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
const textColor = theme.getColor(foreground);
|
||||
if (widgetBackgroundColor && foreground) {
|
||||
if (textColor) {
|
||||
collector.addRule(`
|
||||
.mxTooltip {
|
||||
color: ${textColor};
|
||||
background-color: ${widgetBackgroundColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
@@ -17,6 +17,7 @@ import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar';
|
||||
import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||
import { removeLineBreaks } from 'sql/base/common/strings';
|
||||
import { isString } from 'vs/base/common/types';
|
||||
import { sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants';
|
||||
|
||||
|
||||
export class QueryPlanPropertiesView {
|
||||
@@ -239,7 +240,7 @@ export class SortPropertiesAlphabeticallyAction extends Action {
|
||||
public static LABEL = localize('queryPlanPropertyViewSortAlphabetically', "Alphabetical");
|
||||
|
||||
constructor() {
|
||||
super(SortPropertiesAlphabeticallyAction.ID, SortPropertiesAlphabeticallyAction.LABEL, Codicon.sortPrecedence.classNames);
|
||||
super(SortPropertiesAlphabeticallyAction.ID, SortPropertiesAlphabeticallyAction.LABEL, sortAlphabeticallyIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlanPropertiesView): Promise<void> {
|
||||
@@ -252,7 +253,7 @@ export class SortPropertiesByDisplayOrderAction extends Action {
|
||||
public static LABEL = localize('queryPlanPropertyViewSortByDisplayOrde', "Categorized");
|
||||
|
||||
constructor() {
|
||||
super(SortPropertiesByDisplayOrderAction.ID, SortPropertiesByDisplayOrderAction.LABEL, Codicon.listOrdered.classNames);
|
||||
super(SortPropertiesByDisplayOrderAction.ID, SortPropertiesByDisplayOrderAction.LABEL, sortByDisplayOrderIconClassNames);
|
||||
}
|
||||
|
||||
public override async run(context: QueryPlanPropertiesView): Promise<void> {
|
||||
|
||||
Reference in New Issue
Block a user