diff --git a/.gitignore b/.gitignore index aacf7f9728..b8eea4a5be 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ *.gzip *.tgz *.DS_Store +*.swp # Compiled CSS, unless directly added *.sass-cache diff --git a/index.html b/index.html index e47efe91b5..fcd37cfb0b 100644 --- a/index.html +++ b/index.html @@ -19,16 +19,15 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -<!DOCTYPE html> -<html> -<head lang="en"> - <meta charset="UTF-8"> +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> - <script type="text/javascript" - src="bower_components/requirejs/require.js"> + <script src="bower_components/requirejs/require.js"> </script> - <script type="text/javascript"> + <script> require(['main'], function (mct) { require([ './example/imagery/bundle', @@ -39,10 +38,10 @@ </script> <link rel="stylesheet" href="platform/commonUI/general/res/css/startup-base.css"> <link rel="stylesheet" href="platform/commonUI/general/res/css/openmct.css"> - <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32"> - <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96"> - <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16"> - <link rel="shortcut icon" href="platform/commonUI/general/res/images/favicons/favicon.ico"> + <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-32x32.png" sizes="32x32"> + <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-96x96.png" sizes="96x96"> + <link rel="icon" type="image/png" href="platform/commonUI/general/res/images/favicons/favicon-16x16.png" sizes="16x16"> + <link rel="shortcut icon" href="platform/commonUI/general/res/images/favicons/favicon.ico"> </head> <body class="user-environ"> <div class="l-splash-holder s-splash-holder"> diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 5550a9019e..8fb1a39cb1 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -126,6 +126,7 @@ $menuLineH: 1.5rem; $menuLineHPx: 24px; $btnStdH: 25px; $btnToolbarH: $btnStdH; +$controlBarH: $btnStdH; $btnFrameH: 16px; /************************** PATHS */ diff --git a/platform/commonUI/general/res/sass/_views.scss b/platform/commonUI/general/res/sass/_views.scss index 96c78f1dd2..357f9f3c7c 100644 --- a/platform/commonUI/general/res/sass/_views.scss +++ b/platform/commonUI/general/res/sass/_views.scss @@ -1,8 +1,11 @@ /* Styles for sub-dividing views generically */ +.l-control-bar { + // Element that can be placed above l-view-section, holds controls, buttons, etc. + height: $controlBarH; +} .l-view-section { @include absPosDefault(0); - font-size: 0.8rem; h2 { color: #fff; margin-bottom: $interiorMargin; @@ -15,4 +18,36 @@ .inline-block { display: inline-block; } +} + +.has-control-bar { + .l-view-section { + top: $controlBarH + $interiorMargin; + } +} + + +.child-frame { + .has-control-bar { + $btnExportH: $btnFrameH; + .l-control-bar { + @include trans-prop-nice(opacity, $dur: 50ms); + opacity: 0; + } + .l-view-section { + @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms); + top: 0; + } + &:hover { + .l-control-bar { + @include trans-prop-nice(opacity, 150ms, 100ms); + opacity: 1; + } + .l-view-section { + @include trans-prop-nice(top, $dur: 150ms); + top: $btnExportH + $interiorMargin; + } + } + } + } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index 5671fe178d..d68486547e 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -160,39 +160,3 @@ table { } } } - -/********************************************************** SPECIFIC TABULAR VIEWS */ -.tabular-holder { - &.t-exportable { - $btnExportH: 25px; - .l-view-section { - top: $btnExportH + $interiorMargin; - } - } -} - -.child-frame { - .tabular-holder { - &.t-exportable { - $btnExportH: $btnFrameH; - .s-button.t-export { - @include trans-prop-nice(opacity, $dur: 50ms); - opacity: 0; - } - .l-view-section { - @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms); - top: 0; - } - &:hover { - .s-button.t-export { - @include trans-prop-nice(opacity, 150ms, 100ms); - opacity: 1; - } - .l-view-section { - @include trans-prop-nice(top, $dur: 150ms); - top: $btnExportH + $interiorMargin; - } - } - } - } -} \ No newline at end of file diff --git a/platform/features/table/res/templates/historical-table.html b/platform/features/table/res/templates/historical-table.html index e2cd91b0db..d306601daf 100644 --- a/platform/features/table/res/templates/historical-table.html +++ b/platform/features/table/res/templates/historical-table.html @@ -4,6 +4,6 @@ rows="rows" enableFilter="true" enableSort="true" - class="tabular-holder t-exportable"> + class="tabular-holder has-control-bar"> </mct-table> </div> \ No newline at end of file diff --git a/platform/features/table/res/templates/mct-table.html b/platform/features/table/res/templates/mct-table.html index 6d96b17afd..ac06f53e28 100644 --- a/platform/features/table/res/templates/mct-table.html +++ b/platform/features/table/res/templates/mct-table.html @@ -1,8 +1,10 @@ -<a class="s-button t-export icon-download labeled" - ng-click="exportAsCSV()" - title="Export This View's Data"> - Export -</a> +<div class="l-control-bar"> + <a class="s-button t-export icon-download labeled" + ng-click="exportAsCSV()" + title="Export This View's Data"> + Export + </a> +</div> <div class="l-view-section scrolling" style="overflow: auto;" mct-resize="resize()"> <table class="sizing-table"> <tbody> diff --git a/platform/features/table/res/templates/rt-table.html b/platform/features/table/res/templates/rt-table.html index c6fb0d2422..573eeb89f6 100644 --- a/platform/features/table/res/templates/rt-table.html +++ b/platform/features/table/res/templates/rt-table.html @@ -4,7 +4,7 @@ rows="rows" enableFilter="true" enableSort="true" - class="tabular-holder t-exportable" + class="tabular-holder has-control-bar" auto-scroll="true"> </mct-table> </div> \ No newline at end of file diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html index e7e4913341..c9a4bbdd4a 100644 --- a/platform/forms/res/templates/controls/color.html +++ b/platform/forms/res/templates/controls/color.html @@ -36,18 +36,18 @@ ng-controller="ColorController as colors" ng-show="toggle.isActive()"> <div - class="l-palette-row l-option-row" - ng-if="!structure.mandatory"> + class="l-palette-row l-option-row" + ng-if="!structure.mandatory"> <div class="l-palette-item s-palette-item {{ngModel[field] === 'transparent' ? 'icon-check' : '' }}" ng-click="ngModel[field] = 'transparent'"> </div> <span class="l-palette-item-label">None</span> </div> <div - class="l-palette-row" + class="l-palette-row" ng-repeat="group in colors.groups()"> <div class="l-palette-item s-palette-item {{ngModel[field] === color ? 'icon-check' : '' }}" - ng-repeat="color in group" + ng-repeat="color in group" ng-style="{ background: color }" ng-click="ngModel[field] = color"> </div> diff --git a/platform/forms/res/templates/controls/composite.html b/platform/forms/res/templates/controls/composite.html index 1c3559e2fc..e036617c3c 100644 --- a/platform/forms/res/templates/controls/composite.html +++ b/platform/forms/res/templates/controls/composite.html @@ -21,18 +21,18 @@ --> <span ng-controller="CompositeController as compositeCtrl"> <ng-form name="mctFormItem" ng-repeat="item in structure.items"> - <div class="l-composite-control l-{{item.control}} {{item.cssclass}}"> - <mct-control key="item.control" - ng-model="ngModel[field]" - ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])" - ng-pattern="ngPattern" - options="item.options" - structure="row" - field="$index"> - </mct-control> - <span class="composite-control-label"> - {{item.name}} - </span> - </div> + <div class="l-composite-control l-{{item.control}} {{item.cssclass}}"> + <mct-control key="item.control" + ng-model="ngModel[field]" + ng-required="ngRequired || compositeCtrl.isNonEmpty(ngModel[field])" + ng-pattern="ngPattern" + options="item.options" + structure="row" + field="$index"> + </mct-control> + <span class="composite-control-label"> + {{item.name}} + </span> + </div> </ng-form> </span> diff --git a/platform/forms/res/templates/toolbar.html b/platform/forms/res/templates/toolbar.html index 58923e0314..f109b670e7 100644 --- a/platform/forms/res/templates/toolbar.html +++ b/platform/forms/res/templates/toolbar.html @@ -20,31 +20,31 @@ at runtime from the About dialog for additional information. --> <form novalidate> - <div class="tool-bar btn-bar contents abs"> - <span ng-repeat="section in structure.sections" - class="l-control-group" - ng-if="!section.hidden" - title="{{section.description}}"> - <ng-form ng-repeat="item in section.items" - ng-class="{ 'input-labeled': item.name }" - ng-hide="item.hidden" - class="inline" - title="{{item.description}}" - name="mctFormInner"> + <div class="tool-bar btn-bar contents abs"> + <span ng-repeat="section in structure.sections" + class="l-control-group" + ng-if="!section.hidden" + title="{{section.description}}"> + <ng-form ng-repeat="item in section.items" + ng-class="{ 'input-labeled': item.name }" + ng-hide="item.hidden" + class="inline" + title="{{item.description}}" + name="mctFormInner"> - <label ng-if="item.name"> - {{item.name}}: - </label> - <mct-control key="item.control" - ng-class="{ disabled: item.disabled }" - ng-model="ngModel" - ng-required="item.required" - ng-pattern="getRegExp(item.pattern)" - options="item.options" - structure="item" - field="item.key"> - </mct-control> - </ng-form> - </span> - </div> + <label ng-if="item.name"> + {{item.name}}: + </label> + <mct-control key="item.control" + ng-class="{ disabled: item.disabled }" + ng-model="ngModel" + ng-required="item.required" + ng-pattern="getRegExp(item.pattern)" + options="item.options" + structure="item" + field="item.key"> + </mct-control> + </ng-form> + </span> + </div> </form> \ No newline at end of file