From 33c372765f15a5c8dc9e8e9c40f4d4a555fd44e6 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 7 Dec 2015 12:33:29 -0800 Subject: [PATCH 01/29] [Limits] Test limit usage from Fixed Position WTD-1337 --- .../layout/test/FixedControllerSpec.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/platform/features/layout/test/FixedControllerSpec.js b/platform/features/layout/test/FixedControllerSpec.js index 31d5e06659..90a397f374 100644 --- a/platform/features/layout/test/FixedControllerSpec.js +++ b/platform/features/layout/test/FixedControllerSpec.js @@ -423,6 +423,42 @@ define( // Style should have been updated expect(controller.selected().style).not.toEqual(oldStyle); }); + + it("reflects limit status", function () { + var elements; + + mockHandle.getDatum.andReturn({}); + mockHandle.getTelemetryObjects().forEach(function (mockObject) { + var id = mockObject.getId(), + mockLimitCapability = + jasmine.createSpyObj('limit-' + id, ['evaluate']); + + mockObject.getCapability.andCallFake(function (key) { + return (key === 'limit') && mockLimitCapability; + }); + + mockLimitCapability.evaluate + .andReturn({ cssClass: 'alarm-' + id }); + }); + + // Initialize + mockScope.domainObject = mockDomainObject; + mockScope.model = testModel; + findWatch("domainObject")(mockDomainObject); + findWatch("model.modified")(1); + findWatch("model.composition")(mockScope.model.composition); + + // Invoke the subscription callback + mockHandler.handle.mostRecentCall.args[1](); + + // Get elements that controller is now exposing + elements = controller.getElements(); + + // Limit-based CSS classes should be available + expect(elements[0].cssClass).toEqual("alarm-a"); + expect(elements[1].cssClass).toEqual("alarm-b"); + expect(elements[2].cssClass).toEqual("alarm-c"); + }); }); } ); From 30a8ba5c11f751791580bc6077aa1684c60bc4e5 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 7 Dec 2015 12:45:40 -0800 Subject: [PATCH 02/29] [Limits] Test limit usage in PlotController WTD-1337 --- .../features/plot/test/PlotControllerSpec.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/platform/features/plot/test/PlotControllerSpec.js b/platform/features/plot/test/PlotControllerSpec.js index 8edab2fc6d..d5100ab426 100644 --- a/platform/features/plot/test/PlotControllerSpec.js +++ b/platform/features/plot/test/PlotControllerSpec.js @@ -285,6 +285,33 @@ define( fireWatch("axes[1].active.key", 'someNewKey'); expect(mockHandle.request.calls.length).toEqual(2); }); + + it("provides classes for legends based on limit state", function () { + var mockTelemetryObjects = mockHandle.getTelemetryObjects(); + + mockHandle.getDatum.andReturn({}); + mockTelemetryObjects.forEach(function (mockObject, i) { + var id = 'object-' + i, + mockLimitCapability = + jasmine.createSpyObj('limit-' + id, ['evaluate']); + + mockObject.getId.andReturn(id); + mockObject.getCapability.andCallFake(function (key) { + return (key === 'limit') && mockLimitCapability; + }); + + mockLimitCapability.evaluate + .andReturn({ cssClass: 'alarm-' + id }); + }); + + mockScope.$watch.mostRecentCall.args[1](mockDomainObject); + mockHandler.handle.mostRecentCall.args[1](); + + mockTelemetryObjects.forEach(function (mockTelemetryObject) { + expect(controller.getLegendClass(mockTelemetryObject)) + .toEqual('alarm-' + mockTelemetryObject.getId()); + }); + }); }); } ); From 258c5d95e6bf227563a0b45c6f04ec3b8a1104a5 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 7 Dec 2015 12:58:56 -0800 Subject: [PATCH 03/29] [Limits] Test PlotLimitTracker --- .../test/elements/PlotLimitTrackerSpec.js | 103 ++++++++++++++++++ platform/features/plot/test/suite.json | 1 + 2 files changed, 104 insertions(+) create mode 100644 platform/features/plot/test/elements/PlotLimitTrackerSpec.js diff --git a/platform/features/plot/test/elements/PlotLimitTrackerSpec.js b/platform/features/plot/test/elements/PlotLimitTrackerSpec.js new file mode 100644 index 0000000000..1ba428115f --- /dev/null +++ b/platform/features/plot/test/elements/PlotLimitTrackerSpec.js @@ -0,0 +1,103 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + +define( + ["../../src/elements/PlotLimitTracker"], + function (PlotLimitTracker) { + "use strict"; + + describe("A plot's limit tracker", function () { + var mockHandle, + testRange, + mockTelemetryObjects, + testData, + mockLimitCapabilities, + tracker; + + beforeEach(function () { + testRange = "some-range"; + testData = {}; + mockHandle = jasmine.createSpyObj( + 'handle', + ['getTelemetryObjects', 'getDatum'] + ); + mockTelemetryObjects = ['a', 'b', 'c'].map(function (id, i) { + var mockTelemetryObject = jasmine.createSpyObj( + 'object-' + id, + [ 'getId', 'getCapability', 'getModel' ] + ), + mockLimitCapability = jasmine.createSpyObj( + 'limit-' + id, + [ 'evaluate' ] + ); + testData[id] = { id: id, value: i }; + mockTelemetryObject.getId.andReturn(id); + mockTelemetryObject.getCapability.andCallFake(function (key) { + return key === 'limit' && mockLimitCapability; + }); + mockLimitCapability.evaluate + .andReturn({ cssClass: 'alarm-' + id}); + return mockTelemetryObject; + }); + mockHandle.getTelemetryObjects.andReturn(mockTelemetryObjects); + mockHandle.getDatum.andCallFake(function (telemetryObject) { + return testData[telemetryObject.getId()]; + }); + + tracker = new PlotLimitTracker(mockHandle, testRange); + }); + + it("initially provides no limit state", function () { + mockTelemetryObjects.forEach(function (mockTelemetryObject) { + expect(tracker.getLegendClass(mockTelemetryObject)) + .toBeUndefined(); + }); + }); + + describe("when asked to update", function () { + beforeEach(function () { + tracker.update(); + }); + + it("evaluates limits using the limit capability", function () { + mockTelemetryObjects.forEach(function (mockTelemetryObject) { + var id = mockTelemetryObject.getId(), + mockLimit = + mockTelemetryObject.getCapability('limit'); + expect(mockLimit.evaluate) + .toHaveBeenCalledWith(testData[id], testRange); + }); + }); + + it("exposes legend classes returned by the limit capability", function () { + mockTelemetryObjects.forEach(function (mockTelemetryObject) { + var id = mockTelemetryObject.getId(); + expect(tracker.getLegendClass(mockTelemetryObject)) + .toEqual('alarm-' + id); + }); + }); + }); + + }); + } +); diff --git a/platform/features/plot/test/suite.json b/platform/features/plot/test/suite.json index 92dfcb1e8a..cec8798d77 100644 --- a/platform/features/plot/test/suite.json +++ b/platform/features/plot/test/suite.json @@ -6,6 +6,7 @@ "SubPlot", "SubPlotFactory", "elements/PlotAxis", + "elements/PlotLimitTracker", "elements/PlotLine", "elements/PlotLineBuffer", "elements/PlotPalette", From 14c5a817a7c3a5f60ff9441a1f926076f41dd6f7 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 7 Dec 2015 13:22:40 -0800 Subject: [PATCH 04/29] [Limits] Test exposure of datum ...which will be used to evaluate limits. --- .../test/TelemetrySubscriptionSpec.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/platform/telemetry/test/TelemetrySubscriptionSpec.js b/platform/telemetry/test/TelemetrySubscriptionSpec.js index 1715504b6e..e179a76bff 100644 --- a/platform/telemetry/test/TelemetrySubscriptionSpec.js +++ b/platform/telemetry/test/TelemetrySubscriptionSpec.js @@ -243,6 +243,26 @@ define( subscription.unsubscribe(); expect(mockUnlisten).toHaveBeenCalled(); }); + + it("provides telemetry as datum objects", function () { + var testDatum = { a: 1, b: 13, c: 42, d: -1977 }; + + function lookup(index, key) { + return testDatum[key]; + } + + mockSeries.getDomainValue.andCallFake(lookup); + mockSeries.getRangeValue.andCallFake(lookup); + + testMetadata.domains = [ { key: 'a' }, { key: 'b'} ]; + testMetadata.ranges = [ { key: 'c' }, { key: 'd'} ]; + + mockTelemetry.subscribe.mostRecentCall.args[0](mockSeries); + mockTimeout.mostRecentCall.args[0](); + + expect(subscription.getDatum(mockDomainObject)) + .toEqual(testDatum); + }); }); } ); From 6200ceddf8c66eeca15a9ac01359d45cea9e96d8 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 11 Dec 2015 09:51:58 -0800 Subject: [PATCH 05/29] [Documentation] Add text to main page #228 --- docs/gendocs.js | 19 +++++++++++++------ docs/src/index.html | 38 -------------------------------------- docs/src/index.md | 35 +++++++++++++++++++++++++++++++++++ package.json | 2 +- 4 files changed, 49 insertions(+), 45 deletions(-) delete mode 100644 docs/src/index.html create mode 100644 docs/src/index.md diff --git a/docs/gendocs.js b/docs/gendocs.js index 51c84d9a64..8ec401e0c3 100644 --- a/docs/gendocs.js +++ b/docs/gendocs.js @@ -106,7 +106,7 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define } // Convert from Github-flavored Markdown to HTML - function gfmifier() { + function gfmifier(renderTOC) { var transform = new stream.Transform({ objectMode: true }), markdown = ""; transform._transform = function (chunk, encoding, done) { @@ -114,9 +114,11 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define done(); }; transform._flush = function (done) { - // Prepend table of contents - markdown = - [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n"); + if (renderTOC){ + // Prepend table of contents + markdown = + [ TOC_HEAD, toc(markdown).content, "", markdown ].join("\n"); + } this.push(header); this.push(marked(markdown)); this.push(footer); @@ -146,6 +148,10 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define return customRenderer; } + function matchesPattern(pattern, candidate){ + return candidate.match(pattern); + } + options['in'] = options['in'] || options.i; options.out = options.out || options.o; @@ -168,13 +174,14 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define var destination = file.replace(options['in'], options.out) .replace(/md$/, "html"), destPath = path.dirname(destination), - prefix = path.basename(destination).replace(/\.html$/, ""); + prefix = path.basename(destination).replace(/\.html$/, ""), + renderTOC = file.match(options['suppress-toc'] || "") === null; mkdirp(destPath, function (err) { fs.createReadStream(file, { encoding: 'utf8' }) .pipe(split()) .pipe(nomnomlifier(destPath, prefix)) - .pipe(gfmifier()) + .pipe(gfmifier(renderTOC)) .pipe(fs.createWriteStream(destination, { encoding: 'utf8' })); diff --git a/docs/src/index.html b/docs/src/index.html deleted file mode 100644 index 727523eda3..0000000000 --- a/docs/src/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - Open MCT Web Documentation - - - Sections: - - - diff --git a/docs/src/index.md b/docs/src/index.md new file mode 100644 index 0000000000..3bf957156f --- /dev/null +++ b/docs/src/index.md @@ -0,0 +1,35 @@ +# OpenMCTWeb Documentation + +## Overview + + Documentation is provided to support the use and development of the + OpenMCTWeb mission operations software. It's recommended that before doing + any development with OpenMCTWeb you take some time to familiarize yourself + with the documentation below. + + OpenMCTWeb provides functionality out of the box, but it's also a framework for + building rich mission operations applications based on modern web technology. + The framework is configured declaratively, and defines conventions for + building on the provided capabilities by creating modular 'bundles' that + extend the provided extension points. The details of how to extend the + framework are provided in the following documentation. + +## Sections + + * The [Architecture Overview](architecture/) describes the concepts used + throughout OpenMCTWeb, and gives a high level overview of the framework's design. + + * The [Developer's guide](guide/) goes into more detail about how to use the + framework + and the capabilities that it provides. + + * The [Tutorials](tutorials/) give examples of extending the platform to add + functionality, + and integrate with data sources. + + * The [API](api/) document is generated from inline documentation + using jsdoc, and describes the javascript objects and functions that make up + the software framework. + + * Finally, the [Development Process](process/) document describes the + OpenMCTWeb software development cycle. \ No newline at end of file diff --git a/package.json b/package.json index c96642129c..e753aa7bfb 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "jshint": "jshint platform example || exit 0", "watch": "karma start", "jsdoc": "jsdoc -c jsdoc.json -r -d target/docs/api", - "otherdoc": "node docs/gendocs.js --in docs/src --out target/docs", + "otherdoc": "node docs/gendocs.js --in docs/src --out target/docs --suppress-toc 'docs/src/index.md|docs/src/process/index.md'", "docs": "npm run jsdoc ; npm run otherdoc" }, "repository": { From 604b29096d760f4c19bfe6163548a4f3c3b148d3 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 11 Dec 2015 09:53:55 -0800 Subject: [PATCH 06/29] [Documentation] #228 added inline comment about TOC suppression --- docs/gendocs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/gendocs.js b/docs/gendocs.js index 8ec401e0c3..f01db5b340 100644 --- a/docs/gendocs.js +++ b/docs/gendocs.js @@ -175,6 +175,8 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define .replace(/md$/, "html"), destPath = path.dirname(destination), prefix = path.basename(destination).replace(/\.html$/, ""), + //Determine whether TOC should be rendered for this file based + //on regex provided as command line option renderTOC = file.match(options['suppress-toc'] || "") === null; mkdirp(destPath, function (err) { From b6acdb12ec532acaa2ca1ca2a157d52a3be6b324 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 11 Dec 2015 11:09:03 -0800 Subject: [PATCH 07/29] Removed superfluous function --- docs/gendocs.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/gendocs.js b/docs/gendocs.js index f01db5b340..10facc0ded 100644 --- a/docs/gendocs.js +++ b/docs/gendocs.js @@ -148,10 +148,6 @@ GLOBAL.window = GLOBAL.window || GLOBAL; // nomnoml expects window to be define return customRenderer; } - function matchesPattern(pattern, candidate){ - return candidate.match(pattern); - } - options['in'] = options['in'] || options.i; options.out = options.out || options.o; From 0d894a9f39cc1583409c196a0af192cb61e14840 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 11 Dec 2015 11:54:23 -0800 Subject: [PATCH 08/29] [Documentation] Tweak spelling / phrasing * Add spaces to 'Open MCT Web' for consistency * Use term 'platform' instead of 'framework' for consistency with the developer guide * Avoid the term 'capabilities' (could be ambiguous in the context of other documentation) * Use canonical casing for JSDoc and JavaScript * Simplify phrasing of first sentence * Change casing of 'Developer Guide' for consistency with other bullets From review of https://github.com/nasa/openmctweb/pull/412 --- docs/src/index.md | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/src/index.md b/docs/src/index.md index 3bf957156f..dbb1d36220 100644 --- a/docs/src/index.md +++ b/docs/src/index.md @@ -1,35 +1,35 @@ -# OpenMCTWeb Documentation +# Open MCT Web Documentation ## Overview - Documentation is provided to support the use and development of the - OpenMCTWeb mission operations software. It's recommended that before doing - any development with OpenMCTWeb you take some time to familiarize yourself + Documentation is provided to support the use and development of + Open MCT Web. It's recommended that before doing + any development with Open MCT Web you take some time to familiarize yourself with the documentation below. - OpenMCTWeb provides functionality out of the box, but it's also a framework for + Open MCT Web provides functionality out of the box, but it's also a platform for building rich mission operations applications based on modern web technology. - The framework is configured declaratively, and defines conventions for + The platform is configured declaratively, and defines conventions for building on the provided capabilities by creating modular 'bundles' that - extend the provided extension points. The details of how to extend the - framework are provided in the following documentation. + extend the platform at a variety of extension points. The details of how to + extend the platform are provided in the following documentation. ## Sections * The [Architecture Overview](architecture/) describes the concepts used - throughout OpenMCTWeb, and gives a high level overview of the framework's design. + throughout Open MCT Web, and gives a high level overview of the platform's design. - * The [Developer's guide](guide/) goes into more detail about how to use the - framework - and the capabilities that it provides. + * The [Developer's Guide](guide/) goes into more detail about how to use the + platform and the functionality that it provides. * The [Tutorials](tutorials/) give examples of extending the platform to add functionality, and integrate with data sources. * The [API](api/) document is generated from inline documentation - using jsdoc, and describes the javascript objects and functions that make up - the software framework. + using [JSDoc](http://usejsdoc.org/), and describes the JavaScript objects and + functions that make up the software platform. * Finally, the [Development Process](process/) document describes the - OpenMCTWeb software development cycle. \ No newline at end of file + Open MCT Web software development cycle. + \ No newline at end of file From 21fd16ddf106f22ccb6a394b7a1d0a619b1b1156 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 11 Dec 2015 15:02:10 -0800 Subject: [PATCH 09/29] [Frontend] Delay added to expanded status indicator collapse open #336 --- .../general/res/sass/controls/_messages.scss | 3 +- .../espresso/res/css/theme-espresso.css | 124 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 124 ++++++++++-------- 3 files changed, 142 insertions(+), 109 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 740df6ba8d..4d2c5ca155 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -65,7 +65,7 @@ } .label { // Max-width silliness is necessary for width transition - @include trans-prop-nice(max-width, .25s); + @include trans-prop-nice(max-width, .25s, 1.5s); overflow: hidden; max-width: 0px; } @@ -76,6 +76,7 @@ } &:hover { .label { + @include trans-prop-nice(max-width, .25s, 0s); max-width: 450px; width: auto; } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 2493661aa8..8db04cc119 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -3069,10 +3069,10 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - -moz-transition-delay: 0; - -o-transition-delay: 0; - -webkit-transition-delay: 0; - transition-delay: 0; + -moz-transition-delay: 1.5s; + -o-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + transition-delay: 1.5s; overflow: hidden; max-width: 0px; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ @@ -3097,25 +3097,41 @@ label.checkbox.custom { opacity: 1; } /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0s; + -o-transition-delay: 0s; + -webkit-transition-delay: 0s; + transition-delay: 0s; max-width: 450px; width: auto; } - /* line 82, ../../../../general/res/sass/controls/_messages.scss */ + /* line 83, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } /* Styles for messages and message banners */ -/* line 90, ../../../../general/res/sass/controls/_messages.scss */ +/* line 91, ../../../../general/res/sass/controls/_messages.scss */ .message.block { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 10px; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 95, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 60, 0, 0.3); color: #ff8a66; } -/* line 100, ../../../../general/res/sass/controls/_messages.scss */ +/* line 101, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3144,7 +3160,7 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.minimized { -moz-transition-property: left, opacity; -o-transition-property: left, opacity; @@ -3160,11 +3176,11 @@ label.checkbox.custom { transition-timing-function: ease-in-out; left: 0; opacity: 0; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 125, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new { left: 50%; opacity: 1; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 128, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new:not(.info) { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -3181,33 +3197,33 @@ label.checkbox.custom { -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } - /* line 132, ../../../../general/res/sass/controls/_messages.scss */ + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 136, ../../../../general/res/sass/controls/_messages.scss */ + /* line 137, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 139, ../../../../general/res/sass/controls/_messages.scss */ + /* line 140, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 143, ../../../../general/res/sass/controls/_messages.scss */ + /* line 144, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } - /* line 155, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 166, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3224,10 +3240,10 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 169, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 170, ../../../../general/res/sass/controls/_messages.scss */ + /* line 171, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3248,13 +3264,13 @@ label.checkbox.custom { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } - /* line 174, ../../../../general/res/sass/controls/_messages.scss */ + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 176, ../../../../general/res/sass/controls/_messages.scss */ + /* line 177, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + /* line 181, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok, .s-message-banner.info { background-color: #285b31; color: #ccc; } @@ -3267,7 +3283,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #285b31; } - /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + /* line 185, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d35200; color: #ccc; } @@ -3280,7 +3296,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d35200; } - /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + /* line 190, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.error { background-color: #751e21; color: #ccc; } @@ -3307,7 +3323,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 231, ../../../../general/res/sass/controls/_messages.scss */ +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -3315,52 +3331,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 235, ../../../../general/res/sass/controls/_messages.scss */ + /* line 236, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 241, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 247, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 260, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -3371,40 +3387,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 264, ../../../../general/res/sass/controls/_messages.scss */ + /* line 265, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 276, ../../../../general/res/sass/controls/_messages.scss */ +/* line 277, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -3412,26 +3428,26 @@ label.checkbox.custom { background: rgba(230, 230, 230, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 283, ../../../../general/res/sass/controls/_messages.scss */ + /* line 284, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 289, ../../../../general/res/sass/controls/_messages.scss */ + /* line 290, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 292, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #b3b3b3; } - /* line 293, ../../../../general/res/sass/controls/_messages.scss */ + /* line 294, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 296, ../../../../general/res/sass/controls/_messages.scss */ + /* line 297, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 304, ../../../../general/res/sass/controls/_messages.scss */ + /* line 305, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0b00551ac4..8096adf533 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -3008,10 +3008,10 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - -moz-transition-delay: 0; - -o-transition-delay: 0; - -webkit-transition-delay: 0; - transition-delay: 0; + -moz-transition-delay: 1.5s; + -o-transition-delay: 1.5s; + -webkit-transition-delay: 1.5s; + transition-delay: 1.5s; overflow: hidden; max-width: 0px; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ @@ -3036,25 +3036,41 @@ label.checkbox.custom { opacity: 1; } /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0s; + -o-transition-delay: 0s; + -webkit-transition-delay: 0s; + transition-delay: 0s; max-width: 450px; width: auto; } - /* line 82, ../../../../general/res/sass/controls/_messages.scss */ + /* line 83, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } /* Styles for messages and message banners */ -/* line 90, ../../../../general/res/sass/controls/_messages.scss */ +/* line 91, ../../../../general/res/sass/controls/_messages.scss */ .message.block { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 10px; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 95, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 60, 0, 0.3); color: #ff8a66; } -/* line 100, ../../../../general/res/sass/controls/_messages.scss */ +/* line 101, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3083,7 +3099,7 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.minimized { -moz-transition-property: left, opacity; -o-transition-property: left, opacity; @@ -3099,11 +3115,11 @@ label.checkbox.custom { transition-timing-function: ease-in-out; left: 0; opacity: 0; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 125, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new { left: 50%; opacity: 1; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 128, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner.new:not(.info) { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -3120,33 +3136,33 @@ label.checkbox.custom { -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } - /* line 132, ../../../../general/res/sass/controls/_messages.scss */ + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 136, ../../../../general/res/sass/controls/_messages.scss */ + /* line 137, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 139, ../../../../general/res/sass/controls/_messages.scss */ + /* line 140, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 143, ../../../../general/res/sass/controls/_messages.scss */ + /* line 144, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } - /* line 155, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 166, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3163,10 +3179,10 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 169, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 170, ../../../../general/res/sass/controls/_messages.scss */ + /* line 171, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3187,13 +3203,13 @@ label.checkbox.custom { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } - /* line 174, ../../../../general/res/sass/controls/_messages.scss */ + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 176, ../../../../general/res/sass/controls/_messages.scss */ + /* line 177, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + /* line 181, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok, .s-message-banner.info { background-color: #275a36; color: #fff; } @@ -3206,7 +3222,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #275a36; } - /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + /* line 185, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d26a00; color: #fff; } @@ -3219,7 +3235,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d26a00; } - /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + /* line 190, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.error { background-color: #702a28; color: #fff; } @@ -3246,7 +3262,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 231, ../../../../general/res/sass/controls/_messages.scss */ +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -3254,52 +3270,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 235, ../../../../general/res/sass/controls/_messages.scss */ + /* line 236, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 241, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 247, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 260, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -3310,40 +3326,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 264, ../../../../general/res/sass/controls/_messages.scss */ + /* line 265, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 195, ../../../../general/res/sass/controls/_messages.scss */ +/* line 196, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 197, ../../../../general/res/sass/controls/_messages.scss */ + /* line 198, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 204, ../../../../general/res/sass/controls/_messages.scss */ +/* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 206, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 208, ../../../../general/res/sass/controls/_messages.scss */ +/* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 212, ../../../../general/res/sass/controls/_messages.scss */ +/* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 213, ../../../../general/res/sass/controls/_messages.scss */ + /* line 214, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 276, ../../../../general/res/sass/controls/_messages.scss */ +/* line 277, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -3351,26 +3367,26 @@ label.checkbox.custom { background: rgba(102, 102, 102, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 283, ../../../../general/res/sass/controls/_messages.scss */ + /* line 284, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 289, ../../../../general/res/sass/controls/_messages.scss */ + /* line 290, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 292, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #999999; } - /* line 293, ../../../../general/res/sass/controls/_messages.scss */ + /* line 294, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 296, ../../../../general/res/sass/controls/_messages.scss */ + /* line 297, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 304, ../../../../general/res/sass/controls/_messages.scss */ + /* line 305, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } From 33b1c1689c01f3111fe87983395f2fe96d90b940 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 11 Dec 2015 15:49:50 -0800 Subject: [PATCH 10/29] [Frontend] Added classes for no-collapse indicator open #304 Added classes string and related classes to ClockIndicator; --- .../general/res/sass/controls/_messages.scss | 56 +++-- .../general/res/templates/indicator.html | 1 - .../espresso/res/css/theme-espresso.css | 193 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 193 ++++++++++-------- .../clock/src/indicators/ClockIndicator.js | 2 +- 5 files changed, 257 insertions(+), 188 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 4d2c5ca155..8bb8337d9c 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -37,6 +37,8 @@ } .status.block { + $transDelay: 1.5s; + $transSpeed: .25s; color: $colorStatusDefault; cursor: default; display: inline-block; @@ -44,13 +46,47 @@ .status-indicator, .label, .count { - //@include test(#00ff00); display: inline-block; vertical-align: top; } + + &.no-icon { + .status-indicator { + display: none; + } + } + + &.float-right { + float: right; + } + + &.subtle { + opacity: 0.5; + } .status-indicator { margin-right: $interiorMarginSm; } + + &:not(.no-collapse) { + .label { + // Max-width silliness is necessary for width transition + @include trans-prop-nice(max-width, $transSpeed, $transDelay); + overflow: hidden; + max-width: 0px; + } + &:hover { + .label { + @include trans-prop-nice(max-width, $transSpeed, 0s); + max-width: 450px; + width: auto; + } + .count { + @include trans-prop-nice(max-width, $transSpeed, 0s); + opacity: 0; + } + } + } + &.ok .status-indicator, &.info .status-indicator { color: $colorStatusInfo; @@ -63,27 +99,11 @@ &.error .status-indicator { color: $colorStatusError; } - .label { - // Max-width silliness is necessary for width transition - @include trans-prop-nice(max-width, .25s, 1.5s); - overflow: hidden; - max-width: 0px; - } .count { - @include trans-prop-nice(opacity, .25s); + @include trans-prop-nice(opacity, $transSpeed, $transDelay); font-weight: bold; opacity: 1; } - &:hover { - .label { - @include trans-prop-nice(max-width, .25s, 0s); - max-width: 450px; - width: auto; - } - .count { - opacity: 0; - } - } } /* Styles for messages and message banners */ diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index e9be598b18..fb4a2f89c9 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -20,7 +20,6 @@ at runtime from the About dialog for additional information. --> -
Date: Tue, 15 Dec 2015 17:06:47 -0800 Subject: [PATCH 11/29] [Frontend] Adding s-status-pending classes to tree item labels open #431 In-progress; --- .../res/sass/helpers/_wait-spinner.scss | 15 +- .../commonUI/general/res/sass/tree/_tree.scss | 53 ++--- .../commonUI/general/res/templates/label.html | 6 +- .../espresso/res/css/theme-espresso.css | 185 ++++++++---------- .../themes/snow/res/css/theme-snow.css | 183 ++++++++--------- 5 files changed, 196 insertions(+), 246 deletions(-) diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 86c23a266a..b1d14ce6ef 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -24,11 +24,11 @@ 100% { transform: rotate(359deg); } } -@mixin wait-spinner2($b: 5px, $c: $colorAlt1) { +@mixin spinner($b: 5px, $c: $colorAlt1) { @include keyframes(rotateCentered) { - 0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); } - 100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); } - } + 0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); } + } @include animation-name(rotateCentered); @include animation-duration(0.5s); @include animation-iteration-count(infinite); @@ -36,8 +36,13 @@ border-color: rgba($c, 0.25); border-top-color: rgba($c, 1.0); border-style: solid; - border-width: 5px; + border-width: $b; @include border-radius(100%); +} + + +@mixin wait-spinner2($b: 5px, $c: $colorAlt1) { + @include spinner($b, $c); @include box-sizing(border-box); display: block; position: absolute; diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index a3b9a1a000..b35fb4634e 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -59,7 +59,6 @@ ul.tree { } } - .label, .t-object-label { display: block; @include absPosDefault(); @@ -76,38 +75,6 @@ ul.tree { @include transform(translateY(-50%)); } - .type-icon { - //@include absPosDefault(0, false); - $d: $treeTypeIconH; - @include txtShdwSubtle($shdwItemTreeIcon); - font-size: $treeTypeIconH; - color: $colorItemTreeIcon; - left: $interiorMargin; - position: absolute; - @include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx); - line-height: 100%; - right: auto; width: $treeTypeIconH; - - .icon { - &.l-icon-link, - &.l-icon-alert { - position: absolute; - z-index: 2; - } - &.l-icon-alert { - $d: 8px; - @include ancillaryIcon($d, $colorAlert); - top: 1px; - right: -2px; - } - &.l-icon-link { - $d: 8px; - @include ancillaryIcon($d, $colorIconLink); - left: -3px; - bottom: 0px; - } - } - } .title-label, .t-title-label { @include absPosDefault(); @@ -161,7 +128,21 @@ ul.tree { } .tree-item { - .t-object-label { - left: $interiorMargin + $treeVCW; - } + mct-representation { + .t-object-label { + left: $interiorMargin + $treeVCW; + } + &.s-status-pending { + .t-object-label { + &:before { + @include tItemIcon(); + @include spinner(0.25em, $colorItemTreeIcon); + content: ""; + } + .t-item-icon .t-item-icon-glyph { + display: none; + } + } + } + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index beb57626a5..aaad04dbed 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -20,6 +20,8 @@ at runtime from the About dialog for additional information. --> -{{type.getGlyph()}} -{{model.name}} + + {{type.getGlyph()}} + + {{model.name}} diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 2493661aa8..01362a9d39 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -1251,7 +1251,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } -/* line 63, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 68, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner, .wait-spinner { display: block; @@ -1276,7 +1276,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { margin-top: -5%; margin-left: -5%; z-index: 2; } - /* line 74, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner.inline, .wait-spinner.inline { display: inline-block !important; @@ -1284,26 +1284,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { position: relative !important; vertical-align: middle; } -/* line 82, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 87, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder { pointer-events: none; position: absolute; } - /* line 86, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.align-left .t-wait-spinner { left: 0; margin-left: 0; } - /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 96, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size { display: inline-block; height: 100%; width: 100%; } - /* line 94, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 99, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size .t-wait-spinner { top: 0; margin-top: 0; padding: 30%; } -/* line 103, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 108, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .treeview .wait-spinner { display: block; position: absolute; @@ -1325,7 +1325,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 2px; left: 0; } -/* line 112, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 117, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .wait-spinner.sm { display: block; position: absolute; @@ -1348,13 +1348,13 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 0; left: 0; } -/* line 122, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 127, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading { pointer-events: none; } - /* line 125, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 130, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before, .loading:after { content: ''; } - /* line 129, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 134, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -1401,7 +1401,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); } } - /* line 133, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 138, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:after { overflow: hidden; position: absolute; @@ -1414,7 +1414,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { background: rgba(153, 153, 153, 0.2); display: block; z-index: 9; } - /* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 144, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading.tree-item:before { padding: 0.375rem; border-width: 2px; } @@ -5599,7 +5599,7 @@ span.req { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/tree/_tree.scss */ +/* line 35, ../../../../general/res/sass/tree/_tree.scss */ ul.tree { margin: 0; padding: 0; @@ -5612,15 +5612,15 @@ ul.tree { list-style-type: none; margin: 0; padding: 0; } - /* line 26, ../../../../general/res/sass/tree/_tree.scss */ + /* line 38, ../../../../general/res/sass/tree/_tree.scss */ ul.tree li { display: block; position: relative; } - /* line 30, ../../../../general/res/sass/tree/_tree.scss */ + /* line 42, ../../../../general/res/sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } -/* line 35, ../../../../general/res/sass/tree/_tree.scss */ +/* line 47, ../../../../general/res/sass/tree/_tree.scss */ .tree-item, .search-result-item { -moz-box-sizing: border-box; @@ -5639,7 +5639,7 @@ ul.tree { line-height: 1.5rem; margin-bottom: 3px; position: relative; } - /* line 48, ../../../../general/res/sass/tree/_tree.scss */ + /* line 60, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { color: rgba(255, 255, 255, 0.3); @@ -5648,14 +5648,12 @@ ul.tree { font-size: 0.75em; width: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 56, ../../../../general/res/sass/tree/_tree.scss */ + /* line 68, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #ffc700 !important; } } - /* line 62, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label, + /* line 74, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, - .search-result-item .label, .search-result-item .t-object-label { display: block; overflow: hidden; @@ -5667,10 +5665,8 @@ ul.tree { width: auto; height: auto; line-height: 1.5rem; } - /* line 68, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .t-item-icon, + /* line 79, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, - .search-result-item .label .t-item-icon, .search-result-item .t-object-label .t-item-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 1.4em; @@ -5683,75 +5679,9 @@ ul.tree { -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } - /* line 79, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon, - .tree-item .t-object-label .type-icon, - .search-result-item .label .type-icon, - .search-result-item .t-object-label .type-icon { - text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; - font-size: 1.4em; - color: #0099cc; - left: 5px; - position: absolute; - top: 4px; - bottom: auto; - height: 16px; - line-height: 100%; - right: auto; - width: 1.4em; } - /* line 92, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .l-icon-link.t-item-icon, .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .l-icon-alert.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-link, - .tree-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-alert, - .tree-item .t-object-label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-link, - .search-result-item .label .type-icon .l-icon-link.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-alert, - .search-result-item .label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-link, - .search-result-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-alert, - .search-result-item .t-object-label .type-icon .l-icon-alert.t-item-icon { - position: absolute; - z-index: 2; } - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .l-icon-alert.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-alert, - .tree-item .t-object-label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-alert, - .search-result-item .label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-alert, - .search-result-item .t-object-label .type-icon .l-icon-alert.t-item-icon { - color: #ff3c00; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - top: 1px; - right: -2px; } - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .l-icon-link.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-link, - .tree-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-link, - .search-result-item .label .type-icon .l-icon-link.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-link, - .search-result-item .t-object-label .type-icon .l-icon-link.t-item-icon { - color: #49dedb; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - left: -3px; - bottom: 0px; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .title-label, - .tree-item .label .t-title-label, + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, - .search-result-item .label .title-label, - .search-result-item .label .t-title-label, .search-result-item .t-object-label .title-label, .search-result-item .t-object-label .t-title-label { overflow: hidden; @@ -5767,49 +5697,100 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 94, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 125, ../../../../general/res/sass/tree/_tree.scss */ + /* line 97, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 128, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 136, ../../../../general/res/sass/tree/_tree.scss */ + /* line 108, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 139, ../../../../general/res/sass/tree/_tree.scss */ + /* line 111, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 146, ../../../../general/res/sass/tree/_tree.scss */ + /* line 118, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 150, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 155, ../../../../general/res/sass/tree/_tree.scss */ + /* line 127, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 164, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item .t-object-label { +/* line 137, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation .t-object-label { left: 15px; } +/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label:before { + text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; + font-size: 1.4em; + color: #0099cc; + position: absolute; + left: 5px; + top: 50%; + width: 1.4em; + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + -moz-animation-name: rotateCentered; + -webkit-animation-name: rotateCentered; + animation-name: rotateCentered; + -moz-animation-duration: 0.5s; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -moz-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + border-color: rgba(0, 0, 255, 0.25); + border-top-color: blue; + border-style: solid; + border-width: 2px; + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + border-radius: 100%; + content: ""; } +@-moz-keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +@-webkit-keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +@keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { + display: none; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0b00551ac4..123402b4a6 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -1232,7 +1232,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } -/* line 63, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 68, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner, .wait-spinner { display: block; @@ -1257,7 +1257,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { margin-top: -5%; margin-left: -5%; z-index: 2; } - /* line 74, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner.inline, .wait-spinner.inline { display: inline-block !important; @@ -1265,26 +1265,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { position: relative !important; vertical-align: middle; } -/* line 82, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 87, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder { pointer-events: none; position: absolute; } - /* line 86, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.align-left .t-wait-spinner { left: 0; margin-left: 0; } - /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 96, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size { display: inline-block; height: 100%; width: 100%; } - /* line 94, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 99, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size .t-wait-spinner { top: 0; margin-top: 0; padding: 30%; } -/* line 103, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 108, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .treeview .wait-spinner { display: block; position: absolute; @@ -1306,7 +1306,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 2px; left: 0; } -/* line 112, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 117, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .wait-spinner.sm { display: block; position: absolute; @@ -1329,13 +1329,13 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 0; left: 0; } -/* line 122, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 127, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading { pointer-events: none; } - /* line 125, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 130, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before, .loading:after { content: ''; } - /* line 129, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 134, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -1382,7 +1382,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); } } - /* line 133, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 138, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:after { overflow: hidden; position: absolute; @@ -1395,7 +1395,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { background: rgba(119, 107, 162, 0.1); display: block; z-index: 9; } - /* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 144, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading.tree-item:before { padding: 0.375rem; border-width: 2px; } @@ -5503,7 +5503,7 @@ span.req { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/tree/_tree.scss */ +/* line 35, ../../../../general/res/sass/tree/_tree.scss */ ul.tree { margin: 0; padding: 0; @@ -5516,15 +5516,15 @@ ul.tree { list-style-type: none; margin: 0; padding: 0; } - /* line 26, ../../../../general/res/sass/tree/_tree.scss */ + /* line 38, ../../../../general/res/sass/tree/_tree.scss */ ul.tree li { display: block; position: relative; } - /* line 30, ../../../../general/res/sass/tree/_tree.scss */ + /* line 42, ../../../../general/res/sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } -/* line 35, ../../../../general/res/sass/tree/_tree.scss */ +/* line 47, ../../../../general/res/sass/tree/_tree.scss */ .tree-item, .search-result-item { -moz-box-sizing: border-box; @@ -5543,7 +5543,7 @@ ul.tree { line-height: 1.5rem; margin-bottom: 3px; position: relative; } - /* line 48, ../../../../general/res/sass/tree/_tree.scss */ + /* line 60, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { color: #666; @@ -5552,14 +5552,12 @@ ul.tree { font-size: 0.75em; width: 10px; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 56, ../../../../general/res/sass/tree/_tree.scss */ + /* line 68, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #0099cc !important; } } - /* line 62, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label, + /* line 74, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, - .search-result-item .label, .search-result-item .t-object-label { display: block; overflow: hidden; @@ -5571,10 +5569,8 @@ ul.tree { width: auto; height: auto; line-height: 1.5rem; } - /* line 68, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .t-item-icon, + /* line 79, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, - .search-result-item .label .t-item-icon, .search-result-item .t-object-label .t-item-icon { font-size: 1.4em; color: #0099cc; @@ -5586,74 +5582,9 @@ ul.tree { -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } - /* line 79, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon, - .tree-item .t-object-label .type-icon, - .search-result-item .label .type-icon, - .search-result-item .t-object-label .type-icon { - font-size: 1.4em; - color: #0099cc; - left: 5px; - position: absolute; - top: 4px; - bottom: auto; - height: 16px; - line-height: 100%; - right: auto; - width: 1.4em; } - /* line 92, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .l-icon-link.t-item-icon, .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .l-icon-alert.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-link, - .tree-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-alert, - .tree-item .t-object-label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-link, - .search-result-item .label .type-icon .l-icon-link.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-alert, - .search-result-item .label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-link, - .search-result-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-alert, - .search-result-item .t-object-label .type-icon .l-icon-alert.t-item-icon { - position: absolute; - z-index: 2; } - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-alert, .tree-item .label .type-icon .l-icon-alert.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-alert, - .tree-item .t-object-label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-alert, - .search-result-item .label .type-icon .l-icon-alert.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-alert, - .search-result-item .t-object-label .type-icon .l-icon-alert.t-item-icon { - color: #ff3c00; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - top: 1px; - right: -2px; } - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .l-icon-link.t-item-icon, - .tree-item .t-object-label .type-icon .icon.l-icon-link, - .tree-item .t-object-label .type-icon .l-icon-link.t-item-icon, - .search-result-item .label .type-icon .icon.l-icon-link, - .search-result-item .label .type-icon .l-icon-link.t-item-icon, - .search-result-item .t-object-label .type-icon .icon.l-icon-link, - .search-result-item .t-object-label .type-icon .l-icon-link.t-item-icon { - color: #49dedb; - font-size: 8px; - line-height: 8px; - height: 8px; - width: 8px; - left: -3px; - bottom: 0px; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ - .tree-item .label .title-label, - .tree-item .label .t-title-label, + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, - .search-result-item .label .title-label, - .search-result-item .label .t-title-label, .search-result-item .t-object-label .title-label, .search-result-item .t-object-label .t-title-label { overflow: hidden; @@ -5669,49 +5600,99 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 94, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 125, ../../../../general/res/sass/tree/_tree.scss */ + /* line 97, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 128, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 136, ../../../../general/res/sass/tree/_tree.scss */ + /* line 108, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 139, ../../../../general/res/sass/tree/_tree.scss */ + /* line 111, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 146, ../../../../general/res/sass/tree/_tree.scss */ + /* line 118, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 150, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 155, ../../../../general/res/sass/tree/_tree.scss */ + /* line 127, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 164, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item .t-object-label { +/* line 137, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation .t-object-label { left: 15px; } +/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label:before { + font-size: 1.4em; + color: #0099cc; + position: absolute; + left: 5px; + top: 50%; + width: 1.4em; + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + -moz-animation-name: rotateCentered; + -webkit-animation-name: rotateCentered; + animation-name: rotateCentered; + -moz-animation-duration: 0.5s; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -moz-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + border-color: rgba(0, 0, 255, 0.25); + border-top-color: blue; + border-style: solid; + border-width: 2px; + -moz-border-radius: 100%; + -webkit-border-radius: 100%; + border-radius: 100%; + content: ""; } +@-moz-keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +@-webkit-keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +@keyframes rotateCentered { + 0% { + transform: translateX(-50%) translateY(-50%) rotate(0deg); } + 100% { + transform: translateX(-50%) translateY(-50%) rotate(359deg); } } +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { + display: none; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government From 65a1d7495db26910b33834bb14dcd72a54a379a8 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 15 Dec 2015 18:17:06 -0800 Subject: [PATCH 12/29] [Frontend] Converting tree items and labels to flex-box open #431 In-progress; TO-DO: need to fix mobile styles! --- .../res/sass/helpers/_wait-spinner.scss | 4 +- .../commonUI/general/res/sass/tree/_tree.scss | 50 +++-- .../commonUI/general/res/templates/label.html | 6 +- .../general/res/templates/tree-node.html | 9 +- .../espresso/res/css/theme-espresso.css | 174 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 173 +++++++++-------- .../search/res/templates/search-item.html | 5 +- platform/search/res/templates/search.html | 3 +- 8 files changed, 236 insertions(+), 188 deletions(-) diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index b1d14ce6ef..42d918c729 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -26,8 +26,8 @@ @mixin spinner($b: 5px, $c: $colorAlt1) { @include keyframes(rotateCentered) { - 0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); } - 100% { transform: translateX(-50%) translateY(-50%) rotate(359deg); } + 0% { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); } + 100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); } } @include animation-name(rotateCentered); @include animation-duration(0.5s); diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index b35fb4634e..4d1c28657e 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -38,20 +38,33 @@ ul.tree { @include box-sizing(border-box); @include border-radius($basicCr); @include single-transition(background-color, 0.25s); - display: block; font-size: 0.8rem; height: $menuLineH; line-height: $menuLineH; margin-bottom: $interiorMarginSm; + padding: 0 $interiorMarginSm; position: relative; .view-control { + @extend .flex-elem; color: $colorItemTreeVC; - display: inline-block; - margin-left: $interiorMargin; + //display: inline-block; + margin-right: $interiorMargin; font-size: 0.75em; width: $treeVCW; - $runningItemW: $interiorMargin + $treeVCW; + &.has-children { + &:before { + //@include trans-prop-nice(rotate); + content: ">"; + //position: absolute; + //top: 50%; + //left: 50%; + } + &.expanded:before { + //@include transform(translateX(-50%) translateY(-50%) rotate(90deg)); + content: "v"; + } + } @include desktop { &:hover { color: $colorItemTreeVCHover !important; @@ -60,29 +73,27 @@ ul.tree { } .t-object-label { - display: block; - @include absPosDefault(); + //display: block; + //@include absPosDefault(); line-height: $menuLineH; .t-item-icon { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; color: $colorItemTreeIcon; - position: absolute; - left: $interiorMargin; - top: 50%; + //position: absolute; + //left: $interiorMargin; + //top: 50%; width: $treeTypeIconH; - @include transform(translateY(-50%)); + //@include transform(translateY(-50%)); } .title-label, .t-title-label { - @include absPosDefault(); - display: block; - left: $runningItemW + ($interiorMargin * 3); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + @include ellipsize(); + //@include absPosDefault(); + //display: block; + //left: $runningItemW + ($interiorMargin * 3); } } @@ -129,13 +140,12 @@ ul.tree { .tree-item { mct-representation { - .t-object-label { - left: $interiorMargin + $treeVCW; - } + //.t-object-label { + // left: $interiorMargin + $treeVCW; + //} &.s-status-pending { .t-object-label { &:before { - @include tItemIcon(); @include spinner(0.25em, $colorItemTreeIcon); content: ""; } diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index aaad04dbed..2b04d85e37 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -19,9 +19,9 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - - + + {{type.getGlyph()}} - {{model.name}} + {{model.name}} diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 885646d606..8ac0ed6799 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -22,21 +22,20 @@ - {{toggle.isActive() ? "v" : ">"}} "; } + /* line 63, ../../../../general/res/sass/tree/_tree.scss */ + .tree-item .view-control.has-children.expanded:before, + .search-result-item .view-control.has-children.expanded:before { + content: "v"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 68, ../../../../general/res/sass/tree/_tree.scss */ + /* line 69, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #ffc700 !important; } } - /* line 74, ../../../../general/res/sass/tree/_tree.scss */ + /* line 75, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { - display: block; - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; line-height: 1.5rem; } - /* line 79, ../../../../general/res/sass/tree/_tree.scss */ + /* line 80, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, .search-result-item .t-object-label .t-item-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 1.4em; color: #0099cc; - position: absolute; - left: 5px; - top: 50%; - width: 1.4em; - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); } - /* line 83, ../../../../general/res/sass/tree/_tree.scss */ + width: 1.4em; } + /* line 91, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, .search-result-item .t-object-label .t-title-label { - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; - display: block; - left: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 108, ../../../../general/res/sass/tree/_tree.scss */ + /* line 114, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 118, ../../../../general/res/sass/tree/_tree.scss */ + /* line 124, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 128, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 127, ../../../../general/res/sass/tree/_tree.scss */ + /* line 133, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 137, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation .t-object-label { - left: 15px; } -/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +/* line 148, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label:before { - text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; - font-size: 1.4em; - color: #0099cc; - position: absolute; - left: 5px; - top: 50%; - width: 1.4em; - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5765,30 +5773,40 @@ ul.tree { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; - border-color: rgba(0, 0, 255, 0.25); - border-top-color: blue; + border-color: rgba(0, 153, 204, 0.25); + border-top-color: #0099cc; border-style: solid; - border-width: 2px; + border-width: 0.25em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; content: ""; } @-moz-keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @-webkit-keyframes rotateCentered { 0% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +/* line 152, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 123402b4a6..1f79173373 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -527,23 +527,47 @@ mct-container { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } /* line 99, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem, - .l-flex-col .flex-elem { + .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, + .l-flex-row .search-result-item .view-control, + .search-result-item .l-flex-row .view-control, + .l-flex-col .flex-elem, + .l-flex-col .tree-item .view-control, + .tree-item .l-flex-col .view-control, + .l-flex-col .search-result-item .view-control, + .search-result-item .l-flex-col .view-control { min-height: 0; position: relative; } /* line 102, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows), - .l-flex-col .flex-elem:not(.grows) { + .l-flex-row .flex-elem:not(.grows), .l-flex-row .tree-item .view-control:not(.grows), .tree-item .l-flex-row .view-control:not(.grows), + .l-flex-row .search-result-item .view-control:not(.grows), + .search-result-item .l-flex-row .view-control:not(.grows), + .l-flex-col .flex-elem:not(.grows), + .l-flex-col .tree-item .view-control:not(.grows), + .tree-item .l-flex-col .view-control:not(.grows), + .l-flex-col .search-result-item .view-control:not(.grows), + .search-result-item .l-flex-col .view-control:not(.grows) { -webkit-flex: 0 0 auto; flex: 0 0 auto; } /* line 104, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows).flex-can-shrink, - .l-flex-col .flex-elem:not(.grows).flex-can-shrink { + .l-flex-row .flex-elem:not(.grows).flex-can-shrink, .l-flex-row .tree-item .view-control:not(.grows).flex-can-shrink, .tree-item .l-flex-row .view-control:not(.grows).flex-can-shrink, + .l-flex-row .search-result-item .view-control:not(.grows).flex-can-shrink, + .search-result-item .l-flex-row .view-control:not(.grows).flex-can-shrink, + .l-flex-col .flex-elem:not(.grows).flex-can-shrink, + .l-flex-col .tree-item .view-control:not(.grows).flex-can-shrink, + .tree-item .l-flex-col .view-control:not(.grows).flex-can-shrink, + .l-flex-col .search-result-item .view-control:not(.grows).flex-can-shrink, + .search-result-item .l-flex-col .view-control:not(.grows).flex-can-shrink { -webkit-flex: 0 1 auto; flex: 0 1 auto; } /* line 108, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem.grows, - .l-flex-col .flex-elem.grows { + .l-flex-row .flex-elem.grows, .l-flex-row .tree-item .grows.view-control, .tree-item .l-flex-row .grows.view-control, + .l-flex-row .search-result-item .grows.view-control, + .search-result-item .l-flex-row .grows.view-control, + .l-flex-col .flex-elem.grows, + .l-flex-col .tree-item .grows.view-control, + .tree-item .l-flex-col .grows.view-control, + .l-flex-col .search-result-item .grows.view-control, + .search-result-item .l-flex-col .grows.view-control { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 112, ../../../../general/res/sass/_archetypes.scss */ @@ -562,11 +586,14 @@ mct-container { -webkit-flex-direction: row; flex-direction: row; } /* line 123, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row.flex-elem { + .l-flex-row.flex-elem, .tree-item .l-flex-row.view-control, + .search-result-item .l-flex-row.view-control { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 124, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem { + .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, + .l-flex-row .search-result-item .view-control, + .search-result-item .l-flex-row .view-control { height: inherit; line-height: inherit; min-width: 0; } @@ -580,10 +607,14 @@ mct-container { -webkit-flex-direction: column; flex-direction: column; } /* line 134, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem { + .l-flex-col .flex-elem, .l-flex-col .tree-item .view-control, .tree-item .l-flex-col .view-control, + .l-flex-col .search-result-item .view-control, + .search-result-item .l-flex-col .view-control { min-height: 0; } /* line 136, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem.holder:not(:last-child) { + .l-flex-col .flex-elem.holder:not(:last-child), .l-flex-col .tree-item .holder.view-control:not(:last-child), .tree-item .l-flex-col .holder.view-control:not(:last-child), + .l-flex-col .search-result-item .holder.view-control:not(:last-child), + .search-result-item .l-flex-col .holder.view-control:not(:last-child) { margin-bottom: 10px; } /* line 138, ../../../../general/res/sass/_archetypes.scss */ .l-flex-col .flex-container { @@ -1369,18 +1400,28 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { z-index: 10; } @-moz-keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @-webkit-keyframes rotateCentered { 0% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } /* line 138, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:after { @@ -5503,7 +5544,7 @@ span.req { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 35, ../../../../general/res/sass/tree/_tree.scss */ +/* line 23, ../../../../general/res/sass/tree/_tree.scss */ ul.tree { margin: 0; padding: 0; @@ -5516,15 +5557,15 @@ ul.tree { list-style-type: none; margin: 0; padding: 0; } - /* line 38, ../../../../general/res/sass/tree/_tree.scss */ + /* line 26, ../../../../general/res/sass/tree/_tree.scss */ ul.tree li { display: block; position: relative; } - /* line 42, ../../../../general/res/sass/tree/_tree.scss */ + /* line 30, ../../../../general/res/sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } -/* line 47, ../../../../general/res/sass/tree/_tree.scss */ +/* line 35, ../../../../general/res/sass/tree/_tree.scss */ .tree-item, .search-result-item { -moz-box-sizing: border-box; @@ -5537,124 +5578,92 @@ ul.tree { -o-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; - display: block; font-size: 0.8rem; height: 1.5rem; line-height: 1.5rem; margin-bottom: 3px; + padding: 0 3px; position: relative; } - /* line 60, ../../../../general/res/sass/tree/_tree.scss */ + /* line 48, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { color: #666; - display: inline-block; - margin-left: 5px; + margin-right: 5px; font-size: 0.75em; width: 10px; } + /* line 56, ../../../../general/res/sass/tree/_tree.scss */ + .tree-item .view-control.has-children:before, + .search-result-item .view-control.has-children:before { + content: ">"; } + /* line 63, ../../../../general/res/sass/tree/_tree.scss */ + .tree-item .view-control.has-children.expanded:before, + .search-result-item .view-control.has-children.expanded:before { + content: "v"; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 68, ../../../../general/res/sass/tree/_tree.scss */ + /* line 69, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #0099cc !important; } } - /* line 74, ../../../../general/res/sass/tree/_tree.scss */ + /* line 75, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { - display: block; - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; line-height: 1.5rem; } - /* line 79, ../../../../general/res/sass/tree/_tree.scss */ + /* line 80, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, .search-result-item .t-object-label .t-item-icon { font-size: 1.4em; color: #0099cc; - position: absolute; - left: 5px; - top: 50%; - width: 1.4em; - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); } - /* line 83, ../../../../general/res/sass/tree/_tree.scss */ + width: 1.4em; } + /* line 91, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, .search-result-item .t-object-label .t-title-label { - overflow: hidden; - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - width: auto; - height: auto; - display: block; - left: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 108, ../../../../general/res/sass/tree/_tree.scss */ + /* line 114, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 118, ../../../../general/res/sass/tree/_tree.scss */ + /* line 124, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 128, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 127, ../../../../general/res/sass/tree/_tree.scss */ + /* line 133, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 137, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation .t-object-label { - left: 15px; } -/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +/* line 148, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label:before { - font-size: 1.4em; - color: #0099cc; - position: absolute; - left: 5px; - top: 50%; - width: 1.4em; - -moz-transform: translateY(-50%); - -ms-transform: translateY(-50%); - -webkit-transform: translateY(-50%); - transform: translateY(-50%); -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5667,30 +5676,40 @@ ul.tree { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; - border-color: rgba(0, 0, 255, 0.25); - border-top-color: blue; + border-color: rgba(0, 153, 204, 0.25); + border-top-color: #0099cc; border-style: solid; - border-width: 2px; + border-width: 0.25em; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; content: ""; } @-moz-keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @-webkit-keyframes rotateCentered { 0% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } @keyframes rotateCentered { 0% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(0deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(0deg); transform: translateX(-50%) translateY(-50%) rotate(0deg); } 100% { + -moz-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +/* line 152, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } diff --git a/platform/search/res/templates/search-item.html b/platform/search/res/templates/search-item.html index 0cd5b60f17..09c3657ac7 100644 --- a/platform/search/res/templates/search-item.html +++ b/platform/search/res/templates/search-item.html @@ -20,11 +20,12 @@ at runtime from the About dialog for additional information. --> -
+ ng-click="ngModel.selectedObject = domainObject" + class="l-flex-row flex-elem grows">
\ No newline at end of file diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index 26cd6c1284..c17695d74d 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -48,7 +48,8 @@ + ng-model="ngModel" + class="l-flex-row flex-elem grows"> More Results
From d1f617a54e8c2f5f14c0bce91537476ac16d2069 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 11:50:46 -0800 Subject: [PATCH 13/29] [Frontend] Converting tree items and labels to flex-box open #431 In-progress fixing mobile; Removed desktop and mobile-specific hide/show; --- .../general/res/templates/tree-node.html | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 8ac0ed6799..7e7050c7ae 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -26,40 +26,18 @@ ng-class="{selected: treeNode.isSelected()}" > - - - - - - } - Date: Wed, 16 Dec 2015 13:26:30 -0800 Subject: [PATCH 14/29] [Frontend] Converting tree items and labels to flex-box open #431 In-progress fixing mobile; Mostly done, link icon in mobile needs better positioning; --- .../general/res/sass/mobile/_constants.scss | 2 +- .../general/res/sass/mobile/_tree.scss | 24 +-- .../commonUI/general/res/sass/tree/_tree.scss | 28 +--- .../espresso/res/css/theme-espresso.css | 150 +++++++++--------- .../themes/snow/res/css/theme-snow.css | 150 +++++++++--------- 5 files changed, 173 insertions(+), 181 deletions(-) diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 1a794b29f6..7d0d6baa9a 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -31,7 +31,7 @@ $tabletItemH: floor($ueBrowseGridItemLg/3); /************************** MOBILE TREE MENU DIMENSIONS */ $mobileTreeItemH: 35px; -$mobileTreeItemIndent: 20px; +$mobileTreeItemIndent: 15px; $mobileTreeRightArrowW: 30px; /************************** DEVICE WIDTHS */ diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index f3862be742..2434b8967e 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -34,20 +34,20 @@ line-height: $mobileTreeItemH; margin-bottom: 0px; .view-control { - //@include test(red); - position: absolute; - font-size: 1.1em; - height: $mobileTreeItemH; - line-height: inherit; - right: 0px; - width: $mobileTreeRightArrowW; - text-align: center; + order: 2; + width: $mobileTreeItemH; + &.has-children { + &:before { + content: "\7d"; + left: 50%; + @include transform(translateX(-50%) rotate(90deg)); + } + &.expanded:before { + @include transform(translateX(-50%) rotate(270deg)); + } + } } - - .label, .t-object-label { - left: 0; - right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow line-height: inherit; } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 4d1c28657e..652925d921 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -46,23 +46,21 @@ ul.tree { position: relative; .view-control { - @extend .flex-elem; color: $colorItemTreeVC; - //display: inline-block; + font-size: 0.75em; margin-right: $interiorMargin; - font-size: 0.75em; + height: 100%; //$menuLineH; + line-height: inherit; width: $treeVCW; &.has-children { &:before { - //@include trans-prop-nice(rotate); - content: ">"; - //position: absolute; - //top: 50%; - //left: 50%; + position: absolute; + @include trans-prop-nice(transform, 100ms); + content: "\3e"; + @include transform-origin(center); } &.expanded:before { - //@include transform(translateX(-50%) translateY(-50%) rotate(90deg)); - content: "v"; + @include transform(rotate(90deg)); } } @include desktop { @@ -73,27 +71,17 @@ ul.tree { } .t-object-label { - //display: block; - //@include absPosDefault(); line-height: $menuLineH; .t-item-icon { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; color: $colorItemTreeIcon; - //position: absolute; - //left: $interiorMargin; - //top: 50%; width: $treeTypeIconH; - //@include transform(translateY(-50%)); } - .title-label, .t-title-label { @include ellipsize(); - //@include absPosDefault(); - //display: block; - //left: $runningItemW + ($interiorMargin * 3); } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index e8f854eae0..36d8a9e011 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -527,47 +527,23 @@ mct-container { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } /* line 99, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, - .l-flex-row .search-result-item .view-control, - .search-result-item .l-flex-row .view-control, - .l-flex-col .flex-elem, - .l-flex-col .tree-item .view-control, - .tree-item .l-flex-col .view-control, - .l-flex-col .search-result-item .view-control, - .search-result-item .l-flex-col .view-control { + .l-flex-row .flex-elem, + .l-flex-col .flex-elem { min-height: 0; position: relative; } /* line 102, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows), .l-flex-row .tree-item .view-control:not(.grows), .tree-item .l-flex-row .view-control:not(.grows), - .l-flex-row .search-result-item .view-control:not(.grows), - .search-result-item .l-flex-row .view-control:not(.grows), - .l-flex-col .flex-elem:not(.grows), - .l-flex-col .tree-item .view-control:not(.grows), - .tree-item .l-flex-col .view-control:not(.grows), - .l-flex-col .search-result-item .view-control:not(.grows), - .search-result-item .l-flex-col .view-control:not(.grows) { + .l-flex-row .flex-elem:not(.grows), + .l-flex-col .flex-elem:not(.grows) { -webkit-flex: 0 0 auto; flex: 0 0 auto; } /* line 104, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows).flex-can-shrink, .l-flex-row .tree-item .view-control:not(.grows).flex-can-shrink, .tree-item .l-flex-row .view-control:not(.grows).flex-can-shrink, - .l-flex-row .search-result-item .view-control:not(.grows).flex-can-shrink, - .search-result-item .l-flex-row .view-control:not(.grows).flex-can-shrink, - .l-flex-col .flex-elem:not(.grows).flex-can-shrink, - .l-flex-col .tree-item .view-control:not(.grows).flex-can-shrink, - .tree-item .l-flex-col .view-control:not(.grows).flex-can-shrink, - .l-flex-col .search-result-item .view-control:not(.grows).flex-can-shrink, - .search-result-item .l-flex-col .view-control:not(.grows).flex-can-shrink { + .l-flex-row .flex-elem:not(.grows).flex-can-shrink, + .l-flex-col .flex-elem:not(.grows).flex-can-shrink { -webkit-flex: 0 1 auto; flex: 0 1 auto; } /* line 108, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem.grows, .l-flex-row .tree-item .grows.view-control, .tree-item .l-flex-row .grows.view-control, - .l-flex-row .search-result-item .grows.view-control, - .search-result-item .l-flex-row .grows.view-control, - .l-flex-col .flex-elem.grows, - .l-flex-col .tree-item .grows.view-control, - .tree-item .l-flex-col .grows.view-control, - .l-flex-col .search-result-item .grows.view-control, - .search-result-item .l-flex-col .grows.view-control { + .l-flex-row .flex-elem.grows, + .l-flex-col .flex-elem.grows { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 112, ../../../../general/res/sass/_archetypes.scss */ @@ -586,14 +562,11 @@ mct-container { -webkit-flex-direction: row; flex-direction: row; } /* line 123, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row.flex-elem, .tree-item .l-flex-row.view-control, - .search-result-item .l-flex-row.view-control { + .l-flex-row.flex-elem { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 124, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, - .l-flex-row .search-result-item .view-control, - .search-result-item .l-flex-row .view-control { + .l-flex-row .flex-elem { height: inherit; line-height: inherit; min-width: 0; } @@ -607,14 +580,10 @@ mct-container { -webkit-flex-direction: column; flex-direction: column; } /* line 134, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem, .l-flex-col .tree-item .view-control, .tree-item .l-flex-col .view-control, - .l-flex-col .search-result-item .view-control, - .search-result-item .l-flex-col .view-control { + .l-flex-col .flex-elem { min-height: 0; } /* line 136, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem.holder:not(:last-child), .l-flex-col .tree-item .holder.view-control:not(:last-child), .tree-item .l-flex-col .holder.view-control:not(:last-child), - .l-flex-col .search-result-item .holder.view-control:not(:last-child), - .search-result-item .l-flex-col .holder.view-control:not(:last-child) { + .l-flex-col .flex-elem.holder:not(:last-child) { margin-bottom: 10px; } /* line 138, ../../../../general/res/sass/_archetypes.scss */ .l-flex-col .flex-container { @@ -5684,34 +5653,60 @@ ul.tree { .tree-item .view-control, .search-result-item .view-control { color: rgba(255, 255, 255, 0.3); - margin-right: 5px; font-size: 0.75em; + margin-right: 5px; + height: 100%; + line-height: inherit; width: 10px; } /* line 56, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control.has-children:before, .search-result-item .view-control.has-children:before { - content: ">"; } - /* line 63, ../../../../general/res/sass/tree/_tree.scss */ + position: absolute; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -moz-transition-duration: 100ms; + -o-transition-duration: 100ms; + -webkit-transition-duration: 100ms; + transition-duration: 100ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0; + -o-transition-delay: 0; + -webkit-transition-delay: 0; + transition-delay: 0; + content: "\3e"; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; } + /* line 62, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control.has-children.expanded:before, .search-result-item .view-control.has-children.expanded:before { - content: "v"; } + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 69, ../../../../general/res/sass/tree/_tree.scss */ + /* line 67, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #ffc700 !important; } } - /* line 75, ../../../../general/res/sass/tree/_tree.scss */ + /* line 73, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { line-height: 1.5rem; } - /* line 80, ../../../../general/res/sass/tree/_tree.scss */ + /* line 76, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, .search-result-item .t-object-label .t-item-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 1.4em; color: #0099cc; width: 1.4em; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 82, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5719,47 +5714,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 88, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ + /* line 91, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 106, ../../../../general/res/sass/tree/_tree.scss */ + /* line 94, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 114, ../../../../general/res/sass/tree/_tree.scss */ + /* line 102, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 105, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 124, ../../../../general/res/sass/tree/_tree.scss */ + /* line 112, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 128, ../../../../general/res/sass/tree/_tree.scss */ + /* line 116, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 133, ../../../../general/res/sass/tree/_tree.scss */ + /* line 121, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 148, ../../../../general/res/sass/tree/_tree.scss */ +/* line 136, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5806,7 +5801,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 152, ../../../../general/res/sass/tree/_tree.scss */ +/* line 140, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5834,7 +5829,7 @@ ul.tree { @media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px), only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) { /* line 27, ../../../../general/res/sass/mobile/_tree.scss */ ul.tree ul.tree { - margin-left: 20px; } + margin-left: 15px; } /* line 31, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item, @@ -5845,20 +5840,27 @@ ul.tree { /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { - position: absolute; - font-size: 1.1em; - height: 35px; - line-height: inherit; - right: 0px; - width: 30px; - text-align: center; } - /* line 47, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .label, + order: 2; + width: 35px; } + /* line 40, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .view-control.has-children:before, + .search-result-item .view-control.has-children:before { + content: "\7d"; + left: 50%; + -moz-transform: translateX(-50%) rotate(90deg); + -ms-transform: translateX(-50%) rotate(90deg); + -webkit-transform: translateX(-50%) rotate(90deg); + transform: translateX(-50%) rotate(90deg); } + /* line 45, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .view-control.has-children.expanded:before, + .search-result-item .view-control.has-children.expanded:before { + -moz-transform: translateX(-50%) rotate(270deg); + -ms-transform: translateX(-50%) rotate(270deg); + -webkit-transform: translateX(-50%) rotate(270deg); + transform: translateX(-50%) rotate(270deg); } + /* line 50, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .t-object-label, - .search-result-item .label, .search-result-item .t-object-label { - left: 0; - right: 35px; line-height: inherit; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 1f79173373..e7f76d0741 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -527,47 +527,23 @@ mct-container { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; } /* line 99, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, - .l-flex-row .search-result-item .view-control, - .search-result-item .l-flex-row .view-control, - .l-flex-col .flex-elem, - .l-flex-col .tree-item .view-control, - .tree-item .l-flex-col .view-control, - .l-flex-col .search-result-item .view-control, - .search-result-item .l-flex-col .view-control { + .l-flex-row .flex-elem, + .l-flex-col .flex-elem { min-height: 0; position: relative; } /* line 102, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows), .l-flex-row .tree-item .view-control:not(.grows), .tree-item .l-flex-row .view-control:not(.grows), - .l-flex-row .search-result-item .view-control:not(.grows), - .search-result-item .l-flex-row .view-control:not(.grows), - .l-flex-col .flex-elem:not(.grows), - .l-flex-col .tree-item .view-control:not(.grows), - .tree-item .l-flex-col .view-control:not(.grows), - .l-flex-col .search-result-item .view-control:not(.grows), - .search-result-item .l-flex-col .view-control:not(.grows) { + .l-flex-row .flex-elem:not(.grows), + .l-flex-col .flex-elem:not(.grows) { -webkit-flex: 0 0 auto; flex: 0 0 auto; } /* line 104, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem:not(.grows).flex-can-shrink, .l-flex-row .tree-item .view-control:not(.grows).flex-can-shrink, .tree-item .l-flex-row .view-control:not(.grows).flex-can-shrink, - .l-flex-row .search-result-item .view-control:not(.grows).flex-can-shrink, - .search-result-item .l-flex-row .view-control:not(.grows).flex-can-shrink, - .l-flex-col .flex-elem:not(.grows).flex-can-shrink, - .l-flex-col .tree-item .view-control:not(.grows).flex-can-shrink, - .tree-item .l-flex-col .view-control:not(.grows).flex-can-shrink, - .l-flex-col .search-result-item .view-control:not(.grows).flex-can-shrink, - .search-result-item .l-flex-col .view-control:not(.grows).flex-can-shrink { + .l-flex-row .flex-elem:not(.grows).flex-can-shrink, + .l-flex-col .flex-elem:not(.grows).flex-can-shrink { -webkit-flex: 0 1 auto; flex: 0 1 auto; } /* line 108, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem.grows, .l-flex-row .tree-item .grows.view-control, .tree-item .l-flex-row .grows.view-control, - .l-flex-row .search-result-item .grows.view-control, - .search-result-item .l-flex-row .grows.view-control, - .l-flex-col .flex-elem.grows, - .l-flex-col .tree-item .grows.view-control, - .tree-item .l-flex-col .grows.view-control, - .l-flex-col .search-result-item .grows.view-control, - .search-result-item .l-flex-col .grows.view-control { + .l-flex-row .flex-elem.grows, + .l-flex-col .flex-elem.grows { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 112, ../../../../general/res/sass/_archetypes.scss */ @@ -586,14 +562,11 @@ mct-container { -webkit-flex-direction: row; flex-direction: row; } /* line 123, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row.flex-elem, .tree-item .l-flex-row.view-control, - .search-result-item .l-flex-row.view-control { + .l-flex-row.flex-elem { -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* line 124, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-row .flex-elem, .l-flex-row .tree-item .view-control, .tree-item .l-flex-row .view-control, - .l-flex-row .search-result-item .view-control, - .search-result-item .l-flex-row .view-control { + .l-flex-row .flex-elem { height: inherit; line-height: inherit; min-width: 0; } @@ -607,14 +580,10 @@ mct-container { -webkit-flex-direction: column; flex-direction: column; } /* line 134, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem, .l-flex-col .tree-item .view-control, .tree-item .l-flex-col .view-control, - .l-flex-col .search-result-item .view-control, - .search-result-item .l-flex-col .view-control { + .l-flex-col .flex-elem { min-height: 0; } /* line 136, ../../../../general/res/sass/_archetypes.scss */ - .l-flex-col .flex-elem.holder:not(:last-child), .l-flex-col .tree-item .holder.view-control:not(:last-child), .tree-item .l-flex-col .holder.view-control:not(:last-child), - .l-flex-col .search-result-item .holder.view-control:not(:last-child), - .search-result-item .l-flex-col .holder.view-control:not(:last-child) { + .l-flex-col .flex-elem.holder:not(:last-child) { margin-bottom: 10px; } /* line 138, ../../../../general/res/sass/_archetypes.scss */ .l-flex-col .flex-container { @@ -5588,33 +5557,59 @@ ul.tree { .tree-item .view-control, .search-result-item .view-control { color: #666; - margin-right: 5px; font-size: 0.75em; + margin-right: 5px; + height: 100%; + line-height: inherit; width: 10px; } /* line 56, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control.has-children:before, .search-result-item .view-control.has-children:before { - content: ">"; } - /* line 63, ../../../../general/res/sass/tree/_tree.scss */ + position: absolute; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -moz-transition-duration: 100ms; + -o-transition-duration: 100ms; + -webkit-transition-duration: 100ms; + transition-duration: 100ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -moz-transition-delay: 0; + -o-transition-delay: 0; + -webkit-transition-delay: 0; + transition-delay: 0; + content: "\3e"; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; } + /* line 62, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control.has-children.expanded:before, .search-result-item .view-control.has-children.expanded:before { - content: "v"; } + -moz-transform: rotate(90deg); + -ms-transform: rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 69, ../../../../general/res/sass/tree/_tree.scss */ + /* line 67, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .view-control:hover, .search-result-item .view-control:hover { color: #0099cc !important; } } - /* line 75, ../../../../general/res/sass/tree/_tree.scss */ + /* line 73, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { line-height: 1.5rem; } - /* line 80, ../../../../general/res/sass/tree/_tree.scss */ + /* line 76, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .t-item-icon, .search-result-item .t-object-label .t-item-icon { font-size: 1.4em; color: #0099cc; width: 1.4em; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 82, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5622,47 +5617,47 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 88, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ + /* line 91, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 106, ../../../../general/res/sass/tree/_tree.scss */ + /* line 94, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 114, ../../../../general/res/sass/tree/_tree.scss */ + /* line 102, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 105, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 124, ../../../../general/res/sass/tree/_tree.scss */ + /* line 112, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 128, ../../../../general/res/sass/tree/_tree.scss */ + /* line 116, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 133, ../../../../general/res/sass/tree/_tree.scss */ + /* line 121, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 148, ../../../../general/res/sass/tree/_tree.scss */ +/* line 136, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5709,7 +5704,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 152, ../../../../general/res/sass/tree/_tree.scss */ +/* line 140, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5737,7 +5732,7 @@ ul.tree { @media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px), only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px) { /* line 27, ../../../../general/res/sass/mobile/_tree.scss */ ul.tree ul.tree { - margin-left: 20px; } + margin-left: 15px; } /* line 31, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item, @@ -5748,20 +5743,27 @@ ul.tree { /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { - position: absolute; - font-size: 1.1em; - height: 35px; - line-height: inherit; - right: 0px; - width: 30px; - text-align: center; } - /* line 47, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .label, + order: 2; + width: 35px; } + /* line 40, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .view-control.has-children:before, + .search-result-item .view-control.has-children:before { + content: "\7d"; + left: 50%; + -moz-transform: translateX(-50%) rotate(90deg); + -ms-transform: translateX(-50%) rotate(90deg); + -webkit-transform: translateX(-50%) rotate(90deg); + transform: translateX(-50%) rotate(90deg); } + /* line 45, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .view-control.has-children.expanded:before, + .search-result-item .view-control.has-children.expanded:before { + -moz-transform: translateX(-50%) rotate(270deg); + -ms-transform: translateX(-50%) rotate(270deg); + -webkit-transform: translateX(-50%) rotate(270deg); + transform: translateX(-50%) rotate(270deg); } + /* line 50, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .t-object-label, - .search-result-item .label, .search-result-item .t-object-label { - left: 0; - right: 35px; line-height: inherit; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government From b59fc430385a47877f85d41ff7410b95494dce57 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 14:52:19 -0800 Subject: [PATCH 15/29] [Frontend] Converting tree items and labels to flex-box open #431 Mobile fixes complete; --- .../general/res/sass/mobile/_tree.scss | 5 +++ .../espresso/res/css/theme-espresso.css | 32 +++++++++++-------- .../themes/snow/res/css/theme-snow.css | 32 +++++++++++-------- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 2434b8967e..69e875aecf 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -34,6 +34,8 @@ line-height: $mobileTreeItemH; margin-bottom: 0px; .view-control { + font-size: 1.2em; + margin-right: 0; order: 2; width: $mobileTreeItemH; &.has-children { @@ -49,6 +51,9 @@ } .t-object-label { line-height: inherit; + .t-item-icon.l-icon-link:before { + bottom: 20%; // Shift up due to height of mobile menu items + } } } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 36d8a9e011..19cab4bc6c 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5840,9 +5840,11 @@ ul.tree { /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { + font-size: 1.2em; + margin-right: 0; order: 2; width: 35px; } - /* line 40, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 42, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control.has-children:before, .search-result-item .view-control.has-children:before { content: "\7d"; @@ -5851,17 +5853,21 @@ ul.tree { -ms-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } - /* line 45, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 47, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control.has-children.expanded:before, .search-result-item .view-control.has-children.expanded:before { -moz-transform: translateX(-50%) rotate(270deg); -ms-transform: translateX(-50%) rotate(270deg); -webkit-transform: translateX(-50%) rotate(270deg); transform: translateX(-50%) rotate(270deg); } - /* line 50, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 52, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { - line-height: inherit; } } + line-height: inherit; } + /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .t-object-label .t-item-icon.l-icon-link:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index e7f76d0741..669829a115 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5743,9 +5743,11 @@ ul.tree { /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { + font-size: 1.2em; + margin-right: 0; order: 2; width: 35px; } - /* line 40, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 42, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control.has-children:before, .search-result-item .view-control.has-children:before { content: "\7d"; @@ -5754,17 +5756,21 @@ ul.tree { -ms-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } - /* line 45, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 47, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control.has-children.expanded:before, .search-result-item .view-control.has-children.expanded:before { -moz-transform: translateX(-50%) rotate(270deg); -ms-transform: translateX(-50%) rotate(270deg); -webkit-transform: translateX(-50%) rotate(270deg); transform: translateX(-50%) rotate(270deg); } - /* line 50, ../../../../general/res/sass/mobile/_tree.scss */ + /* line 52, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .t-object-label, .search-result-item .t-object-label { - line-height: inherit; } } + line-height: inherit; } + /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ + .tree-item .t-object-label .t-item-icon.l-icon-link:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space From 930b13f9a00f864fc1d0f31c8be290118de113a3 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 16:06:31 -0800 Subject: [PATCH 16/29] [Frontend] Added s-status-pending spinner to tree-item open #431 Refinements of tree item sizes and spacing; Polished spinner-related classes; Moved l-icon-link icon into -glyph element; --- .../commonUI/general/res/sass/_constants.scss | 2 +- .../commonUI/general/res/sass/_icons.scss | 20 ++++---- .../general/res/sass/mobile/_tree.scss | 2 +- .../commonUI/general/res/sass/tree/_tree.scss | 28 +++++++---- .../espresso/res/css/theme-espresso.css | 47 +++++++++++-------- .../themes/snow/res/css/theme-snow.css | 47 +++++++++++-------- 6 files changed, 85 insertions(+), 61 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index c60767e4ae..b90cdfe6a9 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -71,7 +71,7 @@ $itemPadLR: 5px; $treeVCW: 10px; $treeTypeIconH: 1.4em; // was 16px $treeTypeIconHPx: 16px; -$treeTypeIconW: 20px; +$treeTypeIconW: 18px; $treeContextTriggerW: 20px; // Tabular $tabularHeaderH: 22px; //18px diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 3b41b31011..b88801344d 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -89,15 +89,17 @@ line-height: normal; // This is Ok for the symbolsfont position: relative; &.l-icon-link { - &:before { - color: $colorIconLink; - content: "\f4"; - height: auto; width: auto; - position: absolute; - left: 0; top: 0; right: 0; bottom: 10%; - @include transform-origin(bottom, left); - @include transform(scale(0.3)); - z-index: 2; + .t-item-icon-glyph { + &:before { + color: $colorIconLink; + content: "\f4"; + height: auto; width: auto; + position: absolute; + left: 0; top: 0; right: 0; bottom: 10%; + @include transform-origin(bottom, left); + @include transform(scale(0.3)); + z-index: 2; + } } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 69e875aecf..71d34705b9 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -51,7 +51,7 @@ } .t-object-label { line-height: inherit; - .t-item-icon.l-icon-link:before { + .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; // Shift up due to height of mobile menu items } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 652925d921..9ac7aa8cb6 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -77,7 +77,8 @@ ul.tree { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; color: $colorItemTreeIcon; - width: $treeTypeIconH; + margin-right: $interiorMargin; + width: $treeTypeIconW; } .title-label, .t-title-label { @@ -128,17 +129,24 @@ ul.tree { .tree-item { mct-representation { - //.t-object-label { - // left: $interiorMargin + $treeVCW; - //} &.s-status-pending { .t-object-label { - &:before { - @include spinner(0.25em, $colorItemTreeIcon); - content: ""; - } - .t-item-icon .t-item-icon-glyph { - display: none; + .t-item-icon { + &:before { + $spinBW: 4px; + $spinD: $treeTypeIconW - ($spinBW * 2); + @include spinner($spinBW, $colorItemTreeIcon); + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: $spinD; + height: $spinD; + } + .t-item-icon-glyph { + display: none; + } } } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 19cab4bc6c..c2d97f7ac9 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -833,8 +833,8 @@ mct-container { display: inline-block; line-height: normal; position: relative; } - /* line 92, ../../../../general/res/sass/_icons.scss */ - .t-item-icon.l-icon-link:before { + /* line 93, ../../../../general/res/sass/_icons.scss */ + .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; height: auto; @@ -2849,7 +2849,7 @@ label.checkbox.custom { border-top: 1px solid #878787; color: white; line-height: 1.5rem; - padding: 3px 10px 3px 30px; + padding: 3px 10px 3px 28px; position: relative; white-space: nowrap; } /* line 97, ../../../../general/res/sass/controls/_menus.scss */ @@ -5705,8 +5705,9 @@ ul.tree { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 1.4em; color: #0099cc; - width: 1.4em; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + margin-right: 5px; + width: 18px; } + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5714,48 +5715,48 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 89, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 92, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 95, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 105, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 112, ../../../../general/res/sass/tree/_tree.scss */ + /* line 113, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 136, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation.s-status-pending .t-object-label:before { +/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5771,11 +5772,17 @@ ul.tree { border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; - border-width: 0.25em; + border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; - content: ""; } + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: 10px; + height: 10px; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5801,7 +5808,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 140, ../../../../general/res/sass/tree/_tree.scss */ +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5865,8 +5872,8 @@ ul.tree { .search-result-item .t-object-label { line-height: inherit; } /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .t-object-label .t-item-icon.l-icon-link:before, - .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + .tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 669829a115..a3404bae59 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -833,8 +833,8 @@ mct-container { display: inline-block; line-height: normal; position: relative; } - /* line 92, ../../../../general/res/sass/_icons.scss */ - .t-item-icon.l-icon-link:before { + /* line 93, ../../../../general/res/sass/_icons.scss */ + .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; height: auto; @@ -2788,7 +2788,7 @@ label.checkbox.custom { border-top: 1px solid #e6e6e6; color: #666666; line-height: 1.5rem; - padding: 3px 10px 3px 30px; + padding: 3px 10px 3px 28px; position: relative; white-space: nowrap; } /* line 97, ../../../../general/res/sass/controls/_menus.scss */ @@ -5608,8 +5608,9 @@ ul.tree { .search-result-item .t-object-label .t-item-icon { font-size: 1.4em; color: #0099cc; - width: 1.4em; } - /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + margin-right: 5px; + width: 18px; } + /* line 83, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .t-object-label .title-label, .tree-item .t-object-label .t-title-label, .search-result-item .t-object-label .title-label, @@ -5617,48 +5618,48 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 88, ../../../../general/res/sass/tree/_tree.scss */ + /* line 89, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 91, ../../../../general/res/sass/tree/_tree.scss */ + /* line 92, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 94, ../../../../general/res/sass/tree/_tree.scss */ + /* line 95, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 102, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 105, ../../../../general/res/sass/tree/_tree.scss */ + /* line 106, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 112, ../../../../general/res/sass/tree/_tree.scss */ + /* line 113, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 117, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 121, ../../../../general/res/sass/tree/_tree.scss */ + /* line 122, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 136, ../../../../general/res/sass/tree/_tree.scss */ -.tree-item mct-representation.s-status-pending .t-object-label:before { +/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; animation-name: rotateCentered; @@ -5674,11 +5675,17 @@ ul.tree { border-color: rgba(0, 153, 204, 0.25); border-top-color: #0099cc; border-style: solid; - border-width: 0.25em; + border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; - content: ""; } + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + width: 10px; + height: 10px; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5704,7 +5711,7 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 140, ../../../../general/res/sass/tree/_tree.scss */ +/* line 147, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } @@ -5768,8 +5775,8 @@ ul.tree { .search-result-item .t-object-label { line-height: inherit; } /* line 54, ../../../../general/res/sass/mobile/_tree.scss */ - .tree-item .t-object-label .t-item-icon.l-icon-link:before, - .search-result-item .t-object-label .t-item-icon.l-icon-link:before { + .tree-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before, + .search-result-item .t-object-label .t-item-icon.l-icon-link .t-item-icon-glyph:before { bottom: 20%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government From ed3ee1099d696305f106c34ded24d08176acf010 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 16:38:06 -0800 Subject: [PATCH 17/29] [Frontend] Final sanding on adding s-status-pending open #431 Italicized text; Comments cleaned up; To-do: fix regressed label elements in Inspector; --- .../commonUI/general/res/sass/tree/_tree.scss | 13 ++++-- .../espresso/res/css/theme-espresso.css | 40 +++++++++++-------- .../themes/snow/res/css/theme-snow.css | 40 +++++++++++-------- 3 files changed, 58 insertions(+), 35 deletions(-) diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 9ac7aa8cb6..afa1b37a67 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -49,7 +49,7 @@ ul.tree { color: $colorItemTreeVC; font-size: 0.75em; margin-right: $interiorMargin; - height: 100%; //$menuLineH; + height: 100%; line-height: inherit; width: $treeVCW; &.has-children { @@ -93,12 +93,11 @@ ul.tree { color: $colorItemTreeSelectedVC; } .t-object-label .t-item-icon { - color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover; + color: $colorItemTreeSelectedFg; } } &:not(.selected) { - // NOTE: [Mobile] Removed Hover on Mobile @include desktop { &:hover { background: $colorItemTreeHoverBg; @@ -148,7 +147,15 @@ ul.tree { display: none; } } + .t-title-label { + font-style: italic; + opacity: 0.6; + } } } } + &.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba($colorItemTreeSelectedFg, 0.25); + border-top-color: rgba($colorItemTreeSelectedFg, 1.0); + } } \ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index c2d97f7ac9..828c27dd41 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5729,33 +5729,33 @@ ul.tree { .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ + /* line 102, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 106, ../../../../general/res/sass/tree/_tree.scss */ + /* line 105, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 113, ../../../../general/res/sass/tree/_tree.scss */ + /* line 112, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 116, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 121, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +/* line 134, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5808,9 +5808,17 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +/* line 146, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } +/* line 150, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-title-label { + font-style: italic; + opacity: 0.6; } +/* line 157, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba(204, 204, 204, 0.25); + border-top-color: #cccccc; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index a3404bae59..ea2e6cd015 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5632,33 +5632,33 @@ ul.tree { .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 103, ../../../../general/res/sass/tree/_tree.scss */ + /* line 102, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 106, ../../../../general/res/sass/tree/_tree.scss */ + /* line 105, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 113, ../../../../general/res/sass/tree/_tree.scss */ + /* line 112, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 117, ../../../../general/res/sass/tree/_tree.scss */ + /* line 116, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 122, ../../../../general/res/sass/tree/_tree.scss */ + /* line 121, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 135, ../../../../general/res/sass/tree/_tree.scss */ +/* line 134, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5711,9 +5711,17 @@ ul.tree { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 147, ../../../../general/res/sass/tree/_tree.scss */ +/* line 146, ../../../../general/res/sass/tree/_tree.scss */ .tree-item mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } +/* line 150, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item mct-representation.s-status-pending .t-object-label .t-title-label { + font-style: italic; + opacity: 0.6; } +/* line 157, ../../../../general/res/sass/tree/_tree.scss */ +.tree-item.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba(252, 252, 252, 0.25); + border-top-color: #fcfcfc; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government From 9dc958b952ca0a6adb143b5fc07bf24d06ae2890 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 16:49:16 -0800 Subject: [PATCH 18/29] [Frontend] Final sanding on label flex-box conversion open #431 Fixed positioning for l-icon-link when applied to inspection-location object; --- platform/commonUI/general/res/sass/_icons.scss | 5 ++++- platform/commonUI/general/res/sass/tree/_tree.scss | 2 -- platform/commonUI/general/res/templates/label.html | 12 ++++++------ .../themes/espresso/res/css/theme-espresso.css | 6 ++++-- platform/commonUI/themes/snow/res/css/theme-snow.css | 6 ++++-- 5 files changed, 18 insertions(+), 13 deletions(-) diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index b88801344d..61352e9768 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -85,9 +85,12 @@ // Used in grid-item.html, tree-item, inspector location, more? @extend .ui-symbol; @extend .icon; - display: inline-block; + //display: inline-block; line-height: normal; // This is Ok for the symbolsfont position: relative; + .t-item-icon-glyph { + position: relative; + } &.l-icon-link { .t-item-icon-glyph { &:before { diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index afa1b37a67..fdadaecad3 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -72,7 +72,6 @@ ul.tree { .t-object-label { line-height: $menuLineH; - .t-item-icon { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; @@ -80,7 +79,6 @@ ul.tree { margin-right: $interiorMargin; width: $treeTypeIconW; } - .title-label, .t-title-label { @include ellipsize(); } diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index 2b04d85e37..62babcf9ca 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -19,9 +19,9 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - - - {{type.getGlyph()}} - - {{model.name}} - +
+
+
{{type.getGlyph()}}
+
+
{{model.name}}
+
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 828c27dd41..07ce98ffa3 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -830,10 +830,12 @@ mct-container { /* line 84, ../../../../general/res/sass/_icons.scss */ .t-item-icon { - display: inline-block; line-height: normal; position: relative; } - /* line 93, ../../../../general/res/sass/_icons.scss */ + /* line 91, ../../../../general/res/sass/_icons.scss */ + .t-item-icon .t-item-icon-glyph { + position: relative; } + /* line 96, ../../../../general/res/sass/_icons.scss */ .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index ea2e6cd015..2c8fe466c1 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -830,10 +830,12 @@ mct-container { /* line 84, ../../../../general/res/sass/_icons.scss */ .t-item-icon { - display: inline-block; line-height: normal; position: relative; } - /* line 93, ../../../../general/res/sass/_icons.scss */ + /* line 91, ../../../../general/res/sass/_icons.scss */ + .t-item-icon .t-item-icon-glyph { + position: relative; } + /* line 96, ../../../../general/res/sass/_icons.scss */ .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; From ed7e16d341bd5df82c7ca73e3205120a2050aebf Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 17:32:43 -0800 Subject: [PATCH 19/29] [Frontend] More sanding on label flex-box conversion open #431 Moved object-label classes into their own include; Fixing object-label in edit Elements pool and Inspector; mixin refactoring; --- .../commonUI/edit/res/templates/elements.html | 4 +- platform/commonUI/general/res/sass/_main.scss | 1 + .../general/res/sass/_object-label.scss | 72 +++++++ .../res/sass/helpers/_wait-spinner.scss | 8 +- .../commonUI/general/res/sass/tree/_tree.scss | 61 +++--- .../res/templates/object-inspector.html | 4 +- .../general/res/templates/tree-node.html | 4 +- .../espresso/res/css/theme-espresso.css | 200 +++++++++++++----- .../themes/snow/res/css/theme-snow.css | 200 +++++++++++++----- 9 files changed, 415 insertions(+), 139 deletions(-) create mode 100644 platform/commonUI/general/res/sass/_object-label.scss diff --git a/platform/commonUI/edit/res/templates/elements.html b/platform/commonUI/edit/res/templates/elements.html index fff8ebd614..b32d41d010 100644 --- a/platform/commonUI/edit/res/templates/elements.html +++ b/platform/commonUI/edit/res/templates/elements.html @@ -24,7 +24,9 @@
  • - +
    • diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index f7f2489dc7..0376064759 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -60,6 +60,7 @@ @import "overlay/overlay"; @import "mobile/overlay/overlay"; @import "tree/tree"; +@import "object-label"; @import "mobile/tree"; @import "user-environ/frame"; @import "user-environ/top-bar"; diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss new file mode 100644 index 0000000000..51c16eef22 --- /dev/null +++ b/platform/commonUI/general/res/sass/_object-label.scss @@ -0,0 +1,72 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +// mct-representation surrounding an object-label key="'label'" +.rep-object-label { + @include flex-direction(row); + @include flex(1 1 auto); + height: inherit; + line-height: inherit; + min-width: 0; +} + +.t-object-label { + .t-item-icon { + margin-right: $interiorMargin; + } + .t-title-label { + @include ellipsize(); + } +} + +mct-representation { + &.s-status-pending { + .t-object-label { + .t-item-icon { + &:before { + $spinBW: 4px; + $spinD: 0; // $treeTypeIconW - ($spinBW * 2); + @include spinner($spinBW); + content: ""; + display: block; + position: absolute; + left: 50%; + top: 50%; + padding: 35%; + width: $spinD; + height: $spinD; + } + .t-item-icon-glyph { + display: none; + } + } + .t-title-label { + font-style: italic; + opacity: 0.6; + } + } + } +} +.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba($colorItemTreeSelectedFg, 0.25); + border-top-color: rgba($colorItemTreeSelectedFg, 1.0); +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 42d918c729..d2f311a2f7 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -24,7 +24,7 @@ 100% { transform: rotate(359deg); } } -@mixin spinner($b: 5px, $c: $colorAlt1) { +@mixin spinner($b: 5px) { @include keyframes(rotateCentered) { 0% { @include transform(translateX(-50%) translateY(-50%) rotate(0deg)); } 100% { @include transform(translateX(-50%) translateY(-50%) rotate(359deg)); } @@ -33,8 +33,6 @@ @include animation-duration(0.5s); @include animation-iteration-count(infinite); @include animation-timing-function(linear); - border-color: rgba($c, 0.25); - border-top-color: rgba($c, 1.0); border-style: solid; border-width: $b; @include border-radius(100%); @@ -42,8 +40,10 @@ @mixin wait-spinner2($b: 5px, $c: $colorAlt1) { - @include spinner($b, $c); + @include spinner($b); @include box-sizing(border-box); + border-color: rgba($c, 0.25); + border-top-color: rgba($c, 1.0); display: block; position: absolute; height: 0; width: 0; diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index fdadaecad3..78bca20614 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -35,6 +35,7 @@ ul.tree { .tree-item, .search-result-item { $runningItemW: 0; + @extend .l-flex-row; @include box-sizing(border-box); @include border-radius($basicCr); @include single-transition(background-color, 0.25s); @@ -76,12 +77,8 @@ ul.tree { @include txtShdwSubtle($shdwItemTreeIcon); font-size: $treeTypeIconH; color: $colorItemTreeIcon; - margin-right: $interiorMargin; width: $treeTypeIconW; } - .t-title-label { - @include ellipsize(); - } } &.selected { @@ -124,36 +121,36 @@ ul.tree { } } -.tree-item { - mct-representation { - &.s-status-pending { - .t-object-label { - .t-item-icon { - &:before { - $spinBW: 4px; - $spinD: $treeTypeIconW - ($spinBW * 2); - @include spinner($spinBW, $colorItemTreeIcon); - content: ""; - display: block; - position: absolute; - left: 50%; - top: 50%; - width: $spinD; - height: $spinD; - } - .t-item-icon-glyph { - display: none; - } +mct-representation { + &.s-status-pending { + .t-object-label { + .t-item-icon { + &:before { + $spinBW: 4px; + $spinD: $treeTypeIconW - ($spinBW * 2); + @include spinner($spinBW); + border-color: rgba($colorItemTreeIcon, 0.25); + border-top-color: rgba($colorItemTreeIcon, 1.0); + //content: ""; + //display: block; + //position: absolute; + //left: 50%; + //top: 50%; + width: $spinD; + height: $spinD; } - .t-title-label { - font-style: italic; - opacity: 0.6; + .t-item-icon-glyph { + display: none; } } + .t-title-label { + font-style: italic; + opacity: 0.6; + } } } - &.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { - border-color: rgba($colorItemTreeSelectedFg, 0.25); - border-top-color: rgba($colorItemTreeSelectedFg, 1.0); - } -} \ No newline at end of file +} +.selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { + border-color: rgba($colorItemTreeSelectedFg, 0.25); + border-top-color: rgba($colorItemTreeSelectedFg, 1.0); +} diff --git a/platform/commonUI/general/res/templates/object-inspector.html b/platform/commonUI/general/res/templates/object-inspector.html index cf111a3695..5d7d490341 100644 --- a/platform/commonUI/general/res/templates/object-inspector.html +++ b/platform/commonUI/general/res/templates/object-inspector.html @@ -41,7 +41,7 @@ mct-object="parent" ng-model="ngModel" ng-click="ngModel.selectedObject = parent" - class="location-item"> + class="location-item rep-object-label"> @@ -54,7 +54,7 @@ mct-object="parent" ng-model="ngModel" ng-click="ngModel.selectedObject = parent" - class="location-item"> + class="location-item rep-object-label"> diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 7e7050c7ae..cedefbc68a 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -22,7 +22,7 @@ Date: Wed, 16 Dec 2015 17:38:02 -0800 Subject: [PATCH 20/29] [Frontend] Final final sanding on label flex-box conversion open #431 Tweaks for labels in Inspector; --- .../general/res/sass/_object-label.scss | 3 -- .../commonUI/general/res/sass/tree/_tree.scss | 3 ++ .../espresso/res/css/theme-espresso.css | 43 ++++++++++--------- .../themes/snow/res/css/theme-snow.css | 43 ++++++++++--------- 4 files changed, 47 insertions(+), 45 deletions(-) diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss index 51c16eef22..dc92f55155 100644 --- a/platform/commonUI/general/res/sass/_object-label.scss +++ b/platform/commonUI/general/res/sass/_object-label.scss @@ -33,9 +33,6 @@ .t-item-icon { margin-right: $interiorMargin; } - .t-title-label { - @include ellipsize(); - } } mct-representation { diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 78bca20614..ca7deb8f70 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -79,6 +79,9 @@ ul.tree { color: $colorItemTreeIcon; width: $treeTypeIconW; } + .t-title-label { + @include ellipsize(); + } } &.selected { diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 81a6f783fb..390cbe456a 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -5718,47 +5718,53 @@ ul.tree { font-size: 1.4em; color: #0099cc; width: 18px; } - /* line 84, ../../../../general/res/sass/tree/_tree.scss */ + /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + .tree-item .t-object-label .t-title-label, + .search-result-item .t-object-label .t-title-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 87, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #006080; color: #cccccc; } - /* line 87, ../../../../general/res/sass/tree/_tree.scss */ + /* line 90, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: rgba(255, 255, 255, 0.3); } - /* line 90, ../../../../general/res/sass/tree/_tree.scss */ + /* line 93, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #cccccc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #33ccff; } } - /* line 107, ../../../../general/res/sass/tree/_tree.scss */ + /* line 110, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ + /* line 114, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 119, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 128, ../../../../general/res/sass/tree/_tree.scss */ +/* line 131, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5806,15 +5812,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +/* line 145, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 146, ../../../../general/res/sass/tree/_tree.scss */ +/* line 149, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 153, ../../../../general/res/sass/tree/_tree.scss */ +/* line 156, ../../../../general/res/sass/tree/_tree.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(204, 204, 204, 0.25); border-top-color: #cccccc; } @@ -5853,13 +5859,8 @@ mct-representation.s-status-pending .t-object-label .t-title-label { /* line 33, ../../../../general/res/sass/_object-label.scss */ .t-object-label .t-item-icon { margin-right: 5px; } -/* line 36, ../../../../general/res/sass/_object-label.scss */ -.t-object-label .t-title-label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } -/* line 45, ../../../../general/res/sass/_object-label.scss */ +/* line 42, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5911,15 +5912,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 58, ../../../../general/res/sass/_object-label.scss */ +/* line 55, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 62, ../../../../general/res/sass/_object-label.scss */ +/* line 59, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 69, ../../../../general/res/sass/_object-label.scss */ +/* line 66, ../../../../general/res/sass/_object-label.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(204, 204, 204, 0.25); border-top-color: #cccccc; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 767e0c73eb..222e7a36d5 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -5621,47 +5621,53 @@ ul.tree { font-size: 1.4em; color: #0099cc; width: 18px; } - /* line 84, ../../../../general/res/sass/tree/_tree.scss */ + /* line 82, ../../../../general/res/sass/tree/_tree.scss */ + .tree-item .t-object-label .t-title-label, + .search-result-item .t-object-label .t-title-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + /* line 87, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected, .search-result-item.selected { background: #1ac6ff; color: #fcfcfc; } - /* line 87, ../../../../general/res/sass/tree/_tree.scss */ + /* line 90, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .view-control, .search-result-item.selected .view-control { color: #fcfcfc; } - /* line 90, ../../../../general/res/sass/tree/_tree.scss */ + /* line 93, ../../../../general/res/sass/tree/_tree.scss */ .tree-item.selected .t-object-label .t-item-icon, .search-result-item.selected .t-object-label .t-item-icon { color: #fcfcfc; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 97, ../../../../general/res/sass/tree/_tree.scss */ + /* line 100, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover, .search-result-item:not(.selected):hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 100, ../../../../general/res/sass/tree/_tree.scss */ + /* line 103, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.selected):hover .t-item-icon, .search-result-item:not(.selected):hover .t-item-icon { color: #0099cc; } } - /* line 107, ../../../../general/res/sass/tree/_tree.scss */ + /* line 110, ../../../../general/res/sass/tree/_tree.scss */ .tree-item:not(.loading), .search-result-item:not(.loading) { cursor: pointer; } - /* line 111, ../../../../general/res/sass/tree/_tree.scss */ + /* line 114, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger, .search-result-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 116, ../../../../general/res/sass/tree/_tree.scss */ + /* line 119, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .context-trigger .invoke-menu, .search-result-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } -/* line 128, ../../../../general/res/sass/tree/_tree.scss */ +/* line 131, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5709,15 +5715,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 142, ../../../../general/res/sass/tree/_tree.scss */ +/* line 145, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 146, ../../../../general/res/sass/tree/_tree.scss */ +/* line 149, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 153, ../../../../general/res/sass/tree/_tree.scss */ +/* line 156, ../../../../general/res/sass/tree/_tree.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(252, 252, 252, 0.25); border-top-color: #fcfcfc; } @@ -5756,13 +5762,8 @@ mct-representation.s-status-pending .t-object-label .t-title-label { /* line 33, ../../../../general/res/sass/_object-label.scss */ .t-object-label .t-item-icon { margin-right: 5px; } -/* line 36, ../../../../general/res/sass/_object-label.scss */ -.t-object-label .t-title-label { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } -/* line 45, ../../../../general/res/sass/_object-label.scss */ +/* line 42, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -5814,15 +5815,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 58, ../../../../general/res/sass/_object-label.scss */ +/* line 55, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 62, ../../../../general/res/sass/_object-label.scss */ +/* line 59, ../../../../general/res/sass/_object-label.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 69, ../../../../general/res/sass/_object-label.scss */ +/* line 66, ../../../../general/res/sass/_object-label.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(252, 252, 252, 0.25); border-top-color: #fcfcfc; } From 0296cfe3c12a244f540acff07bde9656f070f060 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Dec 2015 10:21:06 -0800 Subject: [PATCH 21/29] [Frontend] Mobile sanding and polishing open #431 Fixed hiding of "search by type" in phone only; Fixed search-input magnify glass z-index value; Fixed tree search results heights; --- .../general/res/sass/mobile/_tree.scss | 6 +- .../res/sass/mobile/search/_search.scss | 2 +- .../general/res/sass/search/_search.scss | 1 + .../espresso/res/css/theme-espresso.css | 59 ++++++++++--------- .../themes/snow/res/css/theme-snow.css | 59 ++++++++++--------- 5 files changed, 65 insertions(+), 62 deletions(-) diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 71d34705b9..22ed795ce8 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -30,9 +30,9 @@ } .tree-item, .search-result-item { - height: $mobileTreeItemH; - line-height: $mobileTreeItemH; - margin-bottom: 0px; + height: $mobileTreeItemH !important; + line-height: $mobileTreeItemH !important; + margin-bottom: 0px !important; .view-control { font-size: 1.2em; margin-right: 0; diff --git a/platform/commonUI/general/res/sass/mobile/search/_search.scss b/platform/commonUI/general/res/sass/mobile/search/_search.scss index d37514a0a5..3ceadcbaed 100644 --- a/platform/commonUI/general/res/sass/mobile/search/_search.scss +++ b/platform/commonUI/general/res/sass/mobile/search/_search.scss @@ -1,5 +1,5 @@ @include phone { - .search { + .search-holder { .search-bar { // Hide menu-icon and adjust spacing when in phone mode .menu-icon { diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index 78071c085f..adc5342e8b 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -82,6 +82,7 @@ left: $interiorMarginSm; @include trans-prop-nice(color, 250ms); pointer-events: none; + z-index: 1; } // Make icon lighten when hovering over search bar diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 390cbe456a..a71ff5f53d 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5205,41 +5205,42 @@ span.req { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; - pointer-events: none; } - /* line 88, ../../../../general/res/sass/search/_search.scss */ + pointer-events: none; + z-index: 1; } + /* line 89, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar:hover:before { color: #8c8c8c; } - /* line 92, ../../../../general/res/sass/search/_search.scss */ + /* line 93, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon { right: 22px; visibility: hidden; opacity: 0; } - /* line 98, ../../../../general/res/sass/search/_search.scss */ + /* line 99, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon.show { visibility: visible; opacity: 1; } - /* line 103, ../../../../general/res/sass/search/_search.scss */ + /* line 104, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon:hover { color: #8c8c8c; } - /* line 108, ../../../../general/res/sass/search/_search.scss */ + /* line 109, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon { font-size: 0.8em; padding-right: 4px; right: 4px; text-align: right; } - /* line 110, ../../../../general/res/sass/search/_search.scss */ + /* line 111, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon:before { content: '\76'; } - /* line 116, ../../../../general/res/sass/search/_search.scss */ + /* line 117, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon:hover { color: #8c8c8c; } - /* line 121, ../../../../general/res/sass/search/_search.scss */ + /* line 122, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .search-menu-holder { float: right; left: -20px; z-index: 70; transition: visibility .05s, opacity .05s; } -/* line 129, ../../../../general/res/sass/search/_search.scss */ +/* line 130, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -5247,7 +5248,7 @@ span.req { line-height: 130%; padding-left: 1.4625em; font-size: 0.65em; } - /* line 137, ../../../../general/res/sass/search/_search.scss */ + /* line 138, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display .clear-filters-icon { color: #737373; opacity: 1; @@ -5255,7 +5256,7 @@ span.req { position: absolute; left: 1px; cursor: pointer; } -/* line 147, ../../../../general/res/sass/search/_search.scss */ +/* line 148, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results { -moz-transition-property: opacity, visibility; -o-transition-property: opacity, visibility; @@ -5275,16 +5276,16 @@ span.req { transition-delay: 0; margin-top: 10px; padding-right: 5px; } - /* line 151, ../../../../general/res/sass/search/_search.scss */ + /* line 152, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .hint { margin-bottom: 10px; font-size: 0.65em; opacity: 0.6; } - /* line 156, ../../../../general/res/sass/search/_search.scss */ + /* line 157, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results.active { visibility: visible; opacity: 1; } - /* line 160, ../../../../general/res/sass/search/_search.scss */ + /* line 161, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .load-more-button { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); @@ -5299,10 +5300,10 @@ span.req { @media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px) { /* line 5, ../../../../general/res/sass/mobile/search/_search.scss */ - .search .search-bar .menu-icon { + .search-holder .search-bar .menu-icon { display: none; } /* line 8, ../../../../general/res/sass/mobile/search/_search.scss */ - .search .search-bar .clear-icon { + .search-holder .search-bar .clear-icon { right: 5px; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government @@ -5954,9 +5955,9 @@ mct-representation.s-status-pending .t-object-label .t-title-label { /* line 31, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item, .search-result-item { - height: 35px; - line-height: 35px; - margin-bottom: 0px; } + height: 35px !important; + line-height: 35px !important; + margin-bottom: 0px !important; } /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 222e7a36d5..bca5ac2a5b 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -5127,41 +5127,42 @@ span.req { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; - pointer-events: none; } - /* line 88, ../../../../general/res/sass/search/_search.scss */ + pointer-events: none; + z-index: 1; } + /* line 89, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar:hover:before { color: #8c8c8c; } - /* line 92, ../../../../general/res/sass/search/_search.scss */ + /* line 93, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon { right: 22px; visibility: hidden; opacity: 0; } - /* line 98, ../../../../general/res/sass/search/_search.scss */ + /* line 99, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon.show { visibility: visible; opacity: 1; } - /* line 103, ../../../../general/res/sass/search/_search.scss */ + /* line 104, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .clear-icon:hover { color: #8c8c8c; } - /* line 108, ../../../../general/res/sass/search/_search.scss */ + /* line 109, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon { font-size: 0.8em; padding-right: 4px; right: 4px; text-align: right; } - /* line 110, ../../../../general/res/sass/search/_search.scss */ + /* line 111, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon:before { content: '\76'; } - /* line 116, ../../../../general/res/sass/search/_search.scss */ + /* line 117, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .menu-icon:hover { color: #8c8c8c; } - /* line 121, ../../../../general/res/sass/search/_search.scss */ + /* line 122, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-bar .search-menu-holder { float: right; left: -20px; z-index: 70; transition: visibility .05s, opacity .05s; } -/* line 129, ../../../../general/res/sass/search/_search.scss */ +/* line 130, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -5169,7 +5170,7 @@ span.req { line-height: 130%; padding-left: 1.4625em; font-size: 0.65em; } - /* line 137, ../../../../general/res/sass/search/_search.scss */ + /* line 138, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display .clear-filters-icon { color: #a6a6a6; opacity: 1; @@ -5177,7 +5178,7 @@ span.req { position: absolute; left: 1px; cursor: pointer; } -/* line 147, ../../../../general/res/sass/search/_search.scss */ +/* line 148, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results { -moz-transition-property: opacity, visibility; -o-transition-property: opacity, visibility; @@ -5197,16 +5198,16 @@ span.req { transition-delay: 0; margin-top: 10px; padding-right: 5px; } - /* line 151, ../../../../general/res/sass/search/_search.scss */ + /* line 152, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .hint { margin-bottom: 10px; font-size: 0.65em; opacity: 0.6; } - /* line 156, ../../../../general/res/sass/search/_search.scss */ + /* line 157, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results.active { visibility: visible; opacity: 1; } - /* line 160, ../../../../general/res/sass/search/_search.scss */ + /* line 161, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .load-more-button { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); @@ -5221,10 +5222,10 @@ span.req { @media only screen and (orientation: portrait) and (max-device-width: 767px), only screen and (orientation: landscape) and (max-device-width: 767px) { /* line 5, ../../../../general/res/sass/mobile/search/_search.scss */ - .search .search-bar .menu-icon { + .search-holder .search-bar .menu-icon { display: none; } /* line 8, ../../../../general/res/sass/mobile/search/_search.scss */ - .search .search-bar .clear-icon { + .search-holder .search-bar .clear-icon { right: 5px; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government @@ -5857,9 +5858,9 @@ mct-representation.s-status-pending .t-object-label .t-title-label { /* line 31, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item, .search-result-item { - height: 35px; - line-height: 35px; - margin-bottom: 0px; } + height: 35px !important; + line-height: 35px !important; + margin-bottom: 0px !important; } /* line 36, ../../../../general/res/sass/mobile/_tree.scss */ .tree-item .view-control, .search-result-item .view-control { From 941d0d0057c928ed3c53b8ed283d1d1b6fb37e18 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 17 Dec 2015 10:49:39 -0800 Subject: [PATCH 22/29] [Frontend] Tree sanding and polishing open #431 Fixed vertical margins problem in tree and search results; --- .../commonUI/general/res/sass/search/_search.scss | 3 +-- .../themes/espresso/res/css/theme-espresso.css | 11 +++++------ platform/commonUI/themes/snow/res/css/theme-snow.css | 11 +++++------ platform/search/res/templates/search.html | 10 ++++++---- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index adc5342e8b..37043ae939 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -128,7 +128,7 @@ } .active-filter-display { - $s: 0.65em; + $s: 0.7em; $p: $interiorMargin; @include box-sizing(border-box); line-height: 130%; @@ -147,7 +147,6 @@ .search-results { @include trans-prop-nice((opacity, visibility), 250ms); - margin-top: $interiorMarginLg; // Always include margin here to fend off the search input padding-right: $interiorMargin; .hint { margin-bottom: $interiorMarginLg; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index a71ff5f53d..77c47f163d 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -5246,8 +5246,8 @@ span.req { -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 130%; - padding-left: 1.4625em; - font-size: 0.65em; } + padding-left: 1.575em; + font-size: 0.7em; } /* line 138, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display .clear-filters-icon { color: #737373; @@ -5274,18 +5274,17 @@ span.req { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; - margin-top: 10px; padding-right: 5px; } - /* line 152, ../../../../general/res/sass/search/_search.scss */ + /* line 151, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .hint { margin-bottom: 10px; font-size: 0.65em; opacity: 0.6; } - /* line 157, ../../../../general/res/sass/search/_search.scss */ + /* line 156, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results.active { visibility: visible; opacity: 1; } - /* line 161, ../../../../general/res/sass/search/_search.scss */ + /* line 160, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .load-more-button { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index bca5ac2a5b..1fb406ca1d 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -5168,8 +5168,8 @@ span.req { -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 130%; - padding-left: 1.4625em; - font-size: 0.65em; } + padding-left: 1.575em; + font-size: 0.7em; } /* line 138, ../../../../general/res/sass/search/_search.scss */ .holder-search .active-filter-display .clear-filters-icon { color: #a6a6a6; @@ -5196,18 +5196,17 @@ span.req { -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; - margin-top: 10px; padding-right: 5px; } - /* line 152, ../../../../general/res/sass/search/_search.scss */ + /* line 151, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .hint { margin-bottom: 10px; font-size: 0.65em; opacity: 0.6; } - /* line 157, ../../../../general/res/sass/search/_search.scss */ + /* line 156, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results.active { visibility: visible; opacity: 1; } - /* line 161, ../../../../general/res/sass/search/_search.scss */ + /* line 160, ../../../../general/res/sass/search/_search.scss */ .holder-search .search-results .load-more-button { -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html index c17695d74d..e3f72e78b5 100644 --- a/platform/search/res/templates/search.html +++ b/platform/search/res/templates/search.html @@ -20,11 +20,13 @@ at runtime from the About dialog for additional information. -->
    -
    +
    + ng-keyup="controller.search()"/> @@ -37,13 +39,13 @@ ng-click="toggle.setState(true)">
    -
    Filtered by: {{ ngModel.filtersString }}
    -
    Date: Thu, 17 Dec 2015 12:24:57 -0800 Subject: [PATCH 23/29] [Frontend] s-status-pending sanding and polishing open #431 Cleanups, comment removal; Inspector location items with s-status-pending tweaked; Fixed grid-item background class; --- .../commonUI/general/res/sass/_icons.scss | 6 +- .../commonUI/general/res/sass/_inspector.scss | 11 +- .../commonUI/general/res/sass/_mixins.scss | 2 +- .../general/res/sass/_object-label.scss | 4 +- .../res/sass/helpers/_wait-spinner.scss | 1 + .../commonUI/general/res/sass/tree/_tree.scss | 8 -- .../espresso/res/css/theme-espresso.css | 131 +++++++++++++----- .../themes/snow/res/css/theme-snow.css | 87 +++++++----- 8 files changed, 164 insertions(+), 86 deletions(-) diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index 61352e9768..d24c4a74e8 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -73,23 +73,21 @@ } .l-icon-alert { - display: none !important; // Remove this when alerts are enabled + display: none !important; &:before { color: $colorAlert; content: "!"; } } -// NEW!! .t-item-icon { // Used in grid-item.html, tree-item, inspector location, more? @extend .ui-symbol; @extend .icon; - //display: inline-block; line-height: normal; // This is Ok for the symbolsfont position: relative; .t-item-icon-glyph { - position: relative; + position: absolute; } &.l-icon-link { .t-item-icon-glyph { diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss index 62917017a4..7523c3f3b6 100644 --- a/platform/commonUI/general/res/sass/_inspector.scss +++ b/platform/commonUI/general/res/sass/_inspector.scss @@ -84,12 +84,20 @@ } .inspector-location { - //line-height: 180%; .location-item { + $h: 1.2em; + @include box-sizing(border-box); cursor: pointer; display: inline-block; + line-height: $h; position: relative; padding: 2px 4px; + .t-object-label { + .t-item-icon { + height: $h; + width: 0.7rem; + } + } &:hover { background: $colorItemTreeHoverBg; color: $colorItemTreeHoverFg; @@ -104,6 +112,7 @@ display: inline-block; font-family: symbolsfont; font-size: 8px; + font-style: normal !important; line-height: inherit; margin-left: $interiorMarginSm; width: 4px; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index f5a21cf9dd..e4c5d72a82 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -300,7 +300,7 @@ @include desktop { @if $bgHov != none { &:not(.disabled):hover { - background: $bgHov; + @include background-image($bgHov); >.icon { color: lighten($ic, $ltGamma); } diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss index dc92f55155..55bc5d5920 100644 --- a/platform/commonUI/general/res/sass/_object-label.scss +++ b/platform/commonUI/general/res/sass/_object-label.scss @@ -41,14 +41,14 @@ mct-representation { .t-item-icon { &:before { $spinBW: 4px; - $spinD: 0; // $treeTypeIconW - ($spinBW * 2); + $spinD: 0; @include spinner($spinBW); content: ""; display: block; position: absolute; left: 50%; top: 50%; - padding: 35%; + padding: 30%; width: $spinD; height: $spinD; } diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index d2f311a2f7..14abf7c817 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -33,6 +33,7 @@ @include animation-duration(0.5s); @include animation-iteration-count(infinite); @include animation-timing-function(linear); + @include transform-origin(center); border-style: solid; border-width: $b; @include border-radius(100%); diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index ca7deb8f70..1f9981b642 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -130,17 +130,9 @@ mct-representation { .t-item-icon { &:before { $spinBW: 4px; - $spinD: $treeTypeIconW - ($spinBW * 2); @include spinner($spinBW); border-color: rgba($colorItemTreeIcon, 0.25); border-top-color: rgba($colorItemTreeIcon, 1.0); - //content: ""; - //display: block; - //position: absolute; - //left: 50%; - //top: 50%; - width: $spinD; - height: $spinD; } .t-item-icon-glyph { display: none; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 77c47f163d..4dada55416 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -838,14 +838,14 @@ mct-container { color: #ff3c00; content: "!"; } -/* line 84, ../../../../general/res/sass/_icons.scss */ +/* line 83, ../../../../general/res/sass/_icons.scss */ .t-item-icon { line-height: normal; position: relative; } - /* line 91, ../../../../general/res/sass/_icons.scss */ + /* line 89, ../../../../general/res/sass/_icons.scss */ .t-item-icon .t-item-icon-glyph { - position: relative; } - /* line 96, ../../../../general/res/sass/_icons.scss */ + position: absolute; } + /* line 94, ../../../../general/res/sass/_icons.scss */ .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; @@ -1263,7 +1263,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } -/* line 68, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 69, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner, .wait-spinner { display: block; @@ -1288,7 +1288,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { margin-top: -5%; margin-left: -5%; z-index: 2; } - /* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 80, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner.inline, .wait-spinner.inline { display: inline-block !important; @@ -1296,26 +1296,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { position: relative !important; vertical-align: middle; } -/* line 87, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 88, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder { pointer-events: none; position: absolute; } - /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 92, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.align-left .t-wait-spinner { left: 0; margin-left: 0; } - /* line 96, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 97, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size { display: inline-block; height: 100%; width: 100%; } - /* line 99, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 100, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size .t-wait-spinner { top: 0; margin-top: 0; padding: 30%; } -/* line 108, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 109, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .treeview .wait-spinner { display: block; position: absolute; @@ -1337,7 +1337,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 2px; left: 0; } -/* line 117, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 118, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .wait-spinner.sm { display: block; position: absolute; @@ -1360,13 +1360,13 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 0; left: 0; } -/* line 127, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 128, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading { pointer-events: none; } - /* line 130, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 131, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before, .loading:after { content: ''; } - /* line 134, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 135, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -1380,6 +1380,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 5px; -moz-border-radius: 100%; @@ -1423,7 +1427,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } - /* line 138, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:after { overflow: hidden; position: absolute; @@ -1436,7 +1440,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { background: rgba(153, 153, 153, 0.2); display: block; z-index: 9; } - /* line 144, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 145, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading.tree-item:before { padding: 0.375rem; border-width: 2px; } @@ -1523,26 +1527,35 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { .l-inspect .inspector-properties .value { color: #bfbfbf; word-break: break-all; } - /* line 88, ../../../../general/res/sass/_inspector.scss */ + /* line 87, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; cursor: pointer; display: inline-block; + line-height: 1.2em; position: relative; padding: 2px 4px; } - /* line 93, ../../../../general/res/sass/_inspector.scss */ + /* line 96, ../../../../general/res/sass/_inspector.scss */ + .l-inspect .inspector-location .location-item .t-object-label .t-item-icon { + height: 1.2em; + width: 0.7rem; } + /* line 101, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item:hover { background: rgba(153, 153, 153, 0.1); color: #cccccc; } - /* line 96, ../../../../general/res/sass/_inspector.scss */ + /* line 104, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon { color: #33ccff; } - /* line 101, ../../../../general/res/sass/_inspector.scss */ + /* line 109, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after { color: #737373; content: '\3e'; display: inline-block; font-family: symbolsfont; font-size: 8px; + font-style: normal !important; line-height: inherit; margin-left: 3px; width: 4px; } @@ -1672,7 +1685,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover, .major.s-menu-btn:not(.disabled):hover { - background: linear-gradient(#1ac6ff, #00bfff); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhYzZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ac6ff), color-stop(100%, #00bfff)); + background-image: -moz-linear-gradient(#1ac6ff, #00bfff); + background-image: -webkit-linear-gradient(#1ac6ff, #00bfff); + background-image: linear-gradient(#1ac6ff, #00bfff); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon, .s-btn.major:not(.disabled):hover > .t-item-icon, .major.s-menu-btn:not(.disabled):hover > .t-item-icon { color: white; } } @@ -1711,7 +1729,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover, .s-menu-btn:not(.major):not(.disabled):hover { - background: linear-gradient(#6b6b6b, #5e5e5e); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6b6b6b), color-stop(100%, #5e5e5e)); + background-image: -moz-linear-gradient(#6b6b6b, #5e5e5e); + background-image: -webkit-linear-gradient(#6b6b6b, #5e5e5e); + background-image: linear-gradient(#6b6b6b, #5e5e5e); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon, .s-btn:not(.major):not(.disabled):hover > .t-item-icon, .s-menu-btn:not(.major):not(.disabled):hover > .t-item-icon { color: #33ccff; } } @@ -1753,7 +1776,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu-btn:not(.disabled):hover { - background: linear-gradient(#fe9815, #f88c01); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTgxNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y4OGMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9815), color-stop(100%, #f88c01)); + background-image: -moz-linear-gradient(#fe9815, #f88c01); + background-image: -webkit-linear-gradient(#fe9815, #f88c01); + background-image: linear-gradient(#fe9815, #f88c01); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon, .s-btn.pause-play.paused:not(.disabled):hover > .t-item-icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .t-item-icon { color: white; } } @@ -1854,7 +1882,12 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .mini-tab.collapsed:not(.disabled):hover { - background: linear-gradient(#6b6b6b, #5e5e5e); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6b6b6b), color-stop(100%, #5e5e5e)); + background-image: -moz-linear-gradient(#6b6b6b, #5e5e5e); + background-image: -webkit-linear-gradient(#6b6b6b, #5e5e5e); + background-image: linear-gradient(#6b6b6b, #5e5e5e); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .mini-tab.collapsed:not(.disabled):hover > .icon, .mini-tab.collapsed:not(.disabled):hover > .t-item-icon { color: #33ccff; } } @@ -3986,7 +4019,12 @@ textarea { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .select:not(.disabled):hover { - background: linear-gradient(#6b6b6b, #5e5e5e); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6b6b6b), color-stop(100%, #5e5e5e)); + background-image: -moz-linear-gradient(#6b6b6b, #5e5e5e); + background-image: -webkit-linear-gradient(#6b6b6b, #5e5e5e); + background-image: linear-gradient(#6b6b6b, #5e5e5e); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .select:not(.disabled):hover > .icon, .select:not(.disabled):hover > .t-item-icon { color: #33ccff; } } @@ -5477,7 +5515,12 @@ span.req { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover { - background: linear-gradient(#a6a6a6, #999999); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E2YTZhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk5OTk5OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #a6a6a6), color-stop(100%, #999999)); + background-image: -moz-linear-gradient(#a6a6a6, #999999); + background-image: -webkit-linear-gradient(#a6a6a6, #999999); + background-image: linear-gradient(#a6a6a6, #999999); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .t-item-icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .t-item-icon { color: white; } } @@ -5778,15 +5821,17 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; border-color: rgba(0, 153, 204, 0.25); - border-top-color: #0099cc; - width: 10px; - height: 10px; } + border-top-color: #0099cc; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5812,15 +5857,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 145, ../../../../general/res/sass/tree/_tree.scss */ +/* line 137, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 149, ../../../../general/res/sass/tree/_tree.scss */ +/* line 141, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 156, ../../../../general/res/sass/tree/_tree.scss */ +/* line 148, ../../../../general/res/sass/tree/_tree.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(204, 204, 204, 0.25); border-top-color: #cccccc; } @@ -5874,6 +5919,10 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 4px; -moz-border-radius: 100%; @@ -5884,7 +5933,7 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { position: absolute; left: 50%; top: 50%; - padding: 35%; + padding: 30%; width: 0; height: 0; } @-moz-keyframes rotateCentered { @@ -6953,7 +7002,12 @@ table { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { - background: linear-gradient(#666666, #595959); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959)); + background-image: -moz-linear-gradient(#666666, #595959); + background-image: -webkit-linear-gradient(#666666, #595959); + background-image: linear-gradient(#666666, #595959); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover > .icon, .items-holder .item.grid-item:not(.disabled):hover > .t-item-icon { color: #33ccff; } } @@ -7084,7 +7138,12 @@ table { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover { - background: linear-gradient(#1ac6ff, #00bfff); } + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFhYzZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1ac6ff), color-stop(100%, #00bfff)); + background-image: -moz-linear-gradient(#1ac6ff, #00bfff); + background-image: -webkit-linear-gradient(#1ac6ff, #00bfff); + background-image: linear-gradient(#1ac6ff, #00bfff); } /* line 304, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover > .icon, .items-holder .item.grid-item.selected:not(.disabled):hover > .t-item-icon { color: #33ccff; } } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 1fb406ca1d..d5e6cda0a8 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -838,14 +838,14 @@ mct-container { color: #ff3c00; content: "!"; } -/* line 84, ../../../../general/res/sass/_icons.scss */ +/* line 83, ../../../../general/res/sass/_icons.scss */ .t-item-icon { line-height: normal; position: relative; } - /* line 91, ../../../../general/res/sass/_icons.scss */ + /* line 89, ../../../../general/res/sass/_icons.scss */ .t-item-icon .t-item-icon-glyph { - position: relative; } - /* line 96, ../../../../general/res/sass/_icons.scss */ + position: absolute; } + /* line 94, ../../../../general/res/sass/_icons.scss */ .t-item-icon.l-icon-link .t-item-icon-glyph:before { color: #49dedb; content: "\f4"; @@ -1244,7 +1244,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } -/* line 68, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 69, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner, .wait-spinner { display: block; @@ -1269,7 +1269,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { margin-top: -5%; margin-left: -5%; z-index: 2; } - /* line 79, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 80, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .t-wait-spinner.inline, .wait-spinner.inline { display: inline-block !important; @@ -1277,26 +1277,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { position: relative !important; vertical-align: middle; } -/* line 87, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 88, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder { pointer-events: none; position: absolute; } - /* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 92, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.align-left .t-wait-spinner { left: 0; margin-left: 0; } - /* line 96, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 97, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size { display: inline-block; height: 100%; width: 100%; } - /* line 99, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 100, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .l-wait-spinner-holder.full-size .t-wait-spinner { top: 0; margin-top: 0; padding: 30%; } -/* line 108, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 109, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .treeview .wait-spinner { display: block; position: absolute; @@ -1318,7 +1318,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 2px; left: 0; } -/* line 117, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 118, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .wait-spinner.sm { display: block; position: absolute; @@ -1341,13 +1341,13 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { top: 0; left: 0; } -/* line 127, ../../../../general/res/sass/helpers/_wait-spinner.scss */ +/* line 128, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading { pointer-events: none; } - /* line 130, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 131, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before, .loading:after { content: ''; } - /* line 134, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 135, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:before { -moz-animation-name: rotateCentered; -webkit-animation-name: rotateCentered; @@ -1361,6 +1361,10 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 5px; -moz-border-radius: 100%; @@ -1404,7 +1408,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } - /* line 138, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 139, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading:after { overflow: hidden; position: absolute; @@ -1417,7 +1421,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { background: rgba(119, 107, 162, 0.1); display: block; z-index: 9; } - /* line 144, ../../../../general/res/sass/helpers/_wait-spinner.scss */ + /* line 145, ../../../../general/res/sass/helpers/_wait-spinner.scss */ .loading.tree-item:before { padding: 0.375rem; border-width: 2px; } @@ -1504,26 +1508,35 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { .l-inspect .inspector-properties .value { color: #404040; word-break: break-all; } - /* line 88, ../../../../general/res/sass/_inspector.scss */ + /* line 87, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; cursor: pointer; display: inline-block; + line-height: 1.2em; position: relative; padding: 2px 4px; } - /* line 93, ../../../../general/res/sass/_inspector.scss */ + /* line 96, ../../../../general/res/sass/_inspector.scss */ + .l-inspect .inspector-location .location-item .t-object-label .t-item-icon { + height: 1.2em; + width: 0.7rem; } + /* line 101, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item:hover { background: rgba(102, 102, 102, 0.1); color: #333333; } - /* line 96, ../../../../general/res/sass/_inspector.scss */ + /* line 104, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon { color: #0099cc; } - /* line 101, ../../../../general/res/sass/_inspector.scss */ + /* line 109, ../../../../general/res/sass/_inspector.scss */ .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after { color: #8c8c8c; content: '\3e'; display: inline-block; font-family: symbolsfont; font-size: 8px; + font-style: normal !important; line-height: inherit; margin-left: 3px; width: 4px; } @@ -1644,7 +1657,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover, .major.s-menu-btn:not(.disabled):hover { - background: deepskyblue; } + background-image: deepskyblue; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon, .s-btn.major:not(.disabled):hover > .t-item-icon, .major.s-menu-btn:not(.disabled):hover > .t-item-icon { color: white; } } @@ -1674,7 +1687,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover, .s-menu-btn:not(.major):not(.disabled):hover { - background: #0099cc; } + background-image: #0099cc; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon, .s-btn:not(.major):not(.disabled):hover > .t-item-icon, .s-menu-btn:not(.major):not(.disabled):hover > .t-item-icon { color: white; } } @@ -1707,7 +1720,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu-btn:not(.disabled):hover { - background: #ffad33; } + background-image: #ffad33; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon, .s-btn.pause-play.paused:not(.disabled):hover > .t-item-icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .t-item-icon { color: white; } } @@ -1799,7 +1812,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .mini-tab.collapsed:not(.disabled):hover { - background: #0099cc; } + background-image: #0099cc; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .mini-tab.collapsed:not(.disabled):hover > .icon, .mini-tab.collapsed:not(.disabled):hover > .t-item-icon { color: white; } } @@ -5381,7 +5394,7 @@ span.req { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover { - background: #7d7d7d; } + background-image: #7d7d7d; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .t-item-icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .t-item-icon { color: white; } } @@ -5681,15 +5694,17 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 4px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; border-color: rgba(0, 153, 204, 0.25); - border-top-color: #0099cc; - width: 10px; - height: 10px; } + border-top-color: #0099cc; } @-moz-keyframes rotateCentered { 0% { -moz-transform: translateX(-50%) translateY(-50%) rotate(0deg); @@ -5715,15 +5730,15 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -ms-transform: translateX(-50%) translateY(-50%) rotate(359deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(359deg); transform: translateX(-50%) translateY(-50%) rotate(359deg); } } -/* line 145, ../../../../general/res/sass/tree/_tree.scss */ +/* line 137, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-item-icon .t-item-icon-glyph { display: none; } -/* line 149, ../../../../general/res/sass/tree/_tree.scss */ +/* line 141, ../../../../general/res/sass/tree/_tree.scss */ mct-representation.s-status-pending .t-object-label .t-title-label { font-style: italic; opacity: 0.6; } -/* line 156, ../../../../general/res/sass/tree/_tree.scss */ +/* line 148, ../../../../general/res/sass/tree/_tree.scss */ .selected mct-representation.s-status-pending .t-object-label .t-item-icon:before { border-color: rgba(252, 252, 252, 0.25); border-top-color: #fcfcfc; } @@ -5777,6 +5792,10 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { -moz-animation-timing-function: linear; -webkit-animation-timing-function: linear; animation-timing-function: linear; + -moz-transform-origin: center 50%; + -ms-transform-origin: center 50%; + -webkit-transform-origin: center 50%; + transform-origin: center 50%; border-style: solid; border-width: 4px; -moz-border-radius: 100%; @@ -5787,7 +5806,7 @@ mct-representation.s-status-pending .t-object-label .t-item-icon:before { position: absolute; left: 50%; top: 50%; - padding: 35%; + padding: 30%; width: 0; height: 0; } @-moz-keyframes rotateCentered { @@ -6847,7 +6866,7 @@ table { @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { /* line 302, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { - background: #d0d0d0; } + background-image: #d0d0d0; } /* line 304, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover > .icon, .items-holder .item.grid-item:not(.disabled):hover > .t-item-icon { color: #33ccff; } } From d397f0f283e9d4840e21a5d747732776afb5a8e7 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 11:57:48 -0800 Subject: [PATCH 24/29] [Mobile] Add classes to body Add classes describing device characteristics to the body of the current document at start-up. Refactor device matchers out of the mct-device directive for reuse and consistency here. https://github.com/nasa/openmctweb/issues/169 --- .../commonUI/mobile/src/DeviceClassifier.js | 58 +++++++++++++++++++ .../commonUI/mobile/src/DeviceMatchers.js | 57 ++++++++++++++++++ platform/commonUI/mobile/src/MCTDevice.js | 27 +-------- 3 files changed, 118 insertions(+), 24 deletions(-) create mode 100644 platform/commonUI/mobile/src/DeviceClassifier.js create mode 100644 platform/commonUI/mobile/src/DeviceMatchers.js diff --git a/platform/commonUI/mobile/src/DeviceClassifier.js b/platform/commonUI/mobile/src/DeviceClassifier.js new file mode 100644 index 0000000000..881a3be191 --- /dev/null +++ b/platform/commonUI/mobile/src/DeviceClassifier.js @@ -0,0 +1,58 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise*/ + +define( + ['./DeviceMatchers'], + function (DeviceMatchers) { + 'use strict'; + + /** + * Runs at application startup and adds a subset of the following + * CSS classes to the body of the document, depending on device + * attributes: + * + * * `mobile`: Phones or tablets. + * * `phone`: Phones specifically. + * * `tablet`: Tablets specifically. + * * `desktop`: Non-mobile devices. + * * `portrait`: Devices in a portrait-style orientation. + * * `landscape`: Devices in a landscape-style orientation. + * + * @param {platform/commonUI/mobile.AgentService} agentService + * the service used to examine the user agent + * @param $document Angular's jqLite-wrapped document element + * @constructor + */ + function MobileClassifier(agentService, $document) { + var body = $document.find('body'); + Object.keys(DeviceMatchers).forEach(function (key) { + if (DeviceMatchers[key](agentService)) { + body.addClass(key); + } + }); + } + + return MobileClassifier; + + } +); \ No newline at end of file diff --git a/platform/commonUI/mobile/src/DeviceMatchers.js b/platform/commonUI/mobile/src/DeviceMatchers.js new file mode 100644 index 0000000000..363662a73e --- /dev/null +++ b/platform/commonUI/mobile/src/DeviceMatchers.js @@ -0,0 +1,57 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ +define(function () { + "use strict"; + + /** + * An object containing key-value pairs, where keys are symbolic of + * device attributes, and values are functions that take the + * `agentService` as inputs and return boolean values indicating + * whether or not the current device has these attributes. + * + * For internal use by the mobile support bundle. + * + * @memberof platform/commonUI/mobile + * @private + */ + return { + mobile: function (agentService) { + return agentService.isMobile(); + }, + phone: function (agentService) { + return agentService.isPhone(); + }, + tablet: function (agentService) { + return agentService.isTablet(); + }, + desktop: function (agentService) { + return !agentService.isMobile(); + }, + portrait: function (agentService) { + return agentService.isPortrait(); + }, + landscape: function (agentService) { + return agentService.isLandscape(); + } + }; +}); \ No newline at end of file diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js index ce418898ee..bcecee3f28 100644 --- a/platform/commonUI/mobile/src/MCTDevice.js +++ b/platform/commonUI/mobile/src/MCTDevice.js @@ -22,31 +22,10 @@ /*global define,Promise*/ define( - function () { + ['./DeviceMatchers'], + function (DeviceMatchers) { 'use strict'; - var DEVICE_MATCHERS = { - mobile: function (agentService) { - return agentService.isMobile(); - }, - phone: function (agentService) { - return agentService.isPhone(); - }, - tablet: function (agentService) { - return agentService.isTablet(); - }, - desktop: function (agentService) { - return !agentService.isMobile(); - }, - portrait: function (agentService) { - return agentService.isPortrait(); - }, - landscape: function (agentService) { - return agentService.isLandscape(); - } - }; - - /** * The `mct-device` directive, when applied as an attribute, * only includes the element when the device being used matches @@ -77,7 +56,7 @@ define( function deviceMatches(tokens) { tokens = tokens || ""; return tokens.split(" ").every(function (token) { - var fn = DEVICE_MATCHERS[token]; + var fn = DeviceMatchers[token]; return fn && fn(agentService); }); } From 5eac0bc5d92e30f0c59fc1cad25d861ad8292407 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 12:02:03 -0800 Subject: [PATCH 25/29] [Mobile] Include classifier as runs extension ...to ensure that body gets device-related classes applied when the application starts. --- platform/commonUI/mobile/bundle.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/platform/commonUI/mobile/bundle.json b/platform/commonUI/mobile/bundle.json index 1ac308a84b..52a0d282bc 100644 --- a/platform/commonUI/mobile/bundle.json +++ b/platform/commonUI/mobile/bundle.json @@ -13,6 +13,12 @@ "implementation": "AgentService.js", "depends": [ "$window" ] } + ], + "runs": [ + { + "implementation": "DeviceClassifier.js", + "depends": [ "agentService", "$document" ] + } ] } } From 91b42fc0ccc80f3c83e9f789b192bcdf2b117298 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 12:41:38 -0800 Subject: [PATCH 26/29] [Mobile] Test DeviceClassifier --- .../mobile/test/DeviceClassifierSpec.js | 112 ++++++++++++++++++ platform/commonUI/mobile/test/suite.json | 1 + 2 files changed, 113 insertions(+) create mode 100644 platform/commonUI/mobile/test/DeviceClassifierSpec.js diff --git a/platform/commonUI/mobile/test/DeviceClassifierSpec.js b/platform/commonUI/mobile/test/DeviceClassifierSpec.js new file mode 100644 index 0000000000..8d1b9db11f --- /dev/null +++ b/platform/commonUI/mobile/test/DeviceClassifierSpec.js @@ -0,0 +1,112 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + + +define( + ["../src/DeviceClassifier", "../src/DeviceMatchers"], + function (DeviceClassifier, DeviceMatchers) { + "use strict"; + + var AGENT_SERVICE_METHODS = [ + 'isMobile', + 'isPhone', + 'isTablet', + 'isPortrait', + 'isLandscape', + 'isTouch' + ], + TEST_PERMUTATIONS = [ + [ 'isMobile', 'isPhone', 'isTouch', 'isPortrait' ], + [ 'isMobile', 'isPhone', 'isTouch', 'isLandscape' ], + [ 'isMobile', 'isTablet', 'isTouch', 'isPortrait' ], + [ 'isMobile', 'isTablet', 'isTouch', 'isLandscape' ], + [ 'isTouch' ], + [] + ]; + + describe("DeviceClassifier", function () { + var mockAgentService, + mockDocument, + mockBody; + + beforeEach(function () { + mockAgentService = jasmine.createSpyObj( + 'agentService', + AGENT_SERVICE_METHODS + ); + mockDocument = jasmine.createSpyObj( + '$document', + [ 'find' ] + ); + mockBody = jasmine.createSpyObj( + 'body', + [ 'addClass' ] + ); + mockDocument.find.andCallFake(function (sel) { + return sel === 'body' && mockBody; + }); + AGENT_SERVICE_METHODS.forEach(function (m) { + mockAgentService[m].andReturn(false); + }); + }); + + TEST_PERMUTATIONS.forEach(function (trueMethods) { + var summary = trueMethods.length === 0 ? + "device has no detected characteristics" : + "device " + (trueMethods.join(", ")); + + describe("when " + summary, function () { + var classifier; + + beforeEach(function () { + trueMethods.forEach(function (m) { + mockAgentService[m].andReturn(true); + }); + classifier = new DeviceClassifier( + mockAgentService, + mockDocument + ); + }); + + it("adds classes for matching, detected characteristics", function () { + Object.keys(DeviceMatchers).filter(function (m) { + return DeviceMatchers[m](mockAgentService); + }).forEach(function (key) { + expect(mockBody.addClass) + .toHaveBeenCalledWith(key); + }); + }); + + it("does not add classes for non-matching characteristics", function () { + Object.keys(DeviceMatchers).filter(function (m) { + return !DeviceMatchers[m](mockAgentService); + }).forEach(function (key) { + expect(mockBody.addClass) + .not.toHaveBeenCalledWith(key); + }); + }); + }); + }); + }); + } +); diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json index b56625efb4..0265644c9c 100644 --- a/platform/commonUI/mobile/test/suite.json +++ b/platform/commonUI/mobile/test/suite.json @@ -1,4 +1,5 @@ [ "AgentService", + "DeviceClassifier", "MCTDevice" ] From 2df61998ab44ca0645cf7e19fa51e77dd83ccb18 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 12:43:46 -0800 Subject: [PATCH 27/29] [Mobile] Detect touch support --- platform/commonUI/mobile/src/AgentService.js | 9 +++++++++ platform/commonUI/mobile/src/DeviceClassifier.js | 1 + platform/commonUI/mobile/src/DeviceMatchers.js | 3 +++ platform/commonUI/mobile/src/MCTDevice.js | 1 + 4 files changed, 14 insertions(+) diff --git a/platform/commonUI/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js index 109520d8bd..3251950ff4 100644 --- a/platform/commonUI/mobile/src/AgentService.js +++ b/platform/commonUI/mobile/src/AgentService.js @@ -46,6 +46,7 @@ define( this.userAgent = userAgent; this.mobileName = matches[0]; this.$window = $window; + this.touchEnabled = ($window.ontouchstart !== undefined); } /** @@ -92,6 +93,14 @@ define( return !this.isPortrait(); }; + /** + * Check if the user's device supports a touch interface. + * @returns {boolean} true if touch is supported + */ + AgentService.prototype.isTouch = function () { + return this.touchEnabled; + }; + /** * Check if the user agent matches a certain named device, * as indicated by checking for a case-insensitive substring diff --git a/platform/commonUI/mobile/src/DeviceClassifier.js b/platform/commonUI/mobile/src/DeviceClassifier.js index 881a3be191..ac275fa4d0 100644 --- a/platform/commonUI/mobile/src/DeviceClassifier.js +++ b/platform/commonUI/mobile/src/DeviceClassifier.js @@ -37,6 +37,7 @@ define( * * `desktop`: Non-mobile devices. * * `portrait`: Devices in a portrait-style orientation. * * `landscape`: Devices in a landscape-style orientation. + * * `touch`: Device supports touch events. * * @param {platform/commonUI/mobile.AgentService} agentService * the service used to examine the user agent diff --git a/platform/commonUI/mobile/src/DeviceMatchers.js b/platform/commonUI/mobile/src/DeviceMatchers.js index 363662a73e..9292625a79 100644 --- a/platform/commonUI/mobile/src/DeviceMatchers.js +++ b/platform/commonUI/mobile/src/DeviceMatchers.js @@ -52,6 +52,9 @@ define(function () { }, landscape: function (agentService) { return agentService.isLandscape(); + }, + touch: function (agentService) { + return agentService.isTouch(); } }; }); \ No newline at end of file diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js index bcecee3f28..704f665a22 100644 --- a/platform/commonUI/mobile/src/MCTDevice.js +++ b/platform/commonUI/mobile/src/MCTDevice.js @@ -47,6 +47,7 @@ define( * * `desktop`: Non-mobile devices. * * `portrait`: Devices in a portrait-style orientation. * * `landscape`: Devices in a landscape-style orientation. + * * `touch`: Device supports touch events. * * @param {AgentService} agentService used to detect device type * based on information about the user agent From 560825cc8696759aef0d2aa3863d97e6cefaba2b Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 12:55:17 -0800 Subject: [PATCH 28/29] [Mobile] Test DeviceMatchers --- .../mobile/test/DeviceClassifierSpec.js | 2 +- .../mobile/test/DeviceMatchersSpec.js | 81 +++++++++++++++++++ platform/commonUI/mobile/test/suite.json | 1 + 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 platform/commonUI/mobile/test/DeviceMatchersSpec.js diff --git a/platform/commonUI/mobile/test/DeviceClassifierSpec.js b/platform/commonUI/mobile/test/DeviceClassifierSpec.js index 8d1b9db11f..951c06f25a 100644 --- a/platform/commonUI/mobile/test/DeviceClassifierSpec.js +++ b/platform/commonUI/mobile/test/DeviceClassifierSpec.js @@ -87,7 +87,7 @@ define( mockDocument ); }); - + it("adds classes for matching, detected characteristics", function () { Object.keys(DeviceMatchers).filter(function (m) { return DeviceMatchers[m](mockAgentService); diff --git a/platform/commonUI/mobile/test/DeviceMatchersSpec.js b/platform/commonUI/mobile/test/DeviceMatchersSpec.js new file mode 100644 index 0000000000..df78e49a6a --- /dev/null +++ b/platform/commonUI/mobile/test/DeviceMatchersSpec.js @@ -0,0 +1,81 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + + +define( + ["../src/DeviceMatchers"], + function (DeviceMatchers) { + 'use strict'; + + describe("DeviceMatchers", function () { + var mockAgentService; + + beforeEach(function () { + mockAgentService = jasmine.createSpyObj( + 'agentService', + [ + 'isMobile', + 'isPhone', + 'isTablet', + 'isPortrait', + 'isLandscape', + 'isTouch' + ] + ); + }); + + it("detects when a device is a desktop device", function () { + mockAgentService.isMobile.andReturn(false); + expect(DeviceMatchers.desktop(mockAgentService)) + .toBe(true); + mockAgentService.isMobile.andReturn(true); + expect(DeviceMatchers.desktop(mockAgentService)) + .toBe(false); + }); + + function method(deviceType) { + return "is" + deviceType[0].toUpperCase() + deviceType.slice(1); + } + + [ + "mobile", + "phone", + "tablet", + "landscape", + "portrait", + "landscape", + "touch" + ].forEach(function (deviceType) { + it("detects when a device is a " + deviceType + " device", function () { + mockAgentService[method(deviceType)].andReturn(true); + expect(DeviceMatchers[deviceType](mockAgentService)) + .toBe(true); + mockAgentService[method(deviceType)].andReturn(false); + expect(DeviceMatchers[deviceType](mockAgentService)) + .toBe(false); + }); + }); + + }); + } +); \ No newline at end of file diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json index 0265644c9c..e72079e835 100644 --- a/platform/commonUI/mobile/test/suite.json +++ b/platform/commonUI/mobile/test/suite.json @@ -1,5 +1,6 @@ [ "AgentService", "DeviceClassifier", + "DeviceMatchers", "MCTDevice" ] From fcee30c27eede25c1fa95077e4de9ac6b3d3ab2c Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 29 Dec 2015 12:58:24 -0800 Subject: [PATCH 29/29] [Mobile] Test agentService.isTouch --- platform/commonUI/mobile/test/AgentServiceSpec.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js index 573e72ddfb..be5fdaf6c5 100644 --- a/platform/commonUI/mobile/test/AgentServiceSpec.js +++ b/platform/commonUI/mobile/test/AgentServiceSpec.js @@ -82,6 +82,15 @@ define( expect(agentService.isLandscape()).toBeFalsy(); }); + it("detects touch support", function () { + testWindow.ontouchstart = null; + expect(new AgentService(testWindow).isTouch()) + .toBe(true); + delete testWindow.ontouchstart; + expect(new AgentService(testWindow).isTouch()) + .toBe(false); + }); + it("allows for checking browser type", function () { testWindow.navigator.userAgent = "Chromezilla Safarifox"; agentService = new AgentService(testWindow);