From 37f466705af01f1da8d2dd9ceac5f38dc0ee58e5 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 2 Nov 2015 18:22:13 -0800 Subject: [PATCH] [Frontend] IN-PROGRESS stubbing in files ported from /warp open #208 Moving files from /warp; stuff will NOT compile at this point; --- platform/features/timeline/style/bundle.json | 12 + platform/features/timeline/style/config.rb | 26 ++ .../timeline/style/sass/_activities.scss | 103 +++++ .../timeline/style/sass/_constants.scss | 56 +++ .../timeline/style/sass/_timelines.scss | 401 ++++++++++++++++++ .../style/sass/timeline-espresso.scss | 11 + .../features/timeline/style/timeline-sass.sh | 15 + 7 files changed, 624 insertions(+) create mode 100644 platform/features/timeline/style/bundle.json create mode 100755 platform/features/timeline/style/config.rb create mode 100644 platform/features/timeline/style/sass/_activities.scss create mode 100644 platform/features/timeline/style/sass/_constants.scss create mode 100644 platform/features/timeline/style/sass/_timelines.scss create mode 100644 platform/features/timeline/style/sass/timeline-espresso.scss create mode 100644 platform/features/timeline/style/timeline-sass.sh diff --git a/platform/features/timeline/style/bundle.json b/platform/features/timeline/style/bundle.json new file mode 100644 index 0000000000..d0fb8a9f95 --- /dev/null +++ b/platform/features/timeline/style/bundle.json @@ -0,0 +1,12 @@ +{ + "name": "Timeline Styling", + "description": "CSS for Timelines. Ported from /warp", + "extensions": { + "stylesheets": [ + { + "stylesheetUrl": "css/timeline.css", + "priority": "10" + } + ] + } +} diff --git a/platform/features/timeline/style/config.rb b/platform/features/timeline/style/config.rb new file mode 100755 index 0000000000..a5def82481 --- /dev/null +++ b/platform/features/timeline/style/config.rb @@ -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 diff --git a/platform/features/timeline/style/sass/_activities.scss b/platform/features/timeline/style/sass/_activities.scss new file mode 100644 index 0000000000..75f3a81072 --- /dev/null +++ b/platform/features/timeline/style/sass/_activities.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/platform/features/timeline/style/sass/_constants.scss b/platform/features/timeline/style/sass/_constants.scss new file mode 100644 index 0000000000..26bcd55eaf --- /dev/null +++ b/platform/features/timeline/style/sass/_constants.scss @@ -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; + + diff --git a/platform/features/timeline/style/sass/_timelines.scss b/platform/features/timeline/style/sass/_timelines.scss new file mode 100644 index 0000000000..bdb8211a3e --- /dev/null +++ b/platform/features/timeline/style/sass/_timelines.scss @@ -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; + } + } +} + + diff --git a/platform/features/timeline/style/sass/timeline-espresso.scss b/platform/features/timeline/style/sass/timeline-espresso.scss new file mode 100644 index 0000000000..3cad04322e --- /dev/null +++ b/platform/features/timeline/style/sass/timeline-espresso.scss @@ -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"; \ No newline at end of file diff --git a/platform/features/timeline/style/timeline-sass.sh b/platform/features/timeline/style/timeline-sass.sh new file mode 100644 index 0000000000..073c193342 --- /dev/null +++ b/platform/features/timeline/style/timeline-sass.sh @@ -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" \ No newline at end of file