mirror of
https://github.com/nasa/openmct.git
synced 2025-05-31 14:40:48 +00:00
[Frontend] IN-PROGRESS stubbing in files ported from /warp
open #208 Moving files from /warp; stuff will NOT compile at this point;
This commit is contained in:
Charles Hacskaylo
parent
20cb2ff239
commit
37f466705a
12
platform/features/timeline/style/bundle.json
Normal file
12
platform/features/timeline/style/bundle.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "Timeline Styling",
|
||||
"description": "CSS for Timelines. Ported from /warp",
|
||||
"extensions": {
|
||||
"stylesheets": [
|
||||
{
|
||||
"stylesheetUrl": "css/timeline.css",
|
||||
"priority": "10"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
26
platform/features/timeline/style/config.rb
Executable file
26
platform/features/timeline/style/config.rb
Executable file
@ -0,0 +1,26 @@
|
||||
# Require any additional compass plugins here.
|
||||
# require "compass-growl"
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
css_dir = "css"
|
||||
sass_dir = "sass"
|
||||
images_dir = "images"
|
||||
javascripts_dir = "js"
|
||||
|
||||
# You can select your preferred output style here (can be overridden via the command line):
|
||||
# :expanded, :compressed, :nested
|
||||
output_style = :nested
|
||||
|
||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||
# relative_assets = true
|
||||
|
||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
||||
# line_comments = false
|
||||
|
||||
|
||||
# If you prefer the indented syntax, you might want to regenerate this
|
||||
# project again passing --syntax sass, or you can uncomment this:
|
||||
# preferred_syntax = :sass
|
||||
# and then run:
|
||||
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
|
||||
103
platform/features/timeline/style/sass/_activities.scss
Normal file
103
platform/features/timeline/style/sass/_activities.scss
Normal file
@ -0,0 +1,103 @@
|
||||
.l-timeline-gantt {
|
||||
position: absolute;
|
||||
top: $timelineSwimlaneGanttVM; bottom: $timelineSwimlaneGanttVM;
|
||||
|
||||
.bar {
|
||||
@include ellipsize();
|
||||
height: $activityBarH;
|
||||
line-height: $activityBarH + 2;
|
||||
padding: 0 $interiorMargin;
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
&.s-activity-type {
|
||||
&.timeline {
|
||||
&:before {
|
||||
content:"S";
|
||||
}
|
||||
}
|
||||
&.activity {
|
||||
&:before {
|
||||
content:"A";
|
||||
}
|
||||
}
|
||||
}
|
||||
&.s-title {
|
||||
@include text-shadow(rgba(black, 0.1) 0 1px 2px);
|
||||
// right: 5px;
|
||||
// width: 50%;
|
||||
}
|
||||
&.duration {
|
||||
left: auto;
|
||||
opacity: 0.75;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
width: 60px;
|
||||
}
|
||||
&.handle {
|
||||
//background: rgba(red, 0.2);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: 15px;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.middle {
|
||||
right: 15px;
|
||||
left: 15px;
|
||||
width: auto;
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-timeline-gantt {
|
||||
$br: $controlCr;
|
||||
.bar {
|
||||
color: $activityTypeFg;
|
||||
// opacity: 0.9;
|
||||
// @include background-image(linear-gradient(lighten($activityTypeBg, 10), $activityTypeBg));
|
||||
@include activityBg($activityTypeBg);
|
||||
@include border-radius($br);
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 3px);
|
||||
&.expanded {
|
||||
@include border-top-radius($br);
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
&.leaf {
|
||||
@include border-top-radius(0);
|
||||
@include border-bottom-radius($br);
|
||||
}
|
||||
.s-toggle {
|
||||
color: $colorKey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode .s-timeline-gantt {
|
||||
.bar {
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($activityTypeBg, 20), lighten($activityTypeBg, 10)));
|
||||
}
|
||||
}
|
||||
|
||||
.handle {
|
||||
cursor: col-resize;
|
||||
&.start {
|
||||
// @include test(red);
|
||||
}
|
||||
&.mid {
|
||||
// @include test(green);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
&.end {
|
||||
// @include test(blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
56
platform/features/timeline/style/sass/_constants.scss
Normal file
56
platform/features/timeline/style/sass/_constants.scss
Normal file
@ -0,0 +1,56 @@
|
||||
$dirImgs: '../images/'; //Relative to warp.css
|
||||
/*$interiorMargin: 5px;
|
||||
$interiorMarginLg: $interiorMargin * 2;
|
||||
$interiorMarginSm: 3px;*/
|
||||
$logoAspect: .17;
|
||||
|
||||
// Timeline constants
|
||||
$activityBarH: 17px;
|
||||
$timelinePaneLeftW: 30%;
|
||||
$timelinePaneBtmH: 30%;
|
||||
$timelineResourceGraphYLabelsMargin: 70px;
|
||||
$timelineTopPaneHeaderH: 30px;
|
||||
$timelineHeaderColorBg: lighten($colorBodyBg, 5%);
|
||||
$timelineColorAlt1: lighten($timelineHeaderColorBg, 10%);
|
||||
$timelineSwimlaneGanttVM: 2px; // The vertical space above and below the gantt bars
|
||||
$timelineSwimlaneH: $activityBarH + ($timelineSwimlaneGanttVM * 2);
|
||||
$timelineTopPaneHeaderElemMargin: $interiorMargin;
|
||||
$activityTypeFg: #fff;
|
||||
$activityTypeBg: #5555aa;
|
||||
$activityTypeTabularFgIcon: #8594ff;
|
||||
|
||||
|
||||
// Swimlane colors
|
||||
$colorDropTarg: rgba($activityTypeBg, 0.4);
|
||||
$colorSwimlaneSelectedBg: #222;
|
||||
$colorSwimlaneSelectedFg: #ccc;
|
||||
$colorSwimlaneSelectedGanttBg: #ccc;
|
||||
$colorSwimlaneSelectedGanttFg: #333;
|
||||
|
||||
// Timeline Tabular constants
|
||||
$timelineColIconW: 16px;
|
||||
$timelineColResourcePlotW: $timelineColIconW;
|
||||
$timelineColTitleW: 250px;
|
||||
$timelineColDatetimeW: 110px;
|
||||
$timelineColDurationW: 70px;
|
||||
$timelineColActivityModesW: $timelineColTitleW;
|
||||
$timelineColPadR: 50px;
|
||||
$timelineTabularTitleW: $timelineColResourcePlotW + $timelineColTitleW;
|
||||
$timelineTabularDataW: ($timelineColDatetimeW * 2) + $timelineColDurationW + $timelineColActivityModesW + $timelineColPadR;
|
||||
|
||||
|
||||
// // Ported from legacy timelines SASS
|
||||
$activitiesHolderM: 30px;
|
||||
$scenarioTopPad: 25px;
|
||||
$swimlaneVM: 2px;
|
||||
$timelineVM: 10px;
|
||||
$timelineBPad: $interiorMargin * 2;
|
||||
$graphResourceSummaryH: 200px;
|
||||
$graphResourceSummaryLegendH: 20px;
|
||||
$scenarioTimelineSummaryH: 20px;
|
||||
$scenarioTimelineSummaryHExpanded: $graphResourceSummaryH + 30px;
|
||||
$scenarioPanZoomSliderH: 16px;
|
||||
$scenarioTicksH: 7px;
|
||||
$scenarioTickLabelsH: 10px;
|
||||
|
||||
|
||||
401
platform/features/timeline/style/sass/_timelines.scss
Normal file
401
platform/features/timeline/style/sass/_timelines.scss
Normal file
@ -0,0 +1,401 @@
|
||||
//*************************************************************** LAYOUT
|
||||
.l-timeline-holder {
|
||||
// @include test();
|
||||
@include absPosDefault();
|
||||
|
||||
.l-timeline-pane {
|
||||
@include absPosDefault();
|
||||
|
||||
.l-width-control {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.l-swimlanes-holder {
|
||||
@include absPosDefault();
|
||||
top: $timelineTopPaneHeaderH + 1;
|
||||
}
|
||||
|
||||
// Overall layout
|
||||
&.t-pane-h {
|
||||
&.s-timeline-tabular .t-pane-v {
|
||||
// Vertical panes within tabular area
|
||||
@include absPosDefault();
|
||||
&.l-tabular-l {
|
||||
// Tree area with item title
|
||||
right: auto; // Set this to auto and uncomment width below when additional tabular columns are added
|
||||
width: $timelineTabularTitleW;
|
||||
}
|
||||
&.l-tabular-r {
|
||||
// Start, end, duration, activity modes columns
|
||||
@include scrollH();
|
||||
left: $timelineTabularTitleW;
|
||||
.l-width {
|
||||
@include absPosDefault(0, visible);
|
||||
min-width: $timelineTabularDataW;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.l-timeline-gantt {
|
||||
// @include testObj();
|
||||
|
||||
.l-swimlanes-holder {
|
||||
@include scrollV(scroll);
|
||||
}
|
||||
|
||||
}
|
||||
&.l-timeline-resource-legend {
|
||||
@include box-sizing(border-box);
|
||||
padding: $interiorMargin 0;
|
||||
white-space: nowrap;
|
||||
.l-title {
|
||||
}
|
||||
|
||||
.l-legend-items {
|
||||
@include absPosDefault();
|
||||
@include scrollV();
|
||||
top: 25px;
|
||||
color: lighten($timelineColorAlt1, 10%);
|
||||
// margin-top: $interiorMargin;
|
||||
}
|
||||
.legend-item {
|
||||
// Inherits from /platform/commonUI/general/res/sass/plots/_plots-main.scss
|
||||
// border-bottom: 1px solid $colorInteriorBorder;
|
||||
display: block;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
.color-swatch {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.title-label {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.l-timeline-resource-graph {
|
||||
$m: $interiorMargin;
|
||||
|
||||
.l-graphs-holder {
|
||||
// @include test(blue);
|
||||
@include absPosDefault();
|
||||
bottom: $scrollbarTrackSize;
|
||||
|
||||
.l-graphs {
|
||||
@include absPosDefault();
|
||||
@include scrollV(scroll);
|
||||
}
|
||||
|
||||
.l-graph-labels-holder {
|
||||
// @include test(red);
|
||||
@include absPosDefault();
|
||||
overflow: hidden;
|
||||
right: auto;
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-scroll-control {
|
||||
@include absPosDefault();
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
top: auto; right: $scrollbarTrackSize;
|
||||
height: $scrollbarTrackSize;
|
||||
.l-width-control {
|
||||
height: 10px; // Need to add height to force scrollbar to appear
|
||||
}
|
||||
}
|
||||
|
||||
.l-graph,
|
||||
.l-graph-labels {
|
||||
height: 80px; //was 120px
|
||||
margin-bottom: $interiorMarginSm;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.l-title {
|
||||
@include ellipsize();
|
||||
color: rgba(#fff, 0.4);
|
||||
top: $m; left: $m;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.l-graph {
|
||||
background: rgba(black, 0.3);
|
||||
width: 100%;
|
||||
.l-graph-area {
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-graph-labels {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.l-graph-area {
|
||||
@include absPosDefault();
|
||||
top: 20px; bottom: 5px;
|
||||
.l-labels-holder {
|
||||
@include absPosDefault();
|
||||
left: $m;
|
||||
.tick-label.tick-label-y {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.l-pane-l {
|
||||
// @include test(red);
|
||||
right: auto;
|
||||
min-width: 50px;
|
||||
max-width: 90%;
|
||||
width: $timelinePaneLeftW;
|
||||
}
|
||||
|
||||
&.l-pane-r {
|
||||
// @include test(blue);
|
||||
left: 0;
|
||||
&:hover {
|
||||
.l-hover-btns-holder {
|
||||
@include trans-prop-nice-fade(100ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.l-pane-top {
|
||||
// @include test(green);
|
||||
bottom: $timelinePaneBtmH;
|
||||
}
|
||||
&.l-pane-btm {
|
||||
// @include test(orange);
|
||||
top: auto;
|
||||
min-height: 20px;
|
||||
max-height: 80%;
|
||||
height: $timelinePaneBtmH;
|
||||
}
|
||||
}
|
||||
|
||||
.l-swimlane {
|
||||
height: $timelineSwimlaneH;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Header
|
||||
.s-timeline-tabular .l-header,
|
||||
.s-timeline-gantt .l-header {
|
||||
// @include test(white,0.05);
|
||||
@include absPosDefault(0, visible);
|
||||
bottom: auto; height: $timelineTopPaneHeaderH;
|
||||
|
||||
.l-header-elem {
|
||||
@include absPosDefault($timelineTopPaneHeaderElemMargin, visible);
|
||||
// bottom: auto; height: 15px;
|
||||
display: block;
|
||||
&.l-labels {
|
||||
.l-label {
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
margin-left: -70px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-hover-btns-holder {
|
||||
@include absPosDefault();
|
||||
@include box-sizing(border-box);
|
||||
@include trans-prop-nice-fade(500ms);
|
||||
opacity: 0;
|
||||
height: $timelineTopPaneHeaderH;
|
||||
width: 100px; left: auto;
|
||||
padding: $interiorMargin;
|
||||
text-align: right;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
// Tabular Columns
|
||||
.l-cols {
|
||||
// @include test(#66ff66, 0.1);
|
||||
@include absPosDefault(0, visible);
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
.l-col {
|
||||
@include box-sizing(border-box);
|
||||
@include ellipsize();
|
||||
// @include test(red, 0.05);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
padding: 0 $interiorMargin;
|
||||
position: relative;
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&.l-col-icon {
|
||||
width: $timelineColIconW;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
.ui-symbol {
|
||||
color: $colorKey;
|
||||
}
|
||||
}
|
||||
|
||||
&.l-plot-resource {
|
||||
border-left: none !important;
|
||||
cursor: pointer;
|
||||
padding-left: 0;
|
||||
// .ui-symbol {
|
||||
// color: $colorFormValid;
|
||||
// }
|
||||
}
|
||||
|
||||
&.l-title {
|
||||
width: $timelineColTitleW;
|
||||
}
|
||||
|
||||
&.l-start,
|
||||
&.l-end,
|
||||
&.l-duration {
|
||||
width: $timelineColDatetimeW;
|
||||
}
|
||||
|
||||
//&.l-duration {
|
||||
// width: $timelineColDurationW;
|
||||
//}
|
||||
|
||||
&.l-activity-modes {
|
||||
display: none; // Temp, until modes can be displayed
|
||||
width: $timelineColActivityModesW;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.s-timeline-tabular {
|
||||
.l-header .l-cols {
|
||||
top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
|
||||
.l-col {
|
||||
border-left: 1px solid rgba(#fff, 0.1);
|
||||
// height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.l-pane-l {
|
||||
// Left pane of the tabular area
|
||||
.l-cols {
|
||||
left: $timelineTopPaneHeaderElemMargin;
|
||||
.s-label .ui-symbol.icon {
|
||||
//color: $colorKeyFg;
|
||||
color: $activityTypeTabularFgIcon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-pane-r {
|
||||
// Right pane of the tabular area
|
||||
// @include test(red, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.splitter {
|
||||
// Top of splitter within Timelines should be 0
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Ticks
|
||||
.l-ticks,
|
||||
.l-subticks {
|
||||
@include absPosDefault();
|
||||
top: auto; bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.l-ticks {
|
||||
height: 10px
|
||||
}
|
||||
|
||||
.l-subticks {
|
||||
height: 5px
|
||||
}
|
||||
}
|
||||
|
||||
//*************************************************************** STYLING
|
||||
.s-timeline {
|
||||
font-size: 0.75rem;
|
||||
.s-header {
|
||||
background-color: $timelineHeaderColorBg;
|
||||
}
|
||||
.s-swimlane {
|
||||
// @include transition-property(background-color);
|
||||
// @include transition-duration(0.2s);
|
||||
// @include transition-timing-function(ease-out);
|
||||
// border-top: 1px solid rgba(black, 0.2);
|
||||
border-bottom: 1px solid rgba(white, 0.1);
|
||||
line-height: $activityBarH + 2 + 1;
|
||||
/* &:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}*/
|
||||
&.exceeded {
|
||||
@include bgDiagonalStripes(#fff, 0.05, $timelineSwimlaneH + 1);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
$bg: $colorSwimlaneSelectedBg;
|
||||
background-color: $bg;
|
||||
color: #fff;
|
||||
// @include background-image(linear-gradient(darken($bg, 5), $bg));
|
||||
|
||||
.s-timeline-gantt .bar {
|
||||
@include activityBg($colorSwimlaneSelectedGanttBg, 10);
|
||||
color: $colorSwimlaneSelectedGanttFg;
|
||||
// background-color: red;
|
||||
// background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.drop-into {
|
||||
background-color: rgba($colorDropTarg, 0.7);
|
||||
.s-timeline-gantt {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
&.drop-after {
|
||||
background-color: rgba(#000, 0.2);
|
||||
border-bottom-color: rgba($colorDropTarg, 1.0);
|
||||
}
|
||||
}
|
||||
|
||||
.s-ticks {
|
||||
@include bgTicks($timelineColorAlt1);
|
||||
}
|
||||
.s-hover-btns-holder {
|
||||
$bg: $timelineHeaderColorBg;
|
||||
$bga: 1;
|
||||
$l: 5%;
|
||||
@include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
|
||||
.s-btn {
|
||||
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-mode .s-swimlane {
|
||||
cursor: pointer;
|
||||
.s-label {
|
||||
@include border-radius($controlCr);
|
||||
padding: 2px 5px;
|
||||
&:hover {
|
||||
background: rgba(#fff, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
11
platform/features/timeline/style/sass/timeline-espresso.scss
Normal file
11
platform/features/timeline/style/sass/timeline-espresso.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "../../../../platform/commonUI/general/res/sass/constants";
|
||||
@import "../../../../platform/commonUI/general/res/sass/mixins";
|
||||
@import "mixins";
|
||||
@import "constants";
|
||||
@import "about";
|
||||
@import "activities";
|
||||
@import "timelines";
|
||||
15
platform/features/timeline/style/timeline-sass.sh
Normal file
15
platform/features/timeline/style/timeline-sass.sh
Normal file
@ -0,0 +1,15 @@
|
||||
# echo "* Compiling all sass in wtd-dev"
|
||||
|
||||
# echo "Compiling general"
|
||||
# cd ~/dev/wtd-dev/platform/commonUI/general/res/
|
||||
# compass compile --force
|
||||
|
||||
echo "*** Compiling themes/espresso"
|
||||
cd ~/dev/wtd-dev/platform/commonUI/themes/espresso/res/
|
||||
compass compile --force
|
||||
|
||||
echo "** Compiling themes/snow"
|
||||
cd ~/dev/wtd-dev/platform/commonUI/themes/snow/res/
|
||||
compass compile --force
|
||||
|
||||
echo "**** All wtd-dev sass compiled"
|
||||
Loading…
x
Reference in New Issue
Block a user