mirror of
https://github.com/nasa/openmct.git
synced 2025-06-01 07:00:49 +00:00
463c44679d
* Display Layout grid toggle and dimensions - Added toggle grid button; - Added Layout 'size' properties; - Very WIP! * Display Layout grid toggle and dimensions - Cleanup toolbar; * new configuration layoutDimensions * extract display layout grid to own vue component * split toolbar structure into two structures * allow toggling grid when editing display layout * toggle grid icon show/hide state on click * grid be shown on starting edit mode * remove dimensions code for other display layout feature * toggle icon after method completes * change icon names * update spec to include new action and separator Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
35 lines
769 B
Vue
35 lines
769 B
Vue
<template>
|
|
<div
|
|
class="l-layout__grid-holder"
|
|
:class="{ 'c-grid': showGrid }"
|
|
>
|
|
<div
|
|
v-if="gridSize[0] >= 3"
|
|
class="c-grid__x l-grid l-grid-x"
|
|
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
|
|
></div>
|
|
<div
|
|
v-if="gridSize[1] >= 3"
|
|
class="c-grid__y l-grid l-grid-y"
|
|
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
gridSize: {
|
|
type: Array,
|
|
required: true,
|
|
validator: (arr) => arr && arr.length === 2
|
|
&& arr.every(el => typeof el === 'number')
|
|
},
|
|
showGrid: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|