Commit 97618f2e authored by Elias Villiger's avatar Elias Villiger
Browse files

Feature #4763 - AS _vertical column

parent fef1a122
Pipeline #715 passed with stage
in 1 minute and 47 seconds
......@@ -5502,14 +5502,14 @@ Column: _Paged
Column: _vertical
^^^^^^^^^^^^^^^^^
Render text vertically. This is useful for tables with limited column width. The vertical rendering is achieved via CSS tranformations (rotation) defined in the style attribute of the wrapping tag. You can optionally specify the rotation
angle.
Render text vertically. This is useful for tables with limited column width. The vertical rendering is achieved via CSS tranformations
(rotation) defined in the style attribute of the wrapping tag. You can optionally specify the rotation angle.
**Syntax**
::
10.sql = SELECT "<text>|[<angle>]|[<width>]|[<height>]|[<wrap tag>]" AS _vertical
10.sql = SELECT "<text>|[<angle>]" AS _vertical
..
......@@ -5520,13 +5520,9 @@ angle.
+-------------+-------------------------------------------------------------------------------------------------------+-----------------+
|<angle> |How many degrees should the text be rotated? The angle is measured clockwise from baseline of the text.|*270* |
+-------------+-------------------------------------------------------------------------------------------------------+-----------------+
|<width> |Width (of what?). Needs to have a CSS_unit (e.g. px, em) specified. (Implemented?) |*1em* |
+-------------+-------------------------------------------------------------------------------------------------------+-----------------+
|<height> |Height (of what?). Needs to have a CSS-unit (e.g. px, em) specified. (Implemented?) |none |
+-------------+-------------------------------------------------------------------------------------------------------+-----------------+
|<wraptag> |What tag should be used to wrap the vertical text? Possible options are *div*, *span*, etc. |*div* |
+-------------+-------------------------------------------------------------------------------------------------------+-----------------+
The text is surrounded by some HTML tags in an effort to make other elements position appropriately around it.
This works best for angles close to 270 or 90.
**Minimal Example**
......@@ -5534,18 +5530,8 @@ angle.
10.sql = SELECT "Hallo" AS _vertical
..
**Advanced Examples**
::
10.sql = SELECT "Hallo|90" AS _vertical
20.sql = SELECT "Hallo|90|3em|7em|span" AS _vertical
20.sql = SELECT "Hallo|90" AS _vertical
20.sql = SELECT "Hallo|-75" AS _vertical
..
......
......@@ -880,37 +880,27 @@ class Report {
break;
case "vertical":
// '<Text>|[angle]|[width]|[height]|[tag]' , width and height needs a unit (px, em ,...), 'tag' might be 'div', 'span', ...
$arr = explode("|", $columnValue, 5);
// '<Text>|[angle]|[width]|[height]' , width and height needs a unit (px, em ,...)
$arr = explode("|", $columnValue, 2);
# angle
$angle = $arr[1] ? $arr[1] : 270;
$angle = $arr[1] ?? 270;
# width
$width = $arr[2] ? $arr[2] : "1em";
$extra = "width:$width; ";
# height
if ($arr[3]) {
$extra .= "height:" . $arr[3] . "; ";
}
# tag
if ($arr[4]) {
$tag = explode(" ", trim($arr[4]), 2);
$tag_open = "<" . $arr[4] . " ";
$tag_close = "</" . $tag[0] . ">";
# https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly
$extraOuterWrap = '';
if ($angle > 180 || $angle < 0) {
$translate = '(-100%)';
} else {
$tag_open = "<div ";
$tag_close = "</div>";
$translate = '(0, -100%)';
$extraOuterWrap = 'margin-left: 1em; ';
}
# http://scottgale.com/blog/css-vertical-text/2010/03/01/
#$style = "writing-mode:tb-rl; -webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg); white-space:nowrap; width:1em; display: block;";
$style = "width:1em; filter: flipv fliph; transform: rotate(" . $angle . "deg) translate(-10em,0); transform-origin: 0 0; writing-mode:tb-rl; -webkit-transform:rotate(" . $angle . "deg); -moz-transform:rotate(" . $angle . "deg); -o-transform: rotate(" . $angle . "deg); white-space:nowrap; display: block;";
#$style = "line-height: 1.5em; background:#eee; display: block; white-space: nowrap; padding-left: 3px; writing-mode: tb-rl; filter: flipv fliph; transform: rotate(270deg) translate(-10em,0); transform-origin: 0 0; -moz-transform: rotate(270deg) translate(-10em,0); -moz-transform-origin: 0 0; -webkit-transform: rotate(270deg) translate(-10em,0); -webkit-transform-origin: 0 0;";
$content = $tag_open . 'style="' . $style . '">' . $arr[0] . $tag_close;
// wrap in containing tags to adapt to surrounding content
$outerWrapStyle = "display:table; $extraOuterWrap";
$innerWrapStyle = "padding:50% 0; height:0;";
$style = "transform:rotate(" . $angle . "deg) translate$translate; margin-top:-50%; white-space:nowrap; transform-origin:0 0; height:0px;";
$content = Support::wrapTag("<div style='$style'>",$arr[0]);
$content = Support::wrapTag("<div style='$innerWrapStyle'>", $content);
$content = Support::wrapTag("<div style='$outerWrapStyle'>", $content);
break;
default :
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment