benn/lumiera_
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Timeline: expand and document system of marker style classes

Browse source 
.timeline__head : The complete header container on the left side
.timeline__navi : navigation control at top
.timeline__pbay : container holding the patchbay on the left side
.fork__head     : each individual TrackHeadWidget (possibly nested)
.fork__control  : container for the control components for each track scope
.fork__bracket  : the StaveBracket drawing to indicate the nesting structure
This commit is contained in:
Fischlurch 2023-03-03 18:36:33 +01:00
parent c234ab733b
commit 47108fa2d8
11 changed files with 77 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
doc/technical/stage/style/Timeline.txt
View file

@ -76,6 +76,25 @@ slopes::
- class `.track-slope--deep2` for two consecutive nested steps combined.
- likewise class `.track-slope--deep3` for three and class `.track-slope--deep4` for four combined slopes
- finally, class `.track-slope--verydeep` is used for five and more combined upward (closing) slopes
header::
The track header area to the left of the timeline display is built up „conventionally“, by nested widgets
+
- the container spanning the total height of the timeline display (moving with the scrollbar): `.timeline__head`
- at the top sits a small navigator control with class `.timeline__navi`
- the remaining space below is taken by a »Patchbay« container with class `.timeline__pbay`
fork head::
Located within the PatchbayWidget resides a nested structure of fork head controls
- each such TrackHeadWidget is derived from Gtk::Grid and marked with class `.fork__head`
- the first row in the grid holds a Track Header label and menu,an ElementBoxWidget with class `.elementbox`
- the second row corresponds to the _content area_ of the track itself,
and hold the controls for this track's scope, i.e. the track _together with all nested sub-tracks._
- in the second cell in this row resides the HeadControlArea with class `.fork__control`
- next comes a padding row to help synchronising track head and track body display
- Additional sub-Tracks are added as additional lines to the grid, and each such line
will hold a nested TrackHeadWidget in the second cell; this also implies that this
nested sub-Track head can again hold deeper nested sub-Tracks....
- The first column to the left side, starting from the second row will be increased accordingly to indicate
the nested fork structure, rendered as a nested set of »stave brackets« with class `.fork__bracket`
[red]##TODO 10/2022:##

8
src/stage/lumiera-light-theme-complement.css
View file

@ -81,3 +81,11 @@
.track-slope--verydeep {
border-width: 20px;
}
/* bracket structure to indicate track scopes
* - base width is derived from font 'em'
* - drawing is in (text) colour (TODO: selection state)
*/
.fork__bracket {
padding-left: 2px;
}

8
src/stage/style-scheme.cpp
View file

@ -80,6 +80,14 @@ namespace stage {
cuString CLASS_slope_deep4 {"track-slope--deep4"};
cuString CLASS_slope_verydeep{"track-slope--verydeep"};
cuString CLASS_timeline_head {"timeline__head"};
cuString CLASS_timeline_navi {"timeline__navi"};
cuString CLASS_timeline_pbay {"timeline__pbay"};
cuString CLASS_fork_head {"fork__head"};
cuString CLASS_fork_bracket {"fork__bracket"};
cuString CLASS_fork_control {"fork__control"};
cuString CLASS_background {"background"}; ///< opaque backdrop

8
src/stage/style-scheme.hpp
View file

@ -90,6 +90,14 @@ namespace stage {
extern cuString CLASS_slope_deep4;
extern cuString CLASS_slope_verydeep;
extern cuString CLASS_timeline_head;
extern cuString CLASS_timeline_navi;
extern cuString CLASS_timeline_pbay;
extern cuString CLASS_fork_head;
extern cuString CLASS_fork_bracket;
extern cuString CLASS_fork_control;
extern cuString CLASS_background;

7
src/stage/timeline/header-pane-widget.hpp
View file

@ -52,11 +52,7 @@
#include "stage/gtk-base.hpp"
#include "stage/timeline/navigator-widget.hpp"
#include "stage/timeline/patchbay-widget.hpp"
//#include "lib/util.hpp"
//#include <memory>
//#include <vector>
#include "stage/style-scheme.hpp"
@ -86,6 +82,7 @@ namespace timeline {
, navigator_{}
, patchbay_{vScroll}
{
get_style_context()->add_class (CLASS_timeline_head);
this->pack_start (navigator_, Gtk::PACK_SHRINK);
this->pack_start (patchbay_, Gtk::PACK_EXPAND_WIDGET);
}

5
src/stage/timeline/navigator-widget.cpp
View file

@ -31,6 +31,7 @@
#include "stage/gtk-base.hpp"
#include "stage/style-scheme.hpp"
#include "stage/timeline/navigator-widget.hpp"
//#include "stage/ui-bus.hpp"
@ -66,7 +67,9 @@ namespace timeline {
NavigatorWidget::NavigatorWidget ()
: Gtk::Grid{}
{ }
{
get_style_context()->add_class (CLASS_timeline_navi);
}

2
src/stage/timeline/patchbay-widget.cpp
View file

@ -31,6 +31,7 @@
#include "stage/gtk-base.hpp"
#include "stage/style-scheme.hpp"
#include "stage/timeline/patchbay-widget.hpp"
#include "stage/timeline/track-head-widget.hpp"
//#include "stage/ui-bus.hpp"
@ -81,6 +82,7 @@ namespace timeline {
PatchbayWidget::PatchbayWidget (PAdjustment const& vScroll)
: Gtk::ScrolledWindow{Gtk::Adjustment::create (0,0,0,0,0,0), vScroll}
{
get_style_context()->add_class (CLASS_timeline_pbay);
set_shadow_type (Gtk::SHADOW_NONE);
set_policy (Gtk::POLICY_NEVER, Gtk::POLICY_EXTERNAL); // horizontal extension is fixed, using the track body vertical scrollbar
property_expand() = true; // dynamically grab additional space

1
src/stage/timeline/stave-bracket-widget.cpp
View file

@ -224,6 +224,7 @@ namespace timeline {
StaveBracketWidget::StaveBracketWidget ()
: _Base{}
{
get_style_context()->add_class (CLASS_fork_bracket);
this->property_expand() = false;
}

3
src/stage/timeline/stave-bracket-widget.hpp
View file

@ -31,6 +31,9 @@
** of actual drawing this structure is abstracted into this custom widget — allowing the
** track head to indicate the necessary layout constraints generic and recursively.
**
** \par styling
** - styling is controlled via CSS, using the marker class \ref CLASS_fork_bracket
**
** @todo WIP-WIP-WIP as of 2/2023
**
*/

3
src/stage/timeline/track-head-widget.cpp
View file

@ -46,6 +46,7 @@
#include "stage/gtk-base.hpp"
#include "stage/style-scheme.hpp"
#include "stage/timeline/track-head-widget.hpp"
#include "lib/util.hpp"
@ -72,6 +73,7 @@ namespace timeline {
, headCtrl_{}
, childCnt_{0}
{
get_style_context()->add_class (CLASS_fork_head);
headCtrl_.set_valign(Gtk::Align::ALIGN_CENTER);
headCtrl_.set_halign(Gtk::Align::ALIGN_FILL);
this->attach (trackName_, 0,0, 2,1);
@ -87,6 +89,7 @@ namespace timeline {
: Gtk::Grid{}
, ctrlTODO_{"💡"}
{
get_style_context()->add_class (CLASS_fork_control);
ctrlTODO_.set_xalign (0.3);
ctrlTODO_.set_yalign (0.5);
this->attach (ctrlTODO_, 0,0, 1,1);

26
wiki/thinkPad.ichthyo.mm
View file

@ -28832,9 +28832,9 @@
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1677426740361" ID="ID_1498455508" MODIFIED="1677426748306" TEXT="Ankerpunkt f&#xfc;r Sub-Scopes">
<icon BUILTIN="flag-yellow"/>
</node>
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1677426668947" ID="ID_1313952369" MODIFIED="1677426704721" TEXT="Farbe setzen">
<linktarget COLOR="#603482" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" SOURCE="ID_1533322932" STARTARROW="None" STARTINCLINATION="102;9;"/>
<icon BUILTIN="hourglass"/>
<node COLOR="#338800" CREATED="1677426668947" ID="ID_1313952369" MODIFIED="1677867091124" TEXT="Farbe setzen">
<linktarget COLOR="#346382" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" SOURCE="ID_1533322932" STARTARROW="None" STARTINCLINATION="102;9;"/>
<icon BUILTIN="button_ok"/>
</node>
</node>
</node>
@ -29240,10 +29240,9 @@
</node>
<node BACKGROUND_COLOR="#d2beaf" COLOR="#5c4d6e" CREATED="1677426647111" ID="ID_1384220998" MODIFIED="1677426654411" TEXT="Erg&#xe4;nzungen">
<icon BUILTIN="hourglass"/>
<node BACKGROUND_COLOR="#e0ceaa" COLOR="#690f14" CREATED="1677426657149" ID="ID_1533322932" MODIFIED="1677426718528" TEXT="Farbe der Klammer aus CSS">
<arrowlink COLOR="#603482" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" STARTARROW="None" STARTINCLINATION="102;9;"/>
<icon BUILTIN="bell"/>
<icon BUILTIN="hourglass"/>
<node COLOR="#338800" CREATED="1677426657149" ID="ID_1533322932" MODIFIED="1677867106087" TEXT="Farbe der Klammer aus CSS">
<arrowlink COLOR="#346382" DESTINATION="ID_1313952369" ENDARROW="Default" ENDINCLINATION="-273;44;" ID="Arrow_ID_1766960947" STARTARROW="None" STARTINCLINATION="102;9;"/>
<icon BUILTIN="button_ok"/>
</node>
</node>
<node BACKGROUND_COLOR="#eee5c3" COLOR="#990000" CREATED="1563469735149" ID="ID_704791408" MODIFIED="1563469741153" TEXT="Selection-State zeigen">
@ -29298,6 +29297,19 @@
<font ITALIC="true" NAME="SansSerif" SIZE="14"/>
<icon BUILTIN="forward"/>
</node>
<node COLOR="#338800" CREATED="1677864417723" ID="ID_692056392" MODIFIED="1677864442889">
<richcontent TYPE="NODE"><html>
<head>
</head>
<body>
<p>
Style-Klasse: <b><font face="Monospaced">.fork__bracket</font></b>
</p>
</body>
</html></richcontent>
<icon BUILTIN="button_ok"/>
</node>
</node>
<node CREATED="1554996492819" ID="ID_1391546845" MODIFIED="1557498707227" TEXT="Konfig laut systematischem Modell">
<arrowlink COLOR="#3e63c5" DESTINATION="ID_433238862" ENDARROW="Default" ENDINCLINATION="-612;-125;" ID="Arrow_ID_1858329997" STARTARROW="None" STARTINCLINATION="-747;0;"/>