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 @@
-