diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue index 453519cf8c..2837b1ad7d 100644 --- a/src/plugins/flexibleLayout/components/flexibleLayout.vue +++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue @@ -216,12 +216,13 @@ } .c-fl-frame { + /***************************************************** CONTAINER FRAMES */ $sizeIndicatorM: 16px; $dropHintSize: 15px; display: flex; - justify-content: stretch; - align-items: stretch; + // justify-content: stretch; + // align-items: stretch; flex: 1 1; flex-direction: column; overflow: hidden; // Needed to allow frames to collapse when sized down @@ -237,6 +238,16 @@ } } + &__header { + flex: 0 0 auto; + margin-bottom: $interiorMargin; + } + + &__object-view { + flex: 1 1 auto; + overflow: auto; + } + &__size-indicator { $size: 35px; @@ -286,20 +297,18 @@ min-height: $size; min-width: $size; } - &:after { + &__grippy { // Grippy element - /*background: deeppink;*/ + $d: 4px; $c: black; $a: 0.9; $d: 5px; background: $editColor; color: $editColorBg; border-radius: $smallCr; - content: $glyph-icon-grippy-ew; - font-family: symbolsfont; font-size: 0.8em; - display: inline-block; - padding: 10px 0; + height: $d; + width: $d * 10; position: absolute; left: 50%; top: 50%; text-align: center; @@ -314,15 +323,6 @@ // padding: $marginHov 0; cursor: row-resize; } - - &:after { - transform: rotate(90deg) translate(-50%, -50%); - //top: $margin + $size - 2px; - //left: 50%; - // transform: translateX(-50%); - /*width: $grippyLen; - height: $grippyThickness;*/ - } } &.horizontal { @@ -332,12 +332,8 @@ cursor: col-resize; } - &:after { - //left: $margin + $size - 2px; - //top: 50%; - //transform: translateY(-50%); - /* height: $grippyLen; - width: $grippyThickness;*/ + [class*='grippy'] { + transform: translate(-50%) rotate(90deg); } } @@ -391,6 +387,10 @@ margin: 0; } } + + .c-object-view { + display: contents; + } } diff --git a/src/plugins/flexibleLayout/components/frame.vue b/src/plugins/flexibleLayout/components/frame.vue index bde8ed57c6..e2dfb8f19a 100644 --- a/src/plugins/flexibleLayout/components/frame.vue +++ b/src/plugins/flexibleLayout/components/frame.vue @@ -38,11 +38,12 @@ diff --git a/src/plugins/flexibleLayout/plugin.js b/src/plugins/flexibleLayout/plugin.js index 8b5500a0fd..c1cb717f17 100644 --- a/src/plugins/flexibleLayout/plugin.js +++ b/src/plugins/flexibleLayout/plugin.js @@ -116,12 +116,12 @@ define([ property: `configuration.containers[${parent.context.index}].frames[${primary.context.index}].noFrame`, options: [ { - value: false, + value: true, icon: 'icon-frame-hide', title: "Hide frame" }, { - value: true, + value: false, icon: 'icon-frame-show', title: "Show frame" } diff --git a/src/ui/components/utils/frameHeader.vue b/src/ui/components/utils/frameHeader.vue index 264337685c..faa9aeff68 100644 --- a/src/ui/components/utils/frameHeader.vue +++ b/src/ui/components/utils/frameHeader.vue @@ -1,15 +1,46 @@ + +