From f1bc15bf4faf084071e641fa7944b418ee6495cd Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 14 Aug 2015 12:18:53 -0700 Subject: [PATCH 01/98] [API] Begin adding notes for API redesign --- docs/src/design/index.md | 3 + docs/src/design/proposals/APIRedesign.md | 233 +++++++++++++++++++++++ 2 files changed, 236 insertions(+) create mode 100644 docs/src/design/index.md create mode 100644 docs/src/design/proposals/APIRedesign.md diff --git a/docs/src/design/index.md b/docs/src/design/index.md new file mode 100644 index 0000000000..7b4c3e4ebf --- /dev/null +++ b/docs/src/design/index.md @@ -0,0 +1,3 @@ +Design proposals: + +* [API Redesign](proposals/APIRedesign.md) \ No newline at end of file diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md new file mode 100644 index 0000000000..f1bf359cec --- /dev/null +++ b/docs/src/design/proposals/APIRedesign.md @@ -0,0 +1,233 @@ +# Overview + +The purpose of this document is to review feedback on Open MCT Web's +current API and propose improvements to the API, particularly for a +1.0.0 release. + +Strategically, this is handled by: + +* Identifying broader goals. +* Documenting feedback and related background information. +* Reviewing feedback to identify trends and useful features. + * In particular, pull out "pain points" to attempt to address, + as well as positive attributes to attempt to preserve. +* Proposing a set of API changes to address these "pain points." + * This also takes into account scheduling concerns. +* Once agreed-upon, formalize this set of changes (e.g. as UML + diagrams) and plan to implement them. + +# Goals + +## Characteristics of a good API + +A good API: + +* Is easy to understand. +* Rewards doing things "the right way." +* Saves development effort. +* Is powerful enough to support a broad range of applications. + +These characteristics can sometimes be at odds with each other, or +with other concerns. These should typically be viewed as participants +in trades. + +## Evaluating APIs + +APIs may be evaluated based on: + +* Number of interfaces. + * How many application-specific interfaces do I need to know to + solve a certain class of problems? +* Size of interfaces. + * How many methods does each interface have? +* Depth of interfaces. + * Specifically, how many methods do I need to call before the return + value is of a form that is not specific to the API? +* Clarity of interfaces. + * How much documentation or learning is required before an interface is + useful? +* Consistency of interfaces. + * How similar is one interface to an analogous interface? +* Utility of interfaces. + * How much development effort is reduced by utilizing these interfaces, + versus accomplishing the same goals with other tools? +* Power of interfaces. + * How much application functionality can I influence with the interfaces + that are available to me? + +In general, prefer to have a small number of simple, shallow, clear, +useful, powerful interfaces. + +# Developer Feedback + +## Developer Intern Feedback + +This feedback comes from interns who worked closely with +Open MCT Web as their primary task over the Summer of 2015. + +* Initially, it was confusing that many things in files that are in + very different locations in the code base refer to each other. + * Perhaps explain more the organization strategy behind the + different main sections, like "commonUI" vs "core". +* This may be just me, but there are often long chains of related + functions calling each other, and when I had to modify the behavior, + I had a hard time remembering to look for the highest level function + in the call chain to change. I also sometimes had a hard time finding + the connections between the functions. But, that is important because + the implementation of the functions along the chain may change later. +* One very helpful thing that you could add might just be documentation + that is not in paragraph format like in the current developer guide. + I would just like a list of all the functions and members of each kind + of object there is, and descriptions of what they are and how they're + used. + * Also, the current developer guide pdf's words that are in 'code font', + rather than the normal text, are not searchable. + (Depending on the pdf viewer.) +* I do appreciate that there is some example code. +* I am still slightly confused about what "domainObject" refers to in + different situations. +* The tutorials are helpful, but only really for designing new views. + It doesn't help much with gaining understanding of how the other parts + of the application work. +* The general idea of 'telemetry' in this context is kind of confusing. + It is hard to figure out what the difference between the various ways of + dealing with telemetry are. e.g., what is the difference between just + "Telemetry" and the "Telemetry Service"? There are many + "Telemetry Thing"s which seem related, but in an unclear way. + +## Plugin Developer Feedback + +This feedback comes from developers who have worked on plugins for +Open MCT Web, but have not worked on the platform. + +* Not a lot of time to work on this, made it hard to get up the learning + curve. + * Note that this is the norm, particularly for GDS development. + +## Misc. Feedback (mostly verbal) + +* Easy to add things. +* Separation of concerns is unclear (particularly: "where's the MVC?") +* Telemetry API is confusing. In particular, `TelemetrySeries` should + just be an array. + * Came out of design discussions for Limits. +* Capabilities are confusing. + +## Victor's Notes + +* Bundle mechanism allows for grouping related components across concerns, + and adding and removing these easily. (e.g. model and view components of + Edit mode are all grouped together in the Edit bundle.) + +## AngularJS + +Angular 2.0.0 is coming (maybe by end of 2015.) + +It will not be backwards-compatible with Angular 1.x. +The differences are significant enough that switching to +Angular 2 will require only slightly less effort than switching +to an entirely different framework. + +We can expect AngularJS 1.x to reach end-of-life reasonably soon thereafter. + +Our API is currently a superset of Angular's API, so this directly effects +our API. Specifically, API changes should be oriented towards removing +or reducing the Angular dependency. + +### Angular's Role + +Angular is Open MCT Web's: + +* Dependency injection framework. +* Template rendering. +* DOM interactions. +* Services library. +* Form validator. +* Routing. + +This is the problem with frameworks: They become a single point of +failure for unrelated concerns. + +### Rationale for Adopting Angular + +The rationale for adopting AngularJS as a framework is +documented in https://trunk.arc.nasa.gov/jira/browse/WTD-208. +Summary of the expected benefits: + +* Establishes design patterns that are well-documented and + understood in industry. This can be beneficial in training + new staff, and lowers the documentation burden on the local + development team. If MCT-Web were to stay with its current + architecture, significant developer-oriented documentation + and training materials would need to be produced. +* The maintainability of MCT-Web would be enhanced by using a + framework like Angular. The local team would enjoy the benefits of + maintenance performed by the sponsor, but would not incur any cost + for this. This would include future upgrades, testing, and bug fixes. +* Replaces DOM-manipulation with a declarative data-binding syntax + which automatically updates views when the model data changes. This + pattern has the potential to save the development team from + time-consuming and difficult-to-debug DOM manipulation. +* Provides data binding to backend models. +* Provides patterns for form validation. +* Establishes documented patterns for add-on modules and services. +* Supports unit tests and system tests (tests which simulate user + interactions in the browser) +* Angular software releases can be expected to be tested, which would + allow MCT-Web developers to focus on MCT-specific features, instead + of the maintenance of custom infrastructure. + +## Actual Experience with Angular + +Most of the expected benefits of Angular have been invalidated +by experience: + +* Feedback from new developers is that Angular was a hindrance to + training, not a benefit. ("One more thing to learn.") Significant + documentation remains necessary for Open MCT Web. +* Expected enhancements to maintainability will be effectively + invalidated by an expected Angular end-of-life. +* Data binding and automatic view updates do save development effort, + but also carry a performance penalty. This can be solved, but requires + resorting to exactly the sort of DOM manipulations we want to avoid. + In some cases this can require more total development (writing a + poorly-performing Angular version, then "optimizing" by rewriting a + non-Angular version.) +* Expected reduction of test scope will also be invalidated by an + expected end-of-life. + +Other problems: + +* Hinders integrating non-Angular components. (Need to wrap with + Angular API, e.g. as directives, which may be non-trivial.) +* Interferes with debugging by swallowing or obscuring exceptions. + +# Feedback Review + +## Problem Summary + +The following attributes of the current API are undesirable: + +[ ] It is difficult to tell "where things are" in the code base. +[ ] It is difficult to see how objects are passed around at run-time. +[ ] Multiple interfaces for related concepts (e.g. telemetry) is confusing. +[ ] API documentation is missing or not well-formatted for use. +[ ] High-level separation of concerns is not made clear. +[ ] Interface depth of telemetry API is excessive (esp. `TelemetrySeries`) +[ ] Capabilities as a concept lack clarity. +[ ] Too many interfaces and concepts to learn. + +## Positive Features + +It is desirable to retain the following features in an API redesign: + +[ ] Creating new features and implementing them additively is well-supported. +[ ] Easy to add/remove features which involve multiple concerns. + +## Requirements + +The following are considered "must-haves" of any complete API +redesign: + +[ ] Don't require usage of Angular API. +[ ] Don't require support for Angular API. \ No newline at end of file From 7ddaa4614bfd5ed1c444c885b5acdaa4d607c706 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 14 Aug 2015 12:23:11 -0700 Subject: [PATCH 02/98] [API] Fix markdown formatting --- docs/src/design/proposals/APIRedesign.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index f1bf359cec..145301415d 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -208,26 +208,26 @@ Other problems: The following attributes of the current API are undesirable: -[ ] It is difficult to tell "where things are" in the code base. -[ ] It is difficult to see how objects are passed around at run-time. -[ ] Multiple interfaces for related concepts (e.g. telemetry) is confusing. -[ ] API documentation is missing or not well-formatted for use. -[ ] High-level separation of concerns is not made clear. -[ ] Interface depth of telemetry API is excessive (esp. `TelemetrySeries`) -[ ] Capabilities as a concept lack clarity. -[ ] Too many interfaces and concepts to learn. +- [ ] It is difficult to tell "where things are" in the code base. +- [ ] It is difficult to see how objects are passed around at run-time. +- [ ] Multiple interfaces for related concepts (e.g. telemetry) is confusing. +- [ ] API documentation is missing or not well-formatted for use. +- [ ] High-level separation of concerns is not made clear. +- [ ] Interface depth of telemetry API is excessive (esp. `TelemetrySeries`) +- [ ] Capabilities as a concept lack clarity. +- [ ] Too many interfaces and concepts to learn. ## Positive Features It is desirable to retain the following features in an API redesign: -[ ] Creating new features and implementing them additively is well-supported. -[ ] Easy to add/remove features which involve multiple concerns. +- [ ] Creating new features and implementing them additively is well-supported. +- [ ] Easy to add/remove features which involve multiple concerns. ## Requirements The following are considered "must-haves" of any complete API redesign: -[ ] Don't require usage of Angular API. -[ ] Don't require support for Angular API. \ No newline at end of file +- [ ] Don't require usage of Angular API. +- [ ] Don't require support for Angular API. From 8fae298fdef394a43e94d6fb0c7b79efce8bdaa1 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 14 Aug 2015 12:32:51 -0700 Subject: [PATCH 03/98] [API] Fix heading depth --- docs/src/design/proposals/APIRedesign.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 145301415d..644371e22e 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -177,7 +177,7 @@ Summary of the expected benefits: allow MCT-Web developers to focus on MCT-specific features, instead of the maintenance of custom infrastructure. -## Actual Experience with Angular +### Actual Experience with Angular Most of the expected benefits of Angular have been invalidated by experience: From 12760b63b9257495a9697d4473c9dc099661c315 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 17 Aug 2015 09:38:30 -0700 Subject: [PATCH 04/98] [API] Add additional feedback --- docs/src/design/proposals/APIRedesign.md | 61 +++++++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index f1bf359cec..3a90084218 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -100,9 +100,65 @@ Open MCT Web as their primary task over the Summer of 2015. This feedback comes from developers who have worked on plugins for Open MCT Web, but have not worked on the platform. +### Plugin Developer 1 + +Used Open MCT Web over the course of several months (on a +less-than-half-time basis) to develop a +spectrum visualization plugin. + * Not a lot of time to work on this, made it hard to get up the learning curve. * Note that this is the norm, particularly for GDS development. +* JavaScript carries its own learning curve. +* The fact that it pulls in other tools whose APIs need to be learned + also makes the learning curve harder to get up. +* Tracking down interconnected parts was a bit difficult. +* Could really use examples. +* Easy to get lost when not immersed in the style. + +### Plugin Developer 2 + +Used Open MCT Web over the course of several weeks (on a half-time basis) +to develop a tabular visualization plugin. + +* Pain points + * Unable to copy and paste from tutorial pdfs into code + * Wanted to verify my environment was setup properly so that I + could get the final product working in the end without having + to type everything out. Perhaps there could be something in + github that has the final completed tutorial for new users to + checkout? Or a step by step one kind of like the tutorials on + the angular js webpage? + * Typing too long without seeing results of what I was doing + * At some points in the tutorial I ended up typing for the sake + of typing without knowing what I was really typing for. + * If there were break points where we could run the incomplete + code and just see a variable dump or something even that would + be helpful to know that I am on the right track. + * Documentation on features are a bit hard to find. + * I'm not sure what I can do until I search through examples of + existing code and work my way backwards. + * Maybe you can link the features we are using in the tutorial to + their respective parts in the developer guide? Not sure if that + can be done on PDFs, so maybe a webpage instead? +* Positive Attributes + * Unable to copy and paste from tutorial pdfs into code + * I know I also listed this as a pain, but it was kind of helpful + being forced to read and type everything out. + * "Widgets" are self contained in their own directories. I don't have + to be afraid of exploding things. + * All files/config that I care about for a "widget" can be found in + the bundles.json +* Misc + * Coming from a not so strong webdev background and on top of that a + zero strong angular background I think starting off with a simple + "Hello World" webpage tutorial would have been nice. + * Start off with a bare bones bundle json with an empty controller + and static "Hello World" in the view + * Add the variable "Hello World" into the controller for the view + to display + * Add a model property to the bundle.json to take in "Hello World" + as a parameter and pass through to the controller/view ## Misc. Feedback (mostly verbal) @@ -113,7 +169,10 @@ Open MCT Web, but have not worked on the platform. * Came out of design discussions for Limits. * Capabilities are confusing. -## Victor's Notes +## Long-term Developer Notes + +The following notes are from original platform developer, with long +term experience using Open MCT Web. * Bundle mechanism allows for grouping related components across concerns, and adding and removing these easily. (e.g. model and view components of From 4d4fe7f6265f1af11311b0c9e03dcb638ad74f43 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 17 Aug 2015 09:49:34 -0700 Subject: [PATCH 05/98] [API] Incorporate newer feedback --- docs/src/design/proposals/APIRedesign.md | 27 ++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 3a90084218..a4cd45411d 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -26,6 +26,7 @@ A good API: * Rewards doing things "the right way." * Saves development effort. * Is powerful enough to support a broad range of applications. +* Lends itself to good documentation. These characteristics can sometimes be at odds with each other, or with other concerns. These should typically be viewed as participants @@ -65,6 +66,10 @@ useful, powerful interfaces. This feedback comes from interns who worked closely with Open MCT Web as their primary task over the Summer of 2015. +### Developer Intern 1 + +Worked on bug fixes in the platform and a plugin for search. + * Initially, it was confusing that many things in files that are in very different locations in the code base refer to each other. * Perhaps explain more the organization strategy behind the @@ -95,6 +100,21 @@ Open MCT Web as their primary task over the Summer of 2015. "Telemetry" and the "Telemetry Service"? There are many "Telemetry Thing"s which seem related, but in an unclear way. +### Developer Intern 2 + +Worked on platform bug fixes and mobile support. + +* No guide for the UI and front end for the HTML/CSS part of Open MCT Web. + Not sure if this is applicable or needed for developers, however would + be helpful to any front end development +* Found it difficult to follow the plot controller & subplot + functions/features, such as zooming. +* If the developer guide could have for references to which files or + functions are key for gestures, browse navigation, etc it would be + helpful for future developers as a place to start looking. I found + it occasionally difficult to find which files or functions I wanted + at first. + ## Plugin Developer Feedback This feedback comes from developers who have worked on plugins for @@ -269,12 +289,17 @@ The following attributes of the current API are undesirable: [ ] It is difficult to tell "where things are" in the code base. [ ] It is difficult to see how objects are passed around at run-time. +[ ] It is difficult to trace flow of control generally. [ ] Multiple interfaces for related concepts (e.g. telemetry) is confusing. [ ] API documentation is missing or not well-formatted for use. [ ] High-level separation of concerns is not made clear. [ ] Interface depth of telemetry API is excessive (esp. `TelemetrySeries`) [ ] Capabilities as a concept lack clarity. [ ] Too many interfaces and concepts to learn. +[ ] Exposing third-party APIs (e.g. Angular's) increases the learning curve. +[ ] Want more examples, easier-to-use documentation. +[ ] UI-relevant features (HTML, CSS) under-documented +[ ] Good MVC for views of domain objects not enforced (e.g. plots) ## Positive Features @@ -282,6 +307,8 @@ It is desirable to retain the following features in an API redesign: [ ] Creating new features and implementing them additively is well-supported. [ ] Easy to add/remove features which involve multiple concerns. +[ ] Features can be self-contained. +[ ] Declarative syntax makes it easy to tell what's in use. ## Requirements From 844d608fb9229b26742a4a2ab1351ad82e5b7783 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 18 Aug 2015 14:02:30 -0700 Subject: [PATCH 06/98] [API] Begin proposing changes --- docs/src/design/proposals/APIRedesign.md | 115 +++++++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 2223541f83..835d96e286 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -317,3 +317,118 @@ redesign: - [ ] Don't require usage of Angular API. - [ ] Don't require support for Angular API. + +# Proposals + +## RequireJS as dependency injector + +Use Require.JS for dependency injection. + +Dependencies will then be responsible for being sufficiently +mutable/extensible/customizable. This can be facilitated by +adding platform classes which can facilitate the addition +of reusable components. + +Things that we usefully acquire via dependency injection currently: + +* Services. +* Extensions (by category). +* Configuration constants. + +Services would be defined (by whatever component is responsible +for declaring it) using `define` and the explicit name of the +service. To allow for the power of composite services, the +platform would provide a `CompositeService` class that supports +this process by providing `register`, `decorate`, and `composite` +methods to register providers, decorators, and aggregators +respectively. (Note that nomenclature changes are also implied +here, to map more clearly to the Composite Pattern and to +avoid the use of the word "provider", which has ambiguity with +Angular.) + +```js +define( + "typeService", + ["CompositeService"], + function (CompositeService) { + var typeService = new CompositeService([ + "listTypes", + "getType" + ]); + + // typeService has `listTypes` and `getType` as methods; + // at this point they are stubbed (will return undefined + // or throw or similar) but this will change as + // decorators/compositors/providers are added. + + // You could build in a compositor here, or + // someone could also define one later + typeService.composite(function (typeServices) { + // ... return a TypeService + }); + + // Similarly, you could register a default implementation + // here, or from some other script. + typeService.register(function (typeService) { + // ... return a TypeService + }, { priority: 'default' }); + + return typeService; + } +); +``` + +Other code could then register additional `TypeService` +implementations (or decorators, or even compositors) by +requiring `typeService` and calling those methods; or, it +could use `typeService` directly. Priority ordering could +be utilized by adding a second "options" argument. + +For extension categories, you could simply use registries: + +```js +define( + "typeRegistry", + ["ExtensionRegistry"], + function (ExtensionRegistry) { + return new ExtensionRegistry(); + } +); +``` + +Where `ExtensionRegistry` extends `Array`, and adds a +`register` method which inserts into the array at some +appropriate point (e.g. with an options parameter that +respects priority order.) + +This makes unit testing somewhat more difficult when you +want to mock injected dependencies; there are tools out +there (e.g. [Squire](https://github.com/iammerrick/Squire.js/)) +which can help with this, however. + +### Benefits + +* Clarifies "how objects are passed around at run-time"; + answer is always "via RequireJS." +* Preserves flexibility/power provided by composite services. +* Lends itself fairly naturally to API documentation via JSDoc + (as compared to declaring things in bundles, which does not.) +* Reduces interface complexity for acquiring dependencies; + one interface for both explicit and "implicit" dependencies, + instead of separate approaches for static and substitutable + dependencies. +* Removes need to understand Angular's DI mechanism. +* Improves useability of documentation (`typeService` is an + instance of `CompositeService` and implements `TypeService` + so you can easily traverse links in the JSDoc.) + +### Detriments + +* Having services which both implement the service, and + have methods for registering the service, is a little + weird; would be cleaner if these were separate. + (Mixes concerns.) +* Syntax becomes non-declarative, which may make it harder to + understand "what uses what." +* Allows for ordering problems (e.g. you start using a + service before everything has been registered.) From 4c00d5d58f52c484097281e0c07ea6e8e44fe590 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 18 Aug 2015 15:45:36 -0700 Subject: [PATCH 07/98] [API] Propose view changes --- docs/src/design/proposals/APIRedesign.md | 68 ++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 835d96e286..e1a11635fd 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -432,3 +432,71 @@ which can help with this, however. understand "what uses what." * Allows for ordering problems (e.g. you start using a service before everything has been registered.) + +## Arbitrary HTML Views + +Currently, writing new views requires writing Angular templates. +This must change if we want to reduce our dependence on Angular. + +Instead, propose that: + +* What are currently called "views" we call something different. + (Want the term view to be more like "view" in the MVC sense.) + * For example, call them "applications." +* Consolidate what are currently called "representations" and + "templates", and instead have them be "views". + +For parity with actions, a `View` would be a constructor which +takes an `ActionContext` as a parameter (with similarly-defined +properties) and exposes a method to retrieve the HTML elements +associateed with it. + +The platform would then additionally expose an `AngularView` +implementation to improve compatibility with existing +representations, whose usage would something like: + +```js +define( + ["AngularView"], + function (AngularView) { + var template = "Hello world"; + return new AngularView(template); + } +); +``` + +The interface exposed by a view is TBD, but should provide at +least the following: + +* A way to get the HTML elements that are exposed by & managed + by the view. +* A `destroy` method to detach any listeners at the model level. + +Individual views are responsible for managing their resources, +e.g. listening to domain objects for mutation. To keep DRY, the +platform should include one or more view implementations that +can be used/subclassed which handle common behavior(s). + +### Benefits + +* Using Angular API for views is no longer required. +* Views become less-coupled to domain objects. Domain objects + may be present in the `ViewContext`, but this also might + just be a "view" of some totally different thing. +* Helps clarify high-level concerns in the API (a View is now + really more like a View in the MVC sense; although, not + completely, so this gets double-booked as a detriment.) + +### Detriments + +* Becomes less clear how views relate to domain objects. +* Adds another interface. +* Leaves an open problem of how to distinguish views that + a user can choose (Plot, Scrolling List) from views that + are used more internally by the application (tree view.) +* Views are still not Views in the MVC sense (in practice, + the will likely be view-controller pairs.) We could call + them widgets to disambiguate this. +* Related to the above, even if we called these "widgets" + it would still fail to enforce good MVC. + From 2adf84b082ec3444537f304a7a5fde72effb4a48 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 18 Aug 2015 16:14:14 -0700 Subject: [PATCH 08/98] [API] Add proposal for wrapping Angular services --- docs/src/design/proposals/APIRedesign.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index e1a11635fd..e29646e273 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -500,3 +500,22 @@ can be used/subclassed which handle common behavior(s). * Related to the above, even if we called these "widgets" it would still fail to enforce good MVC. +## Wrap Angular Services + +Wrap Angular's services in a custom interfaces; e.g. +replace `$http` with an `httpService` which exposes a useful +subset of `$http`'s functionality. + +### Benefits + +* Removes a ubiquitous dependency on Angular. +* Allows documentation for these features to be co-located + and consistent with other documentation. +* Facilitates replacing these with non-Angular versions + in the future. + +### Detriments + +* Increases the number of interfaces in Open MCT Web. (Arguably, + not really, since the same interfaces would exist if exposed + by Angular.) From cd51c359eb0e3d84e08517759e4ad2a7a73652cd Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 18 Aug 2015 16:37:58 -0700 Subject: [PATCH 09/98] [API] Add notes on bundles to API redesign --- docs/src/design/proposals/APIRedesign.md | 60 ++++++++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index e29646e273..89f271691b 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -519,3 +519,63 @@ subset of `$http`'s functionality. * Increases the number of interfaces in Open MCT Web. (Arguably, not really, since the same interfaces would exist if exposed by Angular.) + +## Bundle Declarations in JavaScript + +Replace `bundle.json` files (and bundle syntax generally) with +an imperative form. There would instead be a `Bundle` interface +which scripts can implement (perhaps assisted by a platform +class.) + +The `bundles.json` file would then be replaced with a `bundles.js` +or `Bundles.js` that would look something like: + +```js +define( + [ + 'platform/core/PlatformBundle', + // ... etc ... + 'platform/features/plot/PlotBundle' + ], + function () { + return arguments; + } +); +``` + +Which could in turn be used by an initializer: + +```js +define( + ['./bundles', 'mct'], + function (bundles, mct) { + mct.initialize(bundles); + } +); +``` + +A `Bundle` would have a constructor that took some JSON object +(a `BundleContext`, lets say) and would provide methods for +application life-cycle events. Depending on other choices, +a dependency injector could be passed in at some appropriate +life-cycle call (e.g. initialize.) + +This would also allow for "composite bundles" which serve as +proxies for multiple bundles. The `BundleContext` could contain +(or later be amended to contain) filtering rules to ignore +other bundles and so forth (this has been useful for administering +Open MCT Web in subtly different configurations in the past.) + +### Benefits + +* Imperative; more explicit, less magic, more clear what is going on. +* Having a hierarchy of "bundles" could make it easier to navigate + (relevant groupings can be nested in a manner which is not + currently well-supported.) +* Lends itself naturally to a compilation step. + +### Detriments + +* Introduces another interface. +* Loses some of the convenience of having a declarative + summary of components and their dependencies. From 097794d94f8134eafd3f9f3083b173e8a68f6917 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 18 Aug 2015 17:55:15 -0700 Subject: [PATCH 10/98] [API] Smaller redesign notes --- docs/src/design/proposals/APIRedesign.md | 56 ++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 89f271691b..daf7786186 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -573,9 +573,65 @@ Open MCT Web in subtly different configurations in the past.) (relevant groupings can be nested in a manner which is not currently well-supported.) * Lends itself naturally to a compilation step. +* Nudges plugin authors to "do your initialization and registration + in a specific place" instead of mixing in registration of features + with their implementations. ### Detriments * Introduces another interface. * Loses some of the convenience of having a declarative summary of components and their dependencies. + +## Pass around a dependency injector + +Note that this is incompatible with the +[RequireJS as dependency injector](#requirejs-as-dependency-injector) +proposal. + +Via some means (such as in a registration lifecycle event as +described above) pass a dependency injector to plugins to allow +for dependencies to be registered. + +For example: + +```js +MyBundle.prototype.registration = function (architecture) { + architecture.service('typeService').register(MyTypeService); + architecture.extension('actions').register( + [ 'foo' ], + function (foo) { return new MyAction(foo); } + ); +}; +``` + +### Benefits + +* Ensures that registration occurs at an appropriate stage of + application execution, avoiding start-up problems. +* Makes registration explicit (generally easier to understand) + rather than implicit. +* Encapsulates dependency injection nicely. + +### Detriments + +* Increases number of interfaces to learn. +* Syntax likely to be awkward, since in many cases we really + want to be registering constructors. + +## Remove partial constructors + +Remove partial constructors; these are confusing. It is hard to +recognize which constructor arguments are from dependencies, and +which will be provided at run-time. Instead, it is the responsibility +of whoever is introducing a component to manage these things +separately. + +### Benefits + +* More clarity. + +### Detriments + +* Possibly results in redundant effort to manage this difference + (other APIs may need to be adjusted accordingly.) From ccfafb6f89cc3da0d6847cac500c310ada7d0e1e Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 19 Aug 2015 13:07:54 -0700 Subject: [PATCH 11/98] [API] Add more proposals WTD-1237 --- docs/src/design/proposals/APIRedesign.md | 69 +++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index daf7786186..d06a9dd655 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -486,6 +486,9 @@ can be used/subclassed which handle common behavior(s). * Helps clarify high-level concerns in the API (a View is now really more like a View in the MVC sense; although, not completely, so this gets double-booked as a detriment.) +* Having a `ViewContext` that gets passed in allows views to + be more "contextually aware," which is something that has + been flagged previously as a UX desire. ### Detriments @@ -585,7 +588,7 @@ Open MCT Web in subtly different configurations in the past.) ## Pass around a dependency injector -Note that this is incompatible with the +:warning: Note that this is incompatible with the [RequireJS as dependency injector](#requirejs-as-dependency-injector) proposal. @@ -635,3 +638,67 @@ separately. * Possibly results in redundant effort to manage this difference (other APIs may need to be adjusted accordingly.) + +## Rename Views to Applications + +Rename (internally to the application, not necessarily in UI or +in user guide) what are currently called `views` to `applications`. + +### Benefits + +* Easier to understand. What is currently called a "view" is, + in the MVC sense, a view-controller pair, usually with its own + internal model for view state. Calling these "applications" + would avoid this ambiguity/inconsistency. +* Also provides an appropriate mindset for building these; + particularly, sets the expectation that you'll want to decompose + this "application" into smaller pieces. This nudges developers + in appropriate directions (in contrast to `views`, which + typically get implemented as templates with over-complicated + "controllers".) + +### Detriments + +* Developer terminology falls out of sync with what is used in + the user guide. + +## Provide Classes for Extensions + +As a general pattern, when introducing extension categories, provide +classes with a standard implementation of these interfaces that +plugin developers can `new` and register. + +For example, instead of declaring a type as: + +```json +{ + "types": [{ + "key": "sometype", + "glyph": "X", + "etc": "..." + }] +} +``` + +You would register one as: + +```js +// Assume we have gotten a reference to a type registry somehow +typeRegistry.register(new Type({ + "key": "sometype", + "glyph": "X", + "etc": "..." +})); +``` + +### Benefits + +* Easier to understand (less "magic"). +* Lends itself naturally to substitution of different implementations + of the same interface. +* Allows for run-time decisions about exactly what gets registered. + +### Detriments + +* Adds some modest boilerplate. +* Provides more opportunity to "do it wrong." From e7fa0e9f21f482d1b53141cbe7da245cae631721 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 19 Aug 2015 13:26:58 -0700 Subject: [PATCH 12/98] [API] Add proposal w.r.t. third-party APIs WTD-1237 --- docs/src/design/proposals/APIRedesign.md | 49 ++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index d06a9dd655..42c3b6269e 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -702,3 +702,52 @@ typeRegistry.register(new Type({ * Adds some modest boilerplate. * Provides more opportunity to "do it wrong." + +## Normalize naming conventions + +Adopt and obey the following naming conventions for AMD modules +(and for injectable dependencies, which may end up being modules): + +* Use `UpperCamelCase` for classes. +* Use `lowerCase` names for instances. + * Use `someNoun` for object instances which implement some + interface. The noun should match the implemented interface, + when applicable. + * `useSomeVerb` for functions. +* Use `ALL_CAPS_WITH_UNDERSCORES` for other values, including + "struct-like" objects (that is, where the object conceptually + contains properties rather than methods.) + +### Benefits + +* Once familiar with the conventions, easier to understand what + individual modules are. + +### Detriments + +* A little bit inflexible. + +## Expose no third-party APIs + +As a general practice, expose no third-party APIs as part of the +platform. + +For cases where you do want to access third-party APIs directly +from other scripts, this behavior should be "opt-in" instead of +mandatory. For instance, to allow addition of Angular templates, +an Angular-support bundle could be included which provides an +`AngularView` class, a `controllerRegistry`, et cetera. Importantly, +such a bundle would need to be kept separate from the platform API, +or appropriately marked as non-platform in the API docs (an +`@experimental` tag would be nice here if we feel like extending +JSDoc.) + +### Benefits + +* Simplifies learning curve (only one API to learn.) +* Reduces Angular dependency. +* Avoids the problems of ubiquitous dependencies generally. + +### Detriments + +* Increases documentation burden. From dfacf08e45934d0999b175c2be70f9a8495abbb5 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 19 Aug 2015 13:44:34 -0700 Subject: [PATCH 13/98] [API] Propose registering instances WTD-1237 --- docs/src/design/proposals/APIRedesign.md | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 42c3b6269e..77a0159aad 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -751,3 +751,36 @@ JSDoc.) ### Detriments * Increases documentation burden. + +## Register Extensions as Instances instead of Constructors + +Register extensions as object instances instead of constructors. +This allows for API flexibility w.r.t. constructor signatures +(and avoids the need for partial constructors) and additionally +makes it easier to provide platform implementations of extensions +that can be used, subclassed, etc. + +For instance, instead of taking an `ActionContext` in its +constructor, an `Action` would be instantiated once and would +accept appropriate arguments to its methods: + +```js +function SomeAction { +} +SomeAction.prototype.canHandle = function (actionContext) { + // Check if we can handle this context +}; +SomeAction.prototype.perform = function (actionContext) { + // Perform this action, in this context +}; +``` + +### Benefits + +* Reduces scope of interfaces to understand (don't need to know + what constructor signature to provide for compatibility.) + +### Detriments + +* Requires refactoring of various types; may result in some + awkward APIs or extra factory interfaces. From 553e226a5dc750ee892dc0fae2e185803e338e53 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 20 Aug 2015 14:34:59 -0700 Subject: [PATCH 14/98] [API] Add proposal for removing delegation --- docs/src/design/proposals/APIRedesign.md | 33 ++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 77a0159aad..d16d1831e2 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -784,3 +784,36 @@ SomeAction.prototype.perform = function (actionContext) { * Requires refactoring of various types; may result in some awkward APIs or extra factory interfaces. + +## Remove capability delegation + +The `delegation` capability has only been useful for the +`telemetry` capability, but using both together creates +some complexity to manage. In practice, these means that +telemetry views need to go through `telemetryHandler` to +get their telemetry, which in turn has an awkward API. + +This could be resolved by: + +* Removing `delegation` as a capability altogether. +* Reworking `telemetry` capability API to account for + the possibility of multiple telemetry-providing + domain objects. (Perhaps just stick `domainObject` + in as a field in each property of `TelemetryMetadata`?) +* Move the behavior currently found in `telemetryHandler` + into the `telemetry` capability itself (either the + generic version, or a version specific to telemetry + panels - probably want some distinct functionality + for each.) + +### Benefits + +* Reduces number of interfaces. +* Accounting for the possibility of multiple telemetry objects + in the `telemetry` capability API means that views using + this will be more immediately aware of this as a possibility. + +### Detriments + +* Increases complexity of `telemetry` capability's interface + (although this could probably be minimized.) From 8f8dd6c11fe4c91bc80e186a665346bbb1ae05a0 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 27 Aug 2015 16:01:40 -0700 Subject: [PATCH 15/98] [API] Propose nomenclature change WTD-1237 --- docs/src/design/proposals/APIRedesign.md | 31 ++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index d16d1831e2..b1176951cb 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -817,3 +817,34 @@ This could be resolved by: * Increases complexity of `telemetry` capability's interface (although this could probably be minimized.) + +## Nomenclature Change + +Instead of presenting Open MCT Web as a "framework" or +"platform", present it as an "extensible application." + +This is mostly a change for the developer guide. A +"framework" and a "platform" layer would still be useful +architecturally, but the plugin developer's mental model +for this would then be inclined toward looking at defined +extension points. The underlying extension mechanism could +still be exposed to retain the overall expressive power of +the application. + +This may subtly influence other design decisions in order +to match the "extensible application" identity. On a certain +level, this contradicts the proposal to +[rename views to applications](#rename-views-to-applications). + +### Benefits + +* May avoid incurring some of the "framework aversion" that + is common among JavaScript developers. +* More accurately describes the application. + +### Detriments + +* May also be a deterrent to developers who prefer the more + "green field" feel of developing applications on a useful + platform. + From 7d94e20c8ffd2688c0f280f223d1bb9a131ac353 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 1 Sep 2015 09:35:59 -0700 Subject: [PATCH 16/98] [API] Add proposals for capability changes WTD-1237 --- docs/src/design/proposals/APIRedesign.md | 53 ++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index b1176951cb..38c02c9feb 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -848,3 +848,56 @@ level, this contradicts the proposal to "green field" feel of developing applications on a useful platform. +## Capabilities as Mixins + +Change the behavior of capabilities such that they act as +mixins, adding additional methods to domain objects. +Checking if a domain object has a `persistence` capability +would instead be reduced to checking if it has a `persist` +method. + +Mixins would be applied in priority order and filtered for +applicability by policy. + +### Benefits + +* Replaces "capabilities" (which, as a concept, can be hard + to grasp) with a more familiar "mixins" concept, which has + been used more generally across many languages. +* Reduces interface depth. + +### Detriments + +* Requires checking for the interface exposed by a domain + object. Alternately, could use `instanceof`, but would + need to take care to ensure that the prototype chain of + the domain object is sufficient to do this (which may + enforce awkward or non-obvious constraints on the way these + mixins are implemented.) +* May complicate documentation; understanding the interface + of a given domain object requires visiting documentation + for various mixins. + +## Remove Applies-To Methods + +Remove all `appliesTo` static methods and replace them with +appropriate policy categories. + +### Benefits + +* Reduces sizes of interfaces. Handles filtering down sets + of extensions in a single consistent way. + +### Detriments + +* Mixes formal applicability with policy; presently, `appliesTo` + is useful for cases where a given extension cannot, even in + principle, be applied in a given context (e.g. a domain object + model is missing the properties which describe the behavior), + whereas policy is useful for cases where applicability is + being refined for business or usability reasons. Colocating + the former with the extension itself has some benefits + (exhibits better cohesion.) + * This could be mitigated in the proposed approach by locating + `appliesTo`-like policies in the same bundle as the relevant + extension. From c2971fd48515a9632be4e92d52c1b9c27cb41894 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 4 Sep 2015 09:30:09 -0700 Subject: [PATCH 17/98] [API] Propose telemetry API revisions --- docs/src/design/proposals/APIRedesign.md | 49 ++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 38c02c9feb..dba438cd40 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -901,3 +901,52 @@ appropriate policy categories. * This could be mitigated in the proposed approach by locating `appliesTo`-like policies in the same bundle as the relevant extension. + +## Revise Telemetry API + +Revise telemetry API such that: + +* `TelemetrySeries` is replaced with arrays of JavaScript objects + with properties. +* It is no longer necessary to use `telemetryHandler` (plays well + with proposal to + [remove capability delegation](#remove-capability delegation)) +* Change `request` call to take a callback, instead of returning + a promise. This allows that callback to be invoked several + times (e.g. for progressive loading, or to reflect changes from + the time conductor.) + +Should also consider: + +* Merge `subscribe` functionality into `request`; that is, handle + real-time data as just another thing that triggers the `request` + callback. + +As a consequence of this, `request` would need to return an object +representing the active request. This would need to be able to +answer the following questions and provide the following behavior: + +* Has the request been fully filled? (For cases like progressive + loading?) +* What data has changed since the previous callback? (To support + performance optimizations in plotting; e.g. append real-time + data.) +* Stop receiving updates for this request. +* Potentially, provide utility methods for dealing with incoming + data from the request. + +Corollary to this, some revision of `TelemetryMetadata` properties +may be necessary to fully and usably describe the contents of +a telemetry series. + +### Benefits + +* Reduces interface depth. +* Reduces interface size (number of methods.) +* Supports a broader range of behaviors (e.g. progressive loading) + within the same interface. + +### Detriments + +* Merging with `subscribe` may lose the clarity/simplicity of the + current API. From c91e914c2217971d8b3ccdd99445c5dac0f916bf Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 11 Sep 2015 12:26:45 -0700 Subject: [PATCH 18/98] [API Redesign] Add proposal to improve fault tolerance Related to #79 --- docs/src/design/proposals/APIRedesign.md | 50 ++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index dba438cd40..3f07a65723 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -180,6 +180,11 @@ to develop a tabular visualization plugin. * Add a model property to the bundle.json to take in "Hello World" as a parameter and pass through to the controller/view +### Open Source Contributer + + * [Failures are non-graceful when services are missing.]( + https://github.com/nasa/openmctweb/issues/79) + ## Misc. Feedback (mostly verbal) * Easy to add things. @@ -950,3 +955,48 @@ a telemetry series. * Merging with `subscribe` may lose the clarity/simplicity of the current API. + +## Allow Composite Services to Fail Gracefully + +Currently, when no providers are available for a composite service +that is depended-upon, dependencies cannot be resolved and the +application fails to initialize, with errors appearing in the +developer console. + +This is acceptable behavior for truly unrecoverable missing +dependencies, but in many cases it would be preferable to allow a +given type of composite service to define some failure behavior +when no service of an appropriate type is available. + +To address this: + +* Provide an interface (preferably + [imperative](#bundle-Declarations-in-javascript)) + for declaring composite services, independent of any implementation + of an aggregator/decorator/provider. This allows the framework + layer to distinguish between unimplemented dependencies (which + could have defined failover strategies) from undefined dependencies + (which cannot.) +* Provide a default strategy for service composition that picks + the highest-priority provider, and logs an error (and fails to + satisfy) if no providers have been defined. +* Allow this aggregation strategy to be overridden, much as one + can declare aggregators currently. However, these aggregators should + get empty arrays when no providers have been registered (instead of + being ignored), at which point they can decide how to handle this + situation (graceful failure when it's possible, noisy errors when + it is not.) + +### Benefits + +* Allows for improved robustness and fault tolerance. +* Makes service declarations explicit, reducing "magic." + +### Detriments + +* Requires the inclusion of software units which define services, + instead of inferring their existence (slight increase in amount + of code that needs to be written.) +* May result in harder-to-understand errors when overridden + composition strategies do not failover well (that is, when they + do need at least implementation, but fail to check for this.) From b4c0de84d840708c4185d20fe0bd501a03b3b98b Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 16 Sep 2015 16:32:48 -0700 Subject: [PATCH 19/98] Intermediary commit; considering imperative plugins --- .../src/design/proposals/ImperativePlugins.md | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 docs/src/design/proposals/ImperativePlugins.md diff --git a/docs/src/design/proposals/ImperativePlugins.md b/docs/src/design/proposals/ImperativePlugins.md new file mode 100644 index 0000000000..35dab663e5 --- /dev/null +++ b/docs/src/design/proposals/ImperativePlugins.md @@ -0,0 +1,96 @@ +# Imperative Plugins + +This is a design proposal for handling +[bundle declarations in JavaScript]( +APIRedesign.md#bundle-declarations-in-javascript). + +## Developer Use Cases + +Developers will want to use bundles/plugins to (in rough order +of occurrence): + +1. Add new extension instances. +2. Add new service implementations. +3. Decorate service implementations. +4. Add new types of services. +5. Add new extension categories. + +Notably, bullets 4 and 5 above are currently handled implicitly, +which has been cited as a source of confusion. + +## Interfaces + +```javascript + +/** + * Something that can be installed in a running instance of MCT. + * @interface Installable + */ + +/** + * Install this plugin in an instance of MCT. + * @method Installable#install + * @param mct the instance of MCT in which to install + */ + +/** + * A bundle is a set of related features that can + * be installed in MCT. + * @class + * @implements {Installable} + * @param {Metadata} metadata metadata about this bundle + */ +function Bundle(metadata) { + this.metadata = metadata; +} + +Bundle.prototype.service +Bundle.prototype.install = function (mct) {}; + +/** + * Data about a given entity within the system. + * @typedef Metadata + * @property {string} name the human-readable name of the entity + * @property {string} key the machine-readable identifier for the entity + * @property {string} description a human-readable summary of the entity + */ + + +[Dependency | + get() : T +] + +[Registry | + register( + dependencies : Dependency[], + factory : Function + ) +] + +[ExtensionRegistry | +] + +[ExtensionRegistry] + +``` + +Creating a bundle then looks like: + +```javascript +define([ + 'mct', + './SomeExtension', + './SomeService' +], function (mct, SomeExtension, SomeService) { + var plugin = new mct.Bundle({ + key: 'myBundle', + name: "My bundle", + description: "A bundle that I made." + }); + + plugin.extension + + return plugin; +}); + +``` From 61a272b2577925d10ac9676debc7b357865d8673 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 30 Sep 2015 13:59:53 -0700 Subject: [PATCH 20/98] [API Redesign] Add note about Web Workers Add note about RequireJS as a dependency injector facilitating use from web workers, as noted in comments to nasa/openmctweb#141 --- docs/src/design/proposals/APIRedesign.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 3f07a65723..06810aa88d 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -426,6 +426,8 @@ which can help with this, however. * Improves useability of documentation (`typeService` is an instance of `CompositeService` and implements `TypeService` so you can easily traverse links in the JSDoc.) +* Can be used more easily from Web Workers, allowing services + to be used on background threads trivially. ### Detriments From 4e8101ba0bb48f5a92f99ea775bc447c2cfbaf27 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 2 Nov 2015 12:52:31 -0800 Subject: [PATCH 21/98] [API Redesign] Add note about telemetry metadata --- docs/src/design/proposals/APIRedesign.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 06810aa88d..aded73f33d 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -928,6 +928,8 @@ Should also consider: * Merge `subscribe` functionality into `request`; that is, handle real-time data as just another thing that triggers the `request` callback. +* Add a useful API to telemetry metadata, allowing things like + formats to be retrieved directly from there. As a consequence of this, `request` would need to return an object representing the active request. This would need to be able to From 4f001f0b5d32c2360b1e91773ed89a7e9cc07cf9 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 9 Nov 2015 14:35:51 -0800 Subject: [PATCH 22/98] [API] Propose declaring plugins as Angular modules --- docs/src/design/proposals/APIRedesign.md | 44 ++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index aded73f33d..09d70bd1b0 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -1004,3 +1004,47 @@ To address this: * May result in harder-to-understand errors when overridden composition strategies do not failover well (that is, when they do need at least implementation, but fail to check for this.) + +## Plugins as Angular Modules + +Do away with the notion of bundles entirely; use Angular modules +instead. Registering extensions or components of composite services +would then be handled by configuring a provider; reusable classes +could be exposed by the platform for these. + +Example (details are flexible, included for illustrative purposes): + +```javascript +var mctEdit = angular.module('mct-edit', ['ng', 'mct']); + +// Expose a new extension category +mctEdit.provider('actionRegistry', ExtensionCategoryProvider); + +// Expose a new extension +mctEdit.config(['actionRegistryProvider', function (arp) { + arp.register(EditPropertiesAction); +}]) + +return mctEdit; +``` + +Incompatible with proposal to +(expose no third-party APIs)[#expose-no-third-party-apis]; Angular +API would be ubiquitously exposed. + +### Benefits + +* Removes a whole category of API (bundle definitions), reducing + learning curve associated with the software. +* Closer to Angular style, reducing disconnect between learning + Angular and learning Open MCT Web (reducing burden of having + to learn multiple paradigms.) +* Clarifies "what can be found where" (albeit not perfectly) + since you can look to module dependencies and follow back from there. + +### Detriments + +* Hardens dependency on Angular. +* Increases depth of understanding required of Angular. +* Increases amount of boilerplate (since a lot of this has + been short-handed by existing framework layer.) From 0fa6cbfc18d202bb5597fec78997ab5abd0518a1 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 19 Nov 2015 13:02:03 -0800 Subject: [PATCH 23/98] [API] Propose contextual DI --- docs/src/design/proposals/APIRedesign.md | 83 ++++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 09d70bd1b0..6208b770e6 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -1032,6 +1032,9 @@ Incompatible with proposal to (expose no third-party APIs)[#expose-no-third-party-apis]; Angular API would be ubiquitously exposed. +This is a more specific variant of +(Bundle Declarations in JavaScript)[#bundle-declarations-in-javascript]. + ### Benefits * Removes a whole category of API (bundle definitions), reducing @@ -1048,3 +1051,83 @@ API would be ubiquitously exposed. * Increases depth of understanding required of Angular. * Increases amount of boilerplate (since a lot of this has been short-handed by existing framework layer.) + +## Contextual Injection + +For extensions that depend on certain instance-level run-time +properties (e.g. actions or views which use objects and/or specific +capabilities of those objects), declare these features as dependencies +and expose them via dependency injection. (AngularJS does this for +`$scope` in the context of controllers, for example.) + +A sketch of an implementation for this might look like: + +```js +function ExtensionRegistry($injector, extensions, getLocals) { + this.$injector = $injector; + this.extensions = extensions; + this.getLocals = getLocals; +} +ExtensionRegistry.prototype.get = function () { + var $injector = this.$injector, + locals = this.getLocals.apply(null, arguments); + return this.extensions.filter(function (extension) { + return depsSatisfiable(extension, $injector, locals); + }).map(function (extension) { + return $injector.instantiate(extension, locals); + }); +}; + + +function ExtensionRegistryProvider(getLocals) { + this.getLocals = getLocals || function () { return {}; }; + this.extensions = []; +} +ExtensionRegistryProvider.prototype.register = function (extension) { + this.extensions.push(extension); +}; +ExtensionRegistryProvider.prototype.$get = ['$injector', function ($injector) { + return new ExtensionRegistry($injector, this.extensions, this.getLocals); +}]; +``` + +Extension registries which need to behave context-sensitively could +subclass this to describe how these contextual dependencies are satisfied +(for instance, by returning various capability properties in `getLocals`). + +Specific extensions could then declare dependencies as appropriate to the +registry they are using: + +```js +app.config(['actionRegistryProvider', function (arp) { + arp.register(['contextCapability', 'domainObject', RemoveAction]); +}]); +``` + +### Benefits + +* Allows contextual dependencies to be fulfilled in the same (or similar) + manner as global dependencies, increasing overall consistency of API. +* Clarifies dependencies of individual extensions (currently, extensions + themselves or policies generally need to imperatively describe what + dependencies will be used in order to filter down to applicable + extensions.) +* Factors out some redundant code from relevant extensions; actions, + for instance, no longer need to interpret an `ActionContext` object. + Instead, their constructors take inputs that are more relevant to + their behavior. +* Removes need for partial construction, as any arguments which would + normally be appended after partialization can instead be declared as + dependencies. Constructors in general become much less bound to the + specifics of the platform. + +### Detriments + +* Slightly increases dependency on Angular; other dependency injectors + may not offer comparable ways to specificy dependencies non-globally. +* Not clear (or will take effort to make clear) which dependencies are + available for which extensions. Could be mitigated by standardizing + descriptions of context across actions and views, but that may offer + its own difficulties. +* May seem counter-intuitive coming from "vanilla" AngularJS, where + `$scope` is the only commonly-used context-sensitive dependency. From 405daf36b2b0e1ec928c58614b7a0bdf1fd5cecf Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 25 Nov 2015 12:45:22 -0800 Subject: [PATCH 24/98] [API] Add proposals about actions --- docs/src/design/proposals/APIRedesign.md | 48 ++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/docs/src/design/proposals/APIRedesign.md b/docs/src/design/proposals/APIRedesign.md index 6208b770e6..5d3e541bb0 100644 --- a/docs/src/design/proposals/APIRedesign.md +++ b/docs/src/design/proposals/APIRedesign.md @@ -1131,3 +1131,51 @@ app.config(['actionRegistryProvider', function (arp) { its own difficulties. * May seem counter-intuitive coming from "vanilla" AngularJS, where `$scope` is the only commonly-used context-sensitive dependency. + +## Add new abstractions for actions + +Originally suggested in +[this comment](https://github.com/nasa/openmctweb/pull/69#issuecomment-156199991): + +> I think there are some grey areas with actions: are they all directly +tied to user input? If so, why do they have any meaning in the back end? +Maybe we should look at different abstractions for actions: + +> * `actions` - the basic implementation of an action, essentially a + function declaration. for example, `copy` requires arguments of + `object` and a `target` to place the object in. at this level, + it is reusable in a CLI. +> * `context menu actions` - has criteria for what it applies to. + when it is visible, and defines how to get extra > input from a + user to complete that action. UI concern only. +> * `gesture-handler` - allows for mapping a `gesture` to an action, + e.g. drag and drop for link. UI Concern only. + +> We could add context menu actions for domain objects which navigate +to that object, without having to implement an action that has no real +usage on a command line / backend. + +### Benefits + +* Clearly delineates concerns (UI versus model) + +### Detriments + +* Increases number of interfaces. + +## Add gesture handlers + +See [Add new abstractions for actions](#add-new-abstractions-for-actions); +adding an intermediary between gestures and the actions that they +trigger could be useful in separating concerns, and for more easily +changing mappings in a mobile context. + +### Benefits + +* Clearly decouples UI concerns from the underlying model changes + they initiate. +* Simplifies and clarifies mobile support. + +### Detriments + +* Increases number of interfaces. From 33c372765f15a5c8dc9e8e9c40f4d4a555fd44e6 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Mon, 7 Dec 2015 12:33:29 -0800 Subject: [PATCH 25/98] [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 26/98] [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 27/98] [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 28/98] [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 e32feb29e22a337472a7795604219a2dbb9d6042 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 8 Dec 2015 15:41:33 -0800 Subject: [PATCH 29/98] [Duplicate] Rewrite identifiers in clones Traverse object models of clones and rewrite domain object identifiers that have changed during duplication. Addresses https://github.com/nasa/openmctweb/issues/332 --- .../entanglement/src/services/CopyTask.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/platform/entanglement/src/services/CopyTask.js b/platform/entanglement/src/services/CopyTask.js index d20c233b42..08bced4db8 100644 --- a/platform/entanglement/src/services/CopyTask.js +++ b/platform/entanglement/src/services/CopyTask.js @@ -45,6 +45,7 @@ define( this.policyService = policyService; this.persisted = 0; this.clones = []; + this.idMap = {}; } function composeChild(child, parent, setLocation) { @@ -104,6 +105,40 @@ define( .then(function(){return self.firstClone;}); } + /** + * Update identifiers in a cloned object model (or part of + * a cloned object model) to reflect new identifiers after + * copying. + * @private + */ + CopyTask.prototype.rewriteIdentifiers = function (obj) { + var idMap = this.idMap; + + if (Array.isArray(obj)) { + obj.forEach(function (value, index) { + obj[index] = idMap[value] || value; + this.rewriteIdentifiers(obj[index]); + }, this); + } else if (obj && typeof obj === 'object') { + Object.keys(obj).forEach(function (key) { + var value = obj[key]; + obj[key] = idMap[value] || value; + if (idMap[key]) { + delete obj[key]; + obj[idMap[key]] = value; + } + this.rewriteIdentifiers(value); + }, this); + } + }; + + function rewriteIdentifiersInClones(self) { + self.clones.forEach(function (clone) { + self.rewriteIdentifiers(clone.getModel()); + }); + return self; + } + /** * Given an array of objects composed by a parent, clone them, then * add them to the parent. @@ -153,6 +188,9 @@ define( // space is used. clone = this.parent.useCapability("instantiation", cloneObjectModel(originalObject.getModel())); + // Record ID mappings so we can rewrite properties later + self.idMap[originalObject.getId()] = clone.getId(); + //Iterate through child tree return this.$q.when(originalObject.useCapability('composition')).then(function(composees){ self.deferred.notify({phase: "preparing"}); @@ -207,6 +245,7 @@ define( this.deferred = this.$q.defer(); this.buildCopyPlan() + .then(rewriteIdentifiersInClones) .then(persistObjects) .then(addClonesToParent) .then(this.deferred.resolve, this.deferred.reject); From 46f9b31cff6a340441ee38006c61b713a9dfc1e0 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 8 Dec 2015 16:27:46 -0800 Subject: [PATCH 30/98] [Duplicate] Test rewriting of identifiers --- .../test/services/CopyTaskSpec.js | 187 ++++++++++++++++++ platform/entanglement/test/suite.json | 1 + 2 files changed, 188 insertions(+) create mode 100644 platform/entanglement/test/services/CopyTaskSpec.js diff --git a/platform/entanglement/test/services/CopyTaskSpec.js b/platform/entanglement/test/services/CopyTaskSpec.js new file mode 100644 index 0000000000..303958d2c3 --- /dev/null +++ b/platform/entanglement/test/services/CopyTaskSpec.js @@ -0,0 +1,187 @@ +/***************************************************************************** + * 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,describe,beforeEach,it,jasmine,expect,spyOn */ + +define( + [ + '../../src/services/CopyTask', + '../DomainObjectFactory' + ], + function (CopyTask, domainObjectFactory) { + 'use strict'; + + var ID_A = "some-string-with-vaguely-uuidish-uniqueness", + ID_B = "some-other-similarly-unique-string"; + + function synchronousPromise(value) { + return (value && value.then) ? value : { + then: function (callback) { + return synchronousPromise(callback(value)); + } + }; + } + + describe("CopyTask", function () { + var mockDomainObject, + mockParentObject, + mockPolicyService, + mockQ, + mockDeferred, + testModel, + mockCallback, + counter, + cloneIds, + task; + + function makeMockCapabilities(childIds) { + var mockCapabilities = { + persistence: jasmine.createSpyObj( + 'persistence', + ['persist'] + ), + composition: jasmine.createSpyObj( + 'composition', + ['add', 'invoke'] + ), + instantiation: jasmine.createSpyObj( + 'instantiation', + ['instantiate', 'invoke'] + ) + }, + mockChildren = (childIds || []).map(function (id) { + return domainObjectFactory({ + id: id, + capabilities: makeMockCapabilities([]), + model: { originalId: id } + }); + }); + + mockCapabilities.persistence.persist + .andReturn(synchronousPromise(true)); + mockCapabilities.composition.add.andCallFake(function (obj) { + return synchronousPromise(obj); + }); + mockCapabilities.composition.invoke + .andReturn(synchronousPromise(mockChildren)); + mockCapabilities.instantiation.invoke + .andCallFake(function (model) { + var id = "some-id-" + counter; + cloneIds[model.originalId] = id; + counter += 1; + return domainObjectFactory({ + id: id, + model: model, + capabilities: makeMockCapabilities() + }); + }); + + return mockCapabilities; + } + + beforeEach(function () { + counter = 0; + cloneIds = {}; + + testModel = { + composition: [ ID_A, ID_B ], + someObj: {}, + someArr: [ ID_A, ID_B ] + }; + testModel.someObj[ID_A] = "some value"; + testModel.someObj.someProperty = ID_B; + + mockDomainObject = domainObjectFactory({ + capabilities: makeMockCapabilities(testModel.composition), + model: testModel + }); + mockParentObject = domainObjectFactory({ + capabilities: makeMockCapabilities() + }); + mockPolicyService = jasmine.createSpyObj( + 'policyService', + [ 'allow' ] + ); + mockQ = jasmine.createSpyObj('$q', ['when', 'defer', 'all']); + mockDeferred = jasmine.createSpyObj( + 'deferred', + [ 'notify', 'resolve', 'reject' ] + ); + + mockPolicyService.allow.andReturn(true); + + mockQ.when.andCallFake(synchronousPromise); + mockQ.defer.andReturn(mockDeferred); + mockQ.all.andCallFake(function (promises) { + return synchronousPromise(promises.map(function (promise) { + var value; + promise.then(function (v) { value = v; }); + return value; + })); + }); + + mockDeferred.resolve.andCallFake(function (value) { + mockDeferred.promise = synchronousPromise(value); + }); + + task = new CopyTask( + mockDomainObject, + mockParentObject, + mockPolicyService, + mockQ + ); + }); + + + describe("produces models which", function () { + var model; + + beforeEach(function () { + task.perform().then(function (clone) { + model = clone.getModel(); + }); + }); + + it("contain rewritten identifiers in arrays", function () { + expect(model.someArr) + .toEqual(testModel.someArr.map(function (id) { + return cloneIds[id]; + })); + }); + + it("contain rewritten identifiers in properties", function () { + expect(model.someObj.someProperty) + .toEqual(cloneIds[testModel.someObj.someProperty]); + }); + + + it("contain rewritten identifiers in property names", function () { + expect(model.someObj[cloneIds[ID_A]]) + .toEqual(testModel.someObj[ID_A]); + }); + }); + + }); + + + } +); \ No newline at end of file diff --git a/platform/entanglement/test/suite.json b/platform/entanglement/test/suite.json index 243da94c39..223e473629 100644 --- a/platform/entanglement/test/suite.json +++ b/platform/entanglement/test/suite.json @@ -7,6 +7,7 @@ "actions/SetPrimaryLocationAction", "policies/CrossSpacePolicy", "services/CopyService", + "services/CopyTask", "services/LinkService", "services/MoveService", "services/LocationService", From 19f07aa398e93a32efa937b07b7293d245c4c676 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Tue, 8 Dec 2015 16:34:36 -0800 Subject: [PATCH 31/98] [Duplicate] Add trailing newline --- platform/entanglement/test/services/CopyTaskSpec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/entanglement/test/services/CopyTaskSpec.js b/platform/entanglement/test/services/CopyTaskSpec.js index 303958d2c3..e5a2c57f2b 100644 --- a/platform/entanglement/test/services/CopyTaskSpec.js +++ b/platform/entanglement/test/services/CopyTaskSpec.js @@ -184,4 +184,4 @@ define( } -); \ No newline at end of file +); From e30a82432d8e994fac3b23b9f1835f4e7894b69e Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 9 Dec 2015 12:17:32 -0800 Subject: [PATCH 32/98] [Clocks/Timers] Update code style for actions https://github.com/nasa/openmctweb/issues/209 --- .../src/actions/AbstractStartTimerAction.js | 25 ++++++++++++------- .../clock/src/actions/RestartTimerAction.js | 17 +++++++++++-- .../clock/src/actions/StartTimerAction.js | 16 ++++++++++-- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/platform/features/clock/src/actions/AbstractStartTimerAction.js b/platform/features/clock/src/actions/AbstractStartTimerAction.js index 8c1554965c..116a5e51f4 100644 --- a/platform/features/clock/src/actions/AbstractStartTimerAction.js +++ b/platform/features/clock/src/actions/AbstractStartTimerAction.js @@ -35,10 +35,21 @@ define( * Both "Start" and "Restart" share this implementation, but * control their visibility with different `appliesTo` behavior. * - * @implements Action + * @implements {Action} + * @memberof platform/features/clock + * @constructor + * @param {Function} now a function which returns the current + * time (typically wrapping `Date.now`) + * @param {ActionContext} context the context for this action */ function AbstractStartTimerAction(now, context) { - var domainObject = context.domainObject; + this.domainObject = context.domainObject; + this.now = now; + } + + AbstractStartTimerAction.prototype.perform = function () { + var domainObject = this.domainObject, + now = this.now; function doPersist() { var persistence = domainObject.getCapability('persistence'); @@ -49,13 +60,9 @@ define( model.timestamp = now(); } - return { - perform: function () { - return domainObject.useCapability('mutation', setTimestamp) - .then(doPersist); - } - }; - } + return domainObject.useCapability('mutation', setTimestamp) + .then(doPersist); + }; return AbstractStartTimerAction; } diff --git a/platform/features/clock/src/actions/RestartTimerAction.js b/platform/features/clock/src/actions/RestartTimerAction.js index 8c8a942281..ae490df99d 100644 --- a/platform/features/clock/src/actions/RestartTimerAction.js +++ b/platform/features/clock/src/actions/RestartTimerAction.js @@ -31,12 +31,25 @@ define( * * Behaves the same as (and delegates functionality to) * the "Start" action. - * @implements Action + * + * @extends {platform/features/clock.AbstractTimerAction} + * @implements {Action} + * @memberof platform/features/clock + * @constructor + * @param {Function} now a function which returns the current + * time (typically wrapping `Date.now`) + * @param {ActionContext} context the context for this action */ function RestartTimerAction(now, context) { - return new AbstractStartTimerAction(now, context); + AbstractStartTimerAction.prototype.apply( + this, + [ now, context ] + ); } + RestartTimerAction.prototype = + Object.create(AbstractStartTimerAction.prototype); + RestartTimerAction.appliesTo = function (context) { var model = (context.domainObject && context.domainObject.getModel()) diff --git a/platform/features/clock/src/actions/StartTimerAction.js b/platform/features/clock/src/actions/StartTimerAction.js index d7237c75e4..fb433608c3 100644 --- a/platform/features/clock/src/actions/StartTimerAction.js +++ b/platform/features/clock/src/actions/StartTimerAction.js @@ -32,12 +32,24 @@ define( * Sets the reference timestamp in a timer to the current * time, such that it begins counting up. * - * @implements Action + * @extends {platform/features/clock.AbstractTimerAction} + * @implements {Action} + * @memberof platform/features/clock + * @constructor + * @param {Function} now a function which returns the current + * time (typically wrapping `Date.now`) + * @param {ActionContext} context the context for this action */ function StartTimerAction(now, context) { - return new AbstractStartTimerAction(now, context); + AbstractStartTimerAction.prototype.apply( + this, + [ now, context ] + ); } + StartTimerAction.prototype = + Object.create(AbstractStartTimerAction.prototype); + StartTimerAction.appliesTo = function (context) { var model = (context.domainObject && context.domainObject.getModel()) From 27fa56d838bf553eb666d5d9c2a5ecf3353134cc Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 9 Dec 2015 12:33:11 -0800 Subject: [PATCH 33/98] [Clocks/Timers] Update code style for controllers --- .../clock/src/controllers/ClockController.js | 68 +++++----- .../src/controllers/RefreshingController.js | 6 + .../clock/src/controllers/TimerController.js | 120 ++++++++++-------- .../clock/src/controllers/TimerFormatter.js | 64 +++++----- 4 files changed, 136 insertions(+), 122 deletions(-) diff --git a/platform/features/clock/src/controllers/ClockController.js b/platform/features/clock/src/controllers/ClockController.js index eba2a07e27..387c8d44ad 100644 --- a/platform/features/clock/src/controllers/ClockController.js +++ b/platform/features/clock/src/controllers/ClockController.js @@ -30,19 +30,21 @@ define( * Controller for views of a Clock domain object. * * @constructor + * @memberof platform/features/clock + * @param {angular.Scope} $scope the Angular scope + * @param {platform/features/clock.TickerService} tickerService + * a service used to align behavior with clock ticks */ function ClockController($scope, tickerService) { - var text, - ampm, - use24, - lastTimestamp, + var lastTimestamp, unlisten, - timeFormat; + timeFormat, + self = this; function update() { var m = moment.utc(lastTimestamp); - text = timeFormat && m.format(timeFormat); - ampm = m.format("A"); // Just the AM or PM part + self.textValue = timeFormat && m.format(timeFormat); + self.ampmValue = m.format("A"); // Just the AM or PM part } function tick(timestamp) { @@ -56,8 +58,8 @@ define( if (clockFormat !== undefined) { baseFormat = clockFormat[0]; - use24 = clockFormat[1] === 'clock24'; - timeFormat = use24 ? + self.use24 = clockFormat[1] === 'clock24'; + timeFormat = self.use24 ? baseFormat.replace('hh', "HH") : baseFormat; update(); @@ -69,32 +71,32 @@ define( // Listen for clock ticks ... and stop listening on destroy unlisten = tickerService.listen(tick); $scope.$on('$destroy', unlisten); - - return { - /** - * Get the clock's time zone, as displayable text. - * @returns {string} - */ - zone: function () { - return "UTC"; - }, - /** - * Get the current time, as displayable text. - * @returns {string} - */ - text: function () { - return text; - }, - /** - * Get the text to display to qualify a time as AM or PM. - * @returns {string} - */ - ampm: function () { - return use24 ? '' : ampm; - } - }; } + /** + * Get the clock's time zone, as displayable text. + * @returns {string} + */ + ClockController.prototype.zone = function () { + return "UTC"; + }; + + /** + * Get the current time, as displayable text. + * @returns {string} + */ + ClockController.prototype.text = function () { + return this.textValue; + }; + + /** + * Get the text to display to qualify a time as AM or PM. + * @returns {string} + */ + ClockController.prototype.ampm = function () { + return this.use24 ? '' : this.ampmValue; + }; + return ClockController; } ); diff --git a/platform/features/clock/src/controllers/RefreshingController.js b/platform/features/clock/src/controllers/RefreshingController.js index 4853da0f57..30d4d7841e 100644 --- a/platform/features/clock/src/controllers/RefreshingController.js +++ b/platform/features/clock/src/controllers/RefreshingController.js @@ -31,6 +31,12 @@ define( * * This is a short-term workaround to assure Timer views stay * up-to-date; should be replaced by a global auto-refresh. + * + * @constructor + * @memberof platform/features/clock + * @param {angular.Scope} $scope the Angular scope + * @param {platform/features/clock.TickerService} tickerService + * a service used to align behavior with clock ticks */ function RefreshingController($scope, tickerService) { var unlisten; diff --git a/platform/features/clock/src/controllers/TimerController.js b/platform/features/clock/src/controllers/TimerController.js index 6bde70dd29..79d52e8bfe 100644 --- a/platform/features/clock/src/controllers/TimerController.js +++ b/platform/features/clock/src/controllers/TimerController.js @@ -33,26 +33,30 @@ define( * Controller for views of a Timer domain object. * * @constructor + * @memberof platform/features/clock + * @param {angular.Scope} $scope the Angular scope + * @param $window Angular-provided window object + * @param {Function} now a function which returns the current + * time (typically wrapping `Date.now`) */ function TimerController($scope, $window, now) { var timerObject, - relevantAction, - sign = '', - text = '', formatter, active = true, relativeTimestamp, - lastTimestamp; + lastTimestamp, + self = this; function update() { var timeDelta = lastTimestamp - relativeTimestamp; if (formatter && !isNaN(timeDelta)) { - text = formatter(timeDelta); - sign = timeDelta < 0 ? "-" : timeDelta >= 1000 ? "+" : ""; + self.textValue = formatter(timeDelta); + self.signValue = timeDelta < 0 ? "-" : + timeDelta >= 1000 ? "+" : ""; } else { - text = ""; - sign = ""; + self.textValue = ""; + self.signValue = ""; } } @@ -75,7 +79,7 @@ define( updateFormat(formatKey); updateTimestamp(timestamp); - relevantAction = actionCapability && + self.relevantAction = actionCapability && actionCapability.getActions(actionKey)[0]; update(); @@ -92,13 +96,14 @@ define( } function tick() { - var lastSign = sign, lastText = text; + var lastSign = self.signValue, + lastText = self.textValue; lastTimestamp = now(); update(); // We're running in an animation frame, not in a digest cycle. // We need to trigger a digest cycle if our displayable data // changes. - if (lastSign !== sign || lastText !== text) { + if (lastSign !== self.signValue || lastText !== self.textValue) { $scope.$apply(); } if (active) { @@ -117,51 +122,58 @@ define( active = false; }); - return { - /** - * Get the glyph to display for the start/restart button. - * @returns {string} glyph to display - */ - buttonGlyph: function () { - return relevantAction ? - relevantAction.getMetadata().glyph : ""; - }, - /** - * Get the text to show for the start/restart button - * (e.g. in a tooltip) - * @returns {string} name of the action - */ - buttonText: function () { - return relevantAction ? - relevantAction.getMetadata().name : ""; - }, - /** - * Perform the action associated with the start/restart button. - */ - clickButton: function () { - if (relevantAction) { - relevantAction.perform(); - updateObject($scope.domainObject); - } - }, - /** - * Get the sign (+ or -) of the current timer value, as - * displayable text. - * @returns {string} sign of the current timer value - */ - sign: function () { - return sign; - }, - /** - * Get the text to display for the current timer value. - * @returns {string} current timer value - */ - text: function () { - return text; - } - }; + this.signValue = ''; + this.textValue = ''; + this.updateObject = updateObject; } + /** + * Get the glyph to display for the start/restart button. + * @returns {string} glyph to display + */ + TimerController.prototype.buttonGlyph = function () { + return this.relevantAction ? + this.relevantAction.getMetadata().glyph : ""; + }; + + /** + * Get the text to show for the start/restart button + * (e.g. in a tooltip) + * @returns {string} name of the action + */ + TimerController.prototype.buttonText = function () { + return this.relevantAction ? + this.relevantAction.getMetadata().name : ""; + }; + + + /** + * Perform the action associated with the start/restart button. + */ + TimerController.prototype.clickButton = function () { + if (this.relevantAction) { + this.relevantAction.perform(); + this.updateObject(this.$scope.domainObject); + } + }; + + /** + * Get the sign (+ or -) of the current timer value, as + * displayable text. + * @returns {string} sign of the current timer value + */ + TimerController.prototype.sign = function () { + return this.signValue; + }; + + /** + * Get the text to display for the current timer value. + * @returns {string} current timer value + */ + TimerController.prototype.text = function () { + return this.textValue; + }; + return TimerController; } ); diff --git a/platform/features/clock/src/controllers/TimerFormatter.js b/platform/features/clock/src/controllers/TimerFormatter.js index bea92b38f4..e9ebb79a6b 100644 --- a/platform/features/clock/src/controllers/TimerFormatter.js +++ b/platform/features/clock/src/controllers/TimerFormatter.js @@ -37,45 +37,39 @@ define( * supports `TimerController`. * * @constructor + * @memberof platform/features/clock */ function TimerFormatter() { - - // Round this timestamp down to the second boundary - // (e.g. 1124ms goes down to 1000ms, -2400ms goes down to -3000ms) - function toWholeSeconds(duration) { - return Math.abs(Math.floor(duration / 1000) * 1000); - } - - // Short-form format, e.g. 02:22:11 - function short(duration) { - return moment.duration(toWholeSeconds(duration), 'ms') - .format(SHORT_FORMAT, { trim: false }); - } - - // Long-form format, e.g. 3d 02:22:11 - function long(duration) { - return moment.duration(toWholeSeconds(duration), 'ms') - .format(LONG_FORMAT, { trim: false }); - } - - return { - /** - * Format a duration for display, using the short form. - * (e.g. 03:33:11) - * @param {number} duration the duration, in milliseconds - * @param {boolean} sign true if positive - */ - short: short, - /** - * Format a duration for display, using the long form. - * (e.g. 0d 03:33:11) - * @param {number} duration the duration, in milliseconds - * @param {boolean} sign true if positive - */ - long: long - }; } + // Round this timestamp down to the second boundary + // (e.g. 1124ms goes down to 1000ms, -2400ms goes down to -3000ms) + function toWholeSeconds(duration) { + return Math.abs(Math.floor(duration / 1000) * 1000); + } + + /** + * Format a duration for display, using the short form. + * (e.g. 03:33:11) + * @param {number} duration the duration, in milliseconds + * @param {boolean} sign true if positive + */ + TimerFormatter.prototype.short = function (duration) { + return moment.duration(toWholeSeconds(duration), 'ms') + .format(SHORT_FORMAT, { trim: false }); + }; + + /** + * Format a duration for display, using the long form. + * (e.g. 0d 03:33:11) + * @param {number} duration the duration, in milliseconds + * @param {boolean} sign true if positive + */ + TimerFormatter.prototype.long = function (duration) { + return moment.duration(toWholeSeconds(duration), 'ms') + .format(LONG_FORMAT, { trim: false }); + }; + return TimerFormatter; } ); From 714ae3b9dcd3c253d3053bec8c7bf763f6a4a4b5 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 9 Dec 2015 12:39:01 -0800 Subject: [PATCH 34/98] [Clocks/Timers] Update remaining classes Complete code style changes for Clocks/Timers. --- .../clock/src/indicators/ClockIndicator.js | 48 ++++++++------ .../clock/src/services/TickerService.js | 64 +++++++++---------- 2 files changed, 60 insertions(+), 52 deletions(-) diff --git a/platform/features/clock/src/indicators/ClockIndicator.js b/platform/features/clock/src/indicators/ClockIndicator.js index 194e22067c..11e5c0fca5 100644 --- a/platform/features/clock/src/indicators/ClockIndicator.js +++ b/platform/features/clock/src/indicators/ClockIndicator.js @@ -28,32 +28,40 @@ define( /** * Indicator that displays the current UTC time in the status area. - * @implements Indicator + * @implements {Indicator} + * @memberof platform/features/clock + * @param {platform/features/clock.TickerService} tickerService + * a service used to align behavior with clock ticks + * @param {string} indicatorFormat format string for timestamps + * shown in this indicator */ - function ClockIndicator(tickerService, CLOCK_INDICATOR_FORMAT) { - var text = ""; + function ClockIndicator(tickerService, indicatorFormat) { + var self = this; + + this.text = ""; tickerService.listen(function (timestamp) { - text = moment.utc(timestamp).format(CLOCK_INDICATOR_FORMAT) + " UTC"; + self.text = moment.utc(timestamp) + .format(indicatorFormat) + " UTC"; }); - - return { - getGlyph: function () { - return "C"; - }, - getGlyphClass: function () { - return ""; - }, - getText: function () { - return text; - }, - getDescription: function () { - return ""; - } - }; - } + ClockIndicator.prototype.getGlyph = function () { + return "C"; + }; + + ClockIndicator.prototype.getGlyphClass = function () { + return ""; + }; + + ClockIndicator.prototype.getText = function () { + return this.text; + }; + + ClockIndicator.prototype.getDescription = function () { + return ""; + }; + return ClockIndicator; } ); diff --git a/platform/features/clock/src/services/TickerService.js b/platform/features/clock/src/services/TickerService.js index 4da85133fc..371c9a010e 100644 --- a/platform/features/clock/src/services/TickerService.js +++ b/platform/features/clock/src/services/TickerService.js @@ -30,23 +30,23 @@ define( * Calls functions every second, as close to the actual second * tick as is feasible. * @constructor + * @memberof platform/features/clock * @param $timeout Angular's $timeout * @param {Function} now function to provide the current time in ms */ function TickerService($timeout, now) { - var callbacks = [], - last = now() - 1000; + var self = this; function tick() { var timestamp = now(), millis = timestamp % 1000; // Only update callbacks if a second has actually passed. - if (timestamp >= last + 1000) { - callbacks.forEach(function (callback) { + if (timestamp >= self.last + 1000) { + self.callbacks.forEach(function (callback) { callback(timestamp); }); - last = timestamp - millis; + self.last = timestamp - millis; } // Try to update at exactly the next second @@ -55,35 +55,35 @@ define( tick(); - return { - /** - * Listen for clock ticks. The provided callback will - * be invoked with the current timestamp (in milliseconds - * since Jan 1 1970) at regular intervals, as near to the - * second boundary as possible. - * - * @method listen - * @name TickerService#listen - * @param {Function} callback callback to invoke - * @returns {Function} a function to unregister this listener - */ - listen: function (callback) { - callbacks.push(callback); - - // Provide immediate feedback - callback(last); - - // Provide a deregistration function - return function () { - callbacks = callbacks.filter(function (cb) { - return cb !== callback; - }); - }; - } - }; - + this.callbacks = []; + this.last = now() - 1000; } + /** + * Listen for clock ticks. The provided callback will + * be invoked with the current timestamp (in milliseconds + * since Jan 1 1970) at regular intervals, as near to the + * second boundary as possible. + * + * @param {Function} callback callback to invoke + * @returns {Function} a function to unregister this listener + */ + TickerService.prototype.listen = function (callback) { + var self = this; + + self.callbacks.push(callback); + + // Provide immediate feedback + callback(this.last); + + // Provide a deregistration function + return function () { + self.callbacks = self.callbacks.filter(function (cb) { + return cb !== callback; + }); + }; + }; + return TickerService; } ); From 7871af07c460eca551ec1d35557bd285905adc66 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 9 Dec 2015 12:40:21 -0800 Subject: [PATCH 35/98] [Clocks/Timers] Fix parent constructor invocations --- platform/features/clock/src/actions/RestartTimerAction.js | 5 +---- platform/features/clock/src/actions/StartTimerAction.js | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/platform/features/clock/src/actions/RestartTimerAction.js b/platform/features/clock/src/actions/RestartTimerAction.js index ae490df99d..0c4e0e93f4 100644 --- a/platform/features/clock/src/actions/RestartTimerAction.js +++ b/platform/features/clock/src/actions/RestartTimerAction.js @@ -41,10 +41,7 @@ define( * @param {ActionContext} context the context for this action */ function RestartTimerAction(now, context) { - AbstractStartTimerAction.prototype.apply( - this, - [ now, context ] - ); + AbstractStartTimerAction.apply(this, [ now, context ]); } RestartTimerAction.prototype = diff --git a/platform/features/clock/src/actions/StartTimerAction.js b/platform/features/clock/src/actions/StartTimerAction.js index fb433608c3..f005a9a46e 100644 --- a/platform/features/clock/src/actions/StartTimerAction.js +++ b/platform/features/clock/src/actions/StartTimerAction.js @@ -41,10 +41,7 @@ define( * @param {ActionContext} context the context for this action */ function StartTimerAction(now, context) { - AbstractStartTimerAction.prototype.apply( - this, - [ now, context ] - ); + AbstractStartTimerAction.apply(this, [ now, context ]); } StartTimerAction.prototype = From 8077cdb8340371ac37a8f8eb3947584d64c3c011 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Wed, 9 Dec 2015 12:41:23 -0800 Subject: [PATCH 36/98] [Clocks/Timers] Make $scope available ...to methods of TimerController --- platform/features/clock/src/controllers/TimerController.js | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/features/clock/src/controllers/TimerController.js b/platform/features/clock/src/controllers/TimerController.js index 79d52e8bfe..3f596df673 100644 --- a/platform/features/clock/src/controllers/TimerController.js +++ b/platform/features/clock/src/controllers/TimerController.js @@ -122,6 +122,7 @@ define( active = false; }); + this.$scope = $scope; this.signValue = ''; this.textValue = ''; this.updateObject = updateObject; From de88bf94d43f91f1fac3ae4f34c1cef8440e861b Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Fri, 11 Dec 2015 10:51:16 -0800 Subject: [PATCH 37/98] [Documentation] Fix type declaration Rephrase parameter type to something JSDoc can parse. https://github.com/nasa/openmctweb/issues/411 --- platform/representation/src/TemplatePrefetcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/representation/src/TemplatePrefetcher.js b/platform/representation/src/TemplatePrefetcher.js index 7dc05b052a..e15633694b 100644 --- a/platform/representation/src/TemplatePrefetcher.js +++ b/platform/representation/src/TemplatePrefetcher.js @@ -30,7 +30,7 @@ define( * @param {platform/representation.TemplateLinker} templateLinker * the `templateLinker` service, used to load and cache * template extensions - * @param {...{templateUrl: string}[]} extensions arrays + * @param {...Array.<{templateUrl: string}>} extensions arrays * of template or template-like extensions */ function TemplatePrefetcher(templateLinker, extensions) { From 6200ceddf8c66eeca15a9ac01359d45cea9e96d8 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 11 Dec 2015 09:51:58 -0800 Subject: [PATCH 38/98] [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 39/98] [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 40/98] 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 41/98] [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 42/98] [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 43/98] [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: Mon, 14 Dec 2015 13:55:06 -0800 Subject: [PATCH 44/98] [Frontend] Cherry-picking platform CSS mods for autoflow view warp #1596 open #425 Changes to autoflow styles, particularly in header; Cleanup in effects.scss; CSS to be re-compiled; (cherry picked from commit 5848077) --- .../commonUI/general/res/sass/_autoflow.scss | 15 ++- .../commonUI/general/res/sass/_effects.scss | 4 - .../espresso/res/css/theme-espresso.css | 111 +++++++++++------- .../themes/snow/res/css/theme-snow.css | 111 +++++++++++------- 4 files changed, 139 insertions(+), 102 deletions(-) diff --git a/platform/commonUI/general/res/sass/_autoflow.scss b/platform/commonUI/general/res/sass/_autoflow.scss index 16fe7251f4..f6b5861e2c 100644 --- a/platform/commonUI/general/res/sass/_autoflow.scss +++ b/platform/commonUI/general/res/sass/_autoflow.scss @@ -35,24 +35,23 @@ } } - - .l-autoflow-header { bottom: auto; height: $headerH; line-height: $headerH; - min-width: $colW; - span { - vertical-align: middle; - } + min-width: $colW; + .t-last-update { + overflow: hidden; + } .s-btn.change-column-width { @include trans-prop-nice-fade(500ms); opacity: 0; } .l-filter { - margin-left: $interiorMargin; + display: block; + margin-right: $interiorMargin; input.t-filter-input { - width: 100px; + width: 150px; } } } diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss index d0dbb2659a..61e6c26f2c 100644 --- a/platform/commonUI/general/res/sass/_effects.scss +++ b/platform/commonUI/general/res/sass/_effects.scss @@ -31,10 +31,6 @@ a.disabled { border-bottom: 1px solid rgba(#fff, 0.3); } -.outline { - @include boxOutline(); -} - .test-stripes { @include bgDiagonalStripes(); } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 2493661aa8..7680ae61af 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; } @@ -235,10 +235,6 @@ a.disabled { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* line 34, ../../../../general/res/sass/_effects.scss */ -.outline { - border: 1px solid #666666; } - -/* line 38, ../../../../general/res/sass/_effects.scss */ .test-stripes { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -248,7 +244,7 @@ a.disabled { background-repeat: repeat; background-size: 40px 40px; } -/* line 42, ../../../../general/res/sass/_effects.scss */ +/* line 38, ../../../../general/res/sass/_effects.scss */ .test { background-color: rgba(255, 204, 0, 0.2) !important; } @@ -267,7 +263,7 @@ a.disabled { opacity: 0.5; } 100% { opacity: 1; } } -/* line 69, ../../../../general/res/sass/_effects.scss */ +/* line 65, ../../../../general/res/sass/_effects.scss */ .pulse { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -4224,11 +4220,35 @@ span.req { .t-filter input.t-filter-input { height: 22px; width: 200px; } - /* line 38, ../../../../general/res/sass/forms/_filter.scss */ + /* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input:-moz-placeholder, + .t-filter input.t-filter-input:-moz-placeholder { + color: rgba(204, 204, 204, 0.5); + font-style: italic; + font-weight: 200; } + /* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input::-moz-placeholder, + .t-filter input.t-filter-input::-moz-placeholder { + color: rgba(204, 204, 204, 0.5); + font-style: italic; + font-weight: 200; } + /* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input:-ms-input-placeholder, + .t-filter input.t-filter-input:-ms-input-placeholder { + color: rgba(204, 204, 204, 0.5); + font-style: italic; + font-weight: 200; } + /* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input::-webkit-input-placeholder, + .t-filter input.t-filter-input::-webkit-input-placeholder { + color: rgba(204, 204, 204, 0.5); + font-style: italic; + font-weight: 200; } + /* line 36, ../../../../general/res/sass/forms/_filter.scss */ .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { display: none; } -/* line 42, ../../../../general/res/sass/forms/_filter.scss */ +/* line 40, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .t-filter .icon.ui-symbol, .t-filter .t-item-icon, @@ -4247,7 +4267,7 @@ span.req { line-height: 22px; padding: 0px 5px; vertical-align: middle; } - /* line 50, ../../../../general/res/sass/forms/_filter.scss */ + /* line 48, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .t-filter .icon.ui-symbol:hover, .t-filter .t-item-icon:hover, @@ -4258,7 +4278,7 @@ span.req { .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { background: rgba(255, 255, 255, 0.1); } -/* line 54, ../../../../general/res/sass/forms/_filter.scss */ +/* line 52, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.t-item-icon, @@ -4287,7 +4307,7 @@ span.req { top: 50%; text-align: center; z-index: 5; } - /* line 74, ../../../../general/res/sass/forms/_filter.scss */ + /* line 72, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.t-item-icon:hover, @@ -4298,12 +4318,12 @@ span.req { opacity: 0.6; background-color: #0099cc; } -/* line 82, ../../../../general/res/sass/forms/_filter.scss */ +/* line 80, ../../../../general/res/sass/forms/_filter.scss */ .l-filter { display: inline-block; position: relative; } -/* line 89, ../../../../general/res/sass/forms/_filter.scss */ +/* line 87, ../../../../general/res/sass/forms/_filter.scss */ .top-bar input.filter { font-size: .9em; height: 24px; @@ -4312,7 +4332,7 @@ span.req { padding-left: 10px; padding-right: 10px; vertical-align: top; } -/* line 100, ../../../../general/res/sass/forms/_filter.scss */ +/* line 98, ../../../../general/res/sass/forms/_filter.scss */ .top-bar .icon-filter { font-size: 1.4em; } @@ -7114,16 +7134,16 @@ table { -webkit-transition-delay: 0; transition-delay: 0; opacity: 1; } - /* line 40, ../../../../general/res/sass/_autoflow.scss */ + /* line 38, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header { bottom: auto; height: 22px; line-height: 22px; min-width: 225px; } - /* line 45, ../../../../general/res/sass/_autoflow.scss */ - .autoflow .l-autoflow-header span { - vertical-align: middle; } - /* line 48, ../../../../general/res/sass/_autoflow.scss */ + /* line 43, ../../../../general/res/sass/_autoflow.scss */ + .autoflow .l-autoflow-header .t-last-update { + overflow: hidden; } + /* line 46, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu-btn { -moz-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity, background-color, border-color, color; @@ -7142,19 +7162,20 @@ table { -webkit-transition-delay: 0; transition-delay: 0; opacity: 0; } - /* line 52, ../../../../general/res/sass/_autoflow.scss */ + /* line 50, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .l-filter { - margin-left: 5px; } - /* line 54, ../../../../general/res/sass/_autoflow.scss */ + display: block; + margin-right: 5px; } + /* line 53, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .l-filter input.t-filter-input { - width: 100px; } - /* line 60, ../../../../general/res/sass/_autoflow.scss */ + width: 150px; } + /* line 59, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items { overflow-x: scroll; overflow-y: hidden; top: 32px; white-space: nowrap; } - /* line 66, ../../../../general/res/sass/_autoflow.scss */ + /* line 65, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -7165,7 +7186,7 @@ table { padding-right: 5px; vertical-align: top; width: 225px; } - /* line 76, ../../../../general/res/sass/_autoflow.scss */ + /* line 75, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -7177,37 +7198,37 @@ table { margin-bottom: 1px; margin-top: 1px; position: relative; } - /* line 85, ../../../../general/res/sass/_autoflow.scss */ + /* line 84, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:first-child { border-top: none; } - /* line 88, ../../../../general/res/sass/_autoflow.scss */ + /* line 87, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:hover { background: rgba(255, 255, 255, 0.1); } - /* line 93, ../../../../general/res/sass/_autoflow.scss */ + /* line 92, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l { color: rgba(204, 204, 204, 0.3) !important; font-style: italic; } - /* line 94, ../../../../general/res/sass/_autoflow.scss */ + /* line 93, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r { color: rgba(204, 204, 204, 0.5) !important; font-style: italic; } - /* line 97, ../../../../general/res/sass/_autoflow.scss */ + /* line 96, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r { color: #b3b3b3; } - /* line 101, ../../../../general/res/sass/_autoflow.scss */ + /* line 100, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group { border-top: 1px solid rgba(204, 204, 204, 0.1); } - /* line 104, ../../../../general/res/sass/_autoflow.scss */ + /* line 103, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item { display: block; } - /* line 106, ../../../../general/res/sass/_autoflow.scss */ + /* line 105, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.l { float: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; } - /* line 113, ../../../../general/res/sass/_autoflow.scss */ + /* line 112, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.r { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -7217,7 +7238,7 @@ table { padding-left: 5px; padding-right: 5px; text-align: right; } - /* line 124, ../../../../general/res/sass/_autoflow.scss */ + /* line 123, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col:first-child { border-left: none; padding-left: 0; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0b00551ac4..fe60dc2bf2 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; } @@ -235,10 +235,6 @@ a.disabled { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* line 34, ../../../../general/res/sass/_effects.scss */ -.outline { - border: 1px solid white; } - -/* line 38, ../../../../general/res/sass/_effects.scss */ .test-stripes { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -248,7 +244,7 @@ a.disabled { background-repeat: repeat; background-size: 40px 40px; } -/* line 42, ../../../../general/res/sass/_effects.scss */ +/* line 38, ../../../../general/res/sass/_effects.scss */ .test { background-color: rgba(255, 204, 0, 0.2) !important; } @@ -267,7 +263,7 @@ a.disabled { opacity: 0.5; } 100% { opacity: 1; } } -/* line 69, ../../../../general/res/sass/_effects.scss */ +/* line 65, ../../../../general/res/sass/_effects.scss */ .pulse { -moz-animation-name: pulse; -webkit-animation-name: pulse; @@ -4146,11 +4142,35 @@ span.req { .t-filter input.t-filter-input { height: 22px; width: 200px; } - /* line 38, ../../../../general/res/sass/forms/_filter.scss */ + /* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input:-moz-placeholder, + .t-filter input.t-filter-input:-moz-placeholder { + color: rgba(102, 102, 102, 0.5); + font-style: italic; + font-weight: 200; } + /* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input::-moz-placeholder, + .t-filter input.t-filter-input::-moz-placeholder { + color: rgba(102, 102, 102, 0.5); + font-style: italic; + font-weight: 200; } + /* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input:-ms-input-placeholder, + .t-filter input.t-filter-input:-ms-input-placeholder { + color: rgba(102, 102, 102, 0.5); + font-style: italic; + font-weight: 200; } + /* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ + .filter input.t-filter-input::-webkit-input-placeholder, + .t-filter input.t-filter-input::-webkit-input-placeholder { + color: rgba(102, 102, 102, 0.5); + font-style: italic; + font-weight: 200; } + /* line 36, ../../../../general/res/sass/forms/_filter.scss */ .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { display: none; } -/* line 42, ../../../../general/res/sass/forms/_filter.scss */ +/* line 40, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .t-filter .icon.ui-symbol, .t-filter .t-item-icon, @@ -4169,7 +4189,7 @@ span.req { line-height: 22px; padding: 0px 5px; vertical-align: middle; } - /* line 50, ../../../../general/res/sass/forms/_filter.scss */ + /* line 48, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .t-filter .icon.ui-symbol:hover, .t-filter .t-item-icon:hover, @@ -4180,7 +4200,7 @@ span.req { .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { background: rgba(255, 255, 255, 0.1); } -/* line 54, ../../../../general/res/sass/forms/_filter.scss */ +/* line 52, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.t-item-icon, @@ -4209,7 +4229,7 @@ span.req { top: 50%; text-align: center; z-index: 5; } - /* line 74, ../../../../general/res/sass/forms/_filter.scss */ + /* line 72, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.t-item-icon:hover, @@ -4220,12 +4240,12 @@ span.req { opacity: 0.6; background-color: #0099cc; } -/* line 82, ../../../../general/res/sass/forms/_filter.scss */ +/* line 80, ../../../../general/res/sass/forms/_filter.scss */ .l-filter { display: inline-block; position: relative; } -/* line 89, ../../../../general/res/sass/forms/_filter.scss */ +/* line 87, ../../../../general/res/sass/forms/_filter.scss */ .top-bar input.filter { font-size: .9em; height: 24px; @@ -4234,7 +4254,7 @@ span.req { padding-left: 10px; padding-right: 10px; vertical-align: top; } -/* line 100, ../../../../general/res/sass/forms/_filter.scss */ +/* line 98, ../../../../general/res/sass/forms/_filter.scss */ .top-bar .icon-filter { font-size: 1.4em; } @@ -6991,16 +7011,16 @@ table { -webkit-transition-delay: 0; transition-delay: 0; opacity: 1; } - /* line 40, ../../../../general/res/sass/_autoflow.scss */ + /* line 38, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header { bottom: auto; height: 22px; line-height: 22px; min-width: 225px; } - /* line 45, ../../../../general/res/sass/_autoflow.scss */ - .autoflow .l-autoflow-header span { - vertical-align: middle; } - /* line 48, ../../../../general/res/sass/_autoflow.scss */ + /* line 43, ../../../../general/res/sass/_autoflow.scss */ + .autoflow .l-autoflow-header .t-last-update { + overflow: hidden; } + /* line 46, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu-btn { -moz-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity, background-color, border-color, color; @@ -7019,19 +7039,20 @@ table { -webkit-transition-delay: 0; transition-delay: 0; opacity: 0; } - /* line 52, ../../../../general/res/sass/_autoflow.scss */ + /* line 50, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .l-filter { - margin-left: 5px; } - /* line 54, ../../../../general/res/sass/_autoflow.scss */ + display: block; + margin-right: 5px; } + /* line 53, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-header .l-filter input.t-filter-input { - width: 100px; } - /* line 60, ../../../../general/res/sass/_autoflow.scss */ + width: 150px; } + /* line 59, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items { overflow-x: scroll; overflow-y: hidden; top: 32px; white-space: nowrap; } - /* line 66, ../../../../general/res/sass/_autoflow.scss */ + /* line 65, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -7042,7 +7063,7 @@ table { padding-right: 5px; vertical-align: top; width: 225px; } - /* line 76, ../../../../general/res/sass/_autoflow.scss */ + /* line 75, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -7054,37 +7075,37 @@ table { margin-bottom: 1px; margin-top: 1px; position: relative; } - /* line 85, ../../../../general/res/sass/_autoflow.scss */ + /* line 84, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:first-child { border-top: none; } - /* line 88, ../../../../general/res/sass/_autoflow.scss */ + /* line 87, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:hover { background: rgba(255, 255, 255, 0.1); } - /* line 93, ../../../../general/res/sass/_autoflow.scss */ + /* line 92, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l { color: rgba(51, 51, 51, 0.3) !important; font-style: italic; } - /* line 94, ../../../../general/res/sass/_autoflow.scss */ + /* line 93, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r { color: rgba(51, 51, 51, 0.5) !important; font-style: italic; } - /* line 97, ../../../../general/res/sass/_autoflow.scss */ + /* line 96, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r { color: gray; } - /* line 101, ../../../../general/res/sass/_autoflow.scss */ + /* line 100, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group { border-top: 1px solid rgba(153, 153, 153, 0.2); } - /* line 104, ../../../../general/res/sass/_autoflow.scss */ + /* line 103, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item { display: block; } - /* line 106, ../../../../general/res/sass/_autoflow.scss */ + /* line 105, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.l { float: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; } - /* line 113, ../../../../general/res/sass/_autoflow.scss */ + /* line 112, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.r { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -7094,7 +7115,7 @@ table { padding-left: 5px; padding-right: 5px; text-align: right; } - /* line 124, ../../../../general/res/sass/_autoflow.scss */ + /* line 123, ../../../../general/res/sass/_autoflow.scss */ .autoflow .l-autoflow-items .l-autoflow-col:first-child { border-left: none; padding-left: 0; } From 83a9b984e5a7b30d3b7c91d1fdc9a8f8c63bc3c5 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 14 Dec 2015 15:28:48 -0800 Subject: [PATCH 45/98] [Frontend] Recompile CSS after integration of open1596 open #425 warp#1596 Recompile CSS after integration of cherry-pick from open1596; --- .../espresso/res/css/theme-espresso.css | 40 ++++--------------- .../themes/snow/res/css/theme-snow.css | 40 ++++--------------- 2 files changed, 16 insertions(+), 64 deletions(-) diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 7680ae61af..3d4324fe95 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -4220,35 +4220,11 @@ span.req { .t-filter input.t-filter-input { height: 22px; width: 200px; } - /* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input:-moz-placeholder, - .t-filter input.t-filter-input:-moz-placeholder { - color: rgba(204, 204, 204, 0.5); - font-style: italic; - font-weight: 200; } - /* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input::-moz-placeholder, - .t-filter input.t-filter-input::-moz-placeholder { - color: rgba(204, 204, 204, 0.5); - font-style: italic; - font-weight: 200; } - /* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input:-ms-input-placeholder, - .t-filter input.t-filter-input:-ms-input-placeholder { - color: rgba(204, 204, 204, 0.5); - font-style: italic; - font-weight: 200; } - /* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input::-webkit-input-placeholder, - .t-filter input.t-filter-input::-webkit-input-placeholder { - color: rgba(204, 204, 204, 0.5); - font-style: italic; - font-weight: 200; } - /* line 36, ../../../../general/res/sass/forms/_filter.scss */ + /* line 38, ../../../../general/res/sass/forms/_filter.scss */ .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { display: none; } -/* line 40, ../../../../general/res/sass/forms/_filter.scss */ +/* line 42, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .t-filter .icon.ui-symbol, .t-filter .t-item-icon, @@ -4267,7 +4243,7 @@ span.req { line-height: 22px; padding: 0px 5px; vertical-align: middle; } - /* line 48, ../../../../general/res/sass/forms/_filter.scss */ + /* line 50, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .t-filter .icon.ui-symbol:hover, .t-filter .t-item-icon:hover, @@ -4278,7 +4254,7 @@ span.req { .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { background: rgba(255, 255, 255, 0.1); } -/* line 52, ../../../../general/res/sass/forms/_filter.scss */ +/* line 54, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.t-item-icon, @@ -4307,7 +4283,7 @@ span.req { top: 50%; text-align: center; z-index: 5; } - /* line 72, ../../../../general/res/sass/forms/_filter.scss */ + /* line 74, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.t-item-icon:hover, @@ -4318,12 +4294,12 @@ span.req { opacity: 0.6; background-color: #0099cc; } -/* line 80, ../../../../general/res/sass/forms/_filter.scss */ +/* line 82, ../../../../general/res/sass/forms/_filter.scss */ .l-filter { display: inline-block; position: relative; } -/* line 87, ../../../../general/res/sass/forms/_filter.scss */ +/* line 89, ../../../../general/res/sass/forms/_filter.scss */ .top-bar input.filter { font-size: .9em; height: 24px; @@ -4332,7 +4308,7 @@ span.req { padding-left: 10px; padding-right: 10px; vertical-align: top; } -/* line 98, ../../../../general/res/sass/forms/_filter.scss */ +/* line 100, ../../../../general/res/sass/forms/_filter.scss */ .top-bar .icon-filter { font-size: 1.4em; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index fe60dc2bf2..09a6b52ecb 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -4142,35 +4142,11 @@ span.req { .t-filter input.t-filter-input { height: 22px; width: 200px; } - /* line 61, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input:-moz-placeholder, - .t-filter input.t-filter-input:-moz-placeholder { - color: rgba(102, 102, 102, 0.5); - font-style: italic; - font-weight: 200; } - /* line 64, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input::-moz-placeholder, - .t-filter input.t-filter-input::-moz-placeholder { - color: rgba(102, 102, 102, 0.5); - font-style: italic; - font-weight: 200; } - /* line 67, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input:-ms-input-placeholder, - .t-filter input.t-filter-input:-ms-input-placeholder { - color: rgba(102, 102, 102, 0.5); - font-style: italic; - font-weight: 200; } - /* line 56, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_user-interface.scss */ - .filter input.t-filter-input::-webkit-input-placeholder, - .t-filter input.t-filter-input::-webkit-input-placeholder { - color: rgba(102, 102, 102, 0.5); - font-style: italic; - font-weight: 200; } - /* line 36, ../../../../general/res/sass/forms/_filter.scss */ + /* line 38, ../../../../general/res/sass/forms/_filter.scss */ .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear, .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear { display: none; } -/* line 40, ../../../../general/res/sass/forms/_filter.scss */ +/* line 42, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol, .filter .t-item-icon, .filter .icon.s-icon-btn, .filter .s-icon-btn.t-item-icon, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon, .t-filter .icon.ui-symbol, .t-filter .t-item-icon, @@ -4189,7 +4165,7 @@ span.req { line-height: 22px; padding: 0px 5px; vertical-align: middle; } - /* line 48, ../../../../general/res/sass/forms/_filter.scss */ + /* line 50, ../../../../general/res/sass/forms/_filter.scss */ .filter .icon.ui-symbol:hover, .filter .t-item-icon:hover, .filter .icon.s-icon-btn:hover, .filter .s-icon-btn.t-item-icon:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover, .filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .filter .pager.t-item-icon:hover, .t-filter .icon.ui-symbol:hover, .t-filter .t-item-icon:hover, @@ -4200,7 +4176,7 @@ span.req { .t-filter .l-datetime-picker .l-month-year-pager .pager.t-item-icon:hover, .l-datetime-picker .l-month-year-pager .t-filter .pager.t-item-icon:hover { background: rgba(255, 255, 255, 0.1); } -/* line 52, ../../../../general/res/sass/forms/_filter.scss */ +/* line 54, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol, .filter .s-a-clear.t-item-icon, .filter .s-a-clear.s-icon-btn, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager, .t-filter .s-a-clear.ui-symbol, .t-filter .s-a-clear.t-item-icon, @@ -4229,7 +4205,7 @@ span.req { top: 50%; text-align: center; z-index: 5; } - /* line 72, ../../../../general/res/sass/forms/_filter.scss */ + /* line 74, ../../../../general/res/sass/forms/_filter.scss */ .filter .s-a-clear.ui-symbol:hover, .filter .s-a-clear.t-item-icon:hover, .filter .s-a-clear.s-icon-btn:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover, .t-filter .s-a-clear.ui-symbol:hover, .t-filter .s-a-clear.t-item-icon:hover, @@ -4240,12 +4216,12 @@ span.req { opacity: 0.6; background-color: #0099cc; } -/* line 80, ../../../../general/res/sass/forms/_filter.scss */ +/* line 82, ../../../../general/res/sass/forms/_filter.scss */ .l-filter { display: inline-block; position: relative; } -/* line 87, ../../../../general/res/sass/forms/_filter.scss */ +/* line 89, ../../../../general/res/sass/forms/_filter.scss */ .top-bar input.filter { font-size: .9em; height: 24px; @@ -4254,7 +4230,7 @@ span.req { padding-left: 10px; padding-right: 10px; vertical-align: top; } -/* line 98, ../../../../general/res/sass/forms/_filter.scss */ +/* line 100, ../../../../general/res/sass/forms/_filter.scss */ .top-bar .icon-filter { font-size: 1.4em; } From 6e1cadf3388b500adee8988b5435c656009f8ef8 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 15 Dec 2015 15:47:32 -0800 Subject: [PATCH 46/98] [Frontend] Fixed splitter and related elements when collapsed open #426 Adds CSS to turn off pointer-events for the splitter, treeview and inspect elements when they are in a collapsed state; --- .../res/sass/user-environ/_layout.scss | 2 ++ .../espresso/res/css/theme-espresso.css | 32 ++++++++++--------- .../themes/snow/res/css/theme-snow.css | 32 ++++++++++--------- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 15941f1479..53dfe01af0 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -270,6 +270,7 @@ .splitter-treeview, .holder-treeview-elements { opacity: 0; + pointer-events: none; } } @@ -304,6 +305,7 @@ .l-inspect, .splitter-inspect { opacity: 0; + pointer-events: none; } } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 2493661aa8..0bf73eaf07 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -4628,9 +4628,10 @@ span.req { .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { - opacity: 0; } + opacity: 0; + pointer-events: none; } -/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 279, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4650,7 +4651,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4669,7 +4670,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4690,44 +4691,45 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .t-inspect { z-index: 1 !important; } -/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 305, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { - opacity: 0; } + opacity: 0; + pointer-events: none; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 312, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 314, ../../../../general/res/sass/user-environ/_layout.scss */ .holder-all { min-width: 600px; } - /* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 319, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; max-width: 35%; width: 25%; } - /* line 322, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; max-width: 35%; width: 20%; z-index: 3; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 334, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 339, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 339, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4746,7 +4748,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /***************************************************************************** diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0b00551ac4..eebbe662a8 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -4550,9 +4550,10 @@ span.req { .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { - opacity: 0; } + opacity: 0; + pointer-events: none; } -/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 279, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4572,7 +4573,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4591,7 +4592,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4612,44 +4613,45 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .t-inspect { z-index: 1 !important; } -/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 305, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { - opacity: 0; } + opacity: 0; + pointer-events: none; } @media only screen and (min-device-width: 1025px) and (-webkit-min-device-pixel-ratio: 1) { - /* line 312, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 314, ../../../../general/res/sass/user-environ/_layout.scss */ .holder-all { min-width: 600px; } - /* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 319, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; max-width: 35%; width: 25%; } - /* line 322, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 324, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; max-width: 35%; width: 20%; z-index: 3; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 334, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 339, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 339, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4668,7 +4670,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /***************************************************************************** From a98ab958c922f332d7337ea6bb0c11e79e016df6 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 15 Dec 2015 17:06:47 -0800 Subject: [PATCH 47/98] [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 48/98] [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 29a1c7dc5dacd358e0b5bd41bc04cedfaf431917 Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 15 Dec 2015 21:58:21 -0800 Subject: [PATCH 49/98] [Documentation] Code example in bar graph tutorial incorporates text from the following paragraph #433 --- docs/src/tutorials/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/src/tutorials/index.md b/docs/src/tutorials/index.md index 26c47fefbd..1bda1d8848 100644 --- a/docs/src/tutorials/index.md +++ b/docs/src/tutorials/index.md @@ -1697,8 +1697,7 @@ Next, we utilize this functionality from the template: -''' - +``` __tutorials/bargraph/res/templates/bargraph.html__ Here, we utilize the functions we just provided from the controller to position From 83e77303aa8d140e2f44820b486b2fe21ee0d4a3 Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 15 Dec 2015 15:51:10 -0800 Subject: [PATCH 50/98] [Copy] Duplication of layouts does not retain position and size of all elements. #428 --- .../entanglement/src/services/CopyTask.js | 46 +++++------ .../test/services/CopyTaskSpec.js | 76 +++++++++++++++++-- 2 files changed, 93 insertions(+), 29 deletions(-) diff --git a/platform/entanglement/src/services/CopyTask.js b/platform/entanglement/src/services/CopyTask.js index 08bced4db8..0d672e348e 100644 --- a/platform/entanglement/src/services/CopyTask.js +++ b/platform/entanglement/src/services/CopyTask.js @@ -58,6 +58,8 @@ define( if (setLocation && child.getModel().location === undefined) { child.getModel().location = parent.getId(); } + + return child; } function cloneObjectModel(objectModel) { @@ -111,9 +113,7 @@ define( * copying. * @private */ - CopyTask.prototype.rewriteIdentifiers = function (obj) { - var idMap = this.idMap; - + CopyTask.prototype.rewriteIdentifiers = function (obj, idMap) { if (Array.isArray(obj)) { obj.forEach(function (value, index) { obj[index] = idMap[value] || value; @@ -127,18 +127,11 @@ define( delete obj[key]; obj[idMap[key]] = value; } - this.rewriteIdentifiers(value); + this.rewriteIdentifiers(value, idMap); }, this); } }; - function rewriteIdentifiersInClones(self) { - self.clones.forEach(function (clone) { - self.rewriteIdentifiers(clone.getModel()); - }); - return self; - } - /** * Given an array of objects composed by a parent, clone them, then * add them to the parent. @@ -146,7 +139,8 @@ define( * @returns {*} */ CopyTask.prototype.copyComposees = function(composees, clonedParent, originalParent){ - var self = this; + var self = this, + idMap = {}; return (composees || []).reduce(function(promise, originalComposee){ //If the composee is composed of other @@ -154,13 +148,28 @@ define( return promise.then(function(){ // ...to recursively copy it (and its children) return self.copy(originalComposee, originalParent).then(function(clonedComposee){ + //Map the original composee's ID to that of its + // clone so that we can replace any references to it + // in the parent + idMap[originalComposee.getId()] = clonedComposee.getId(); + //Compose the child within its parent. Cloned // objects will need to also have their location // set, however linked objects will not. return composeChild(clonedComposee, clonedParent, clonedComposee !== originalComposee); }); });}, self.$q.when(undefined) - ); + ).then(function(){ + //Replace any references in the cloned parent to + // contained objects that have been composed with the + // Ids of the clones + self.rewriteIdentifiers(clonedParent.getModel(), idMap); + + //Add the clone to the list of clones that will + //be returned by this function + self.clones.push(clonedParent); + return clonedParent; + }); }; /** @@ -188,21 +197,13 @@ define( // space is used. clone = this.parent.useCapability("instantiation", cloneObjectModel(originalObject.getModel())); - // Record ID mappings so we can rewrite properties later - self.idMap[originalObject.getId()] = clone.getId(); - //Iterate through child tree return this.$q.when(originalObject.useCapability('composition')).then(function(composees){ self.deferred.notify({phase: "preparing"}); //Duplicate the object's children, and their children, and // so on down to the leaf nodes of the tree. //If it is a link, don't both with children - return self.copyComposees(composees, clone, originalObject).then(function (){ - //Add the clone to the list of clones that will - //be returned by this function - self.clones.push(clone); - return clone; - }); + return self.copyComposees(composees, clone, originalObject); }); } else { //Creating a link, no need to iterate children @@ -245,7 +246,6 @@ define( this.deferred = this.$q.defer(); this.buildCopyPlan() - .then(rewriteIdentifiersInClones) .then(persistObjects) .then(addClonesToParent) .then(this.deferred.resolve, this.deferred.reject); diff --git a/platform/entanglement/test/services/CopyTaskSpec.js b/platform/entanglement/test/services/CopyTaskSpec.js index e5a2c57f2b..b76e479be0 100644 --- a/platform/entanglement/test/services/CopyTaskSpec.js +++ b/platform/entanglement/test/services/CopyTaskSpec.js @@ -143,12 +143,7 @@ define( mockDeferred.promise = synchronousPromise(value); }); - task = new CopyTask( - mockDomainObject, - mockParentObject, - mockPolicyService, - mockQ - ); + }); @@ -156,6 +151,13 @@ define( var model; beforeEach(function () { + task = new CopyTask( + mockDomainObject, + mockParentObject, + mockPolicyService, + mockQ + ); + task.perform().then(function (clone) { model = clone.getModel(); }); @@ -180,6 +182,68 @@ define( }); }); + describe("copies object trees with multiple references to the" + + " same object", function () { + var model, + mockDomainObjectB, + mockComposingObject, + composingObjectModel, + domainObjectClone, + domainObjectBClone; + + beforeEach(function () { + mockDomainObjectB = domainObjectFactory({ + capabilities: makeMockCapabilities(testModel.composition), + model: testModel + }); + composingObjectModel = { + name: 'mockComposingObject', + composition: [mockDomainObject.getId(), mockDomainObjectB.getId()] + }; + mockComposingObject = domainObjectFactory({ + capabilities: makeMockCapabilities(composingObjectModel.composition), + model: composingObjectModel + }); + + mockComposingObject.capabilities.composition.invoke.andReturn([mockDomainObject, mockDomainObjectB]); + task = new CopyTask( + mockComposingObject, + mockParentObject, + mockPolicyService, + mockQ + ); + + task.perform(); + domainObjectClone = task.clones[2]; + domainObjectBClone = task.clones[5]; + }); + + /** + * mockDomainObject and mockDomainObjectB have the same + * model with references to children ID_A and ID_B. Expect + * that after duplication the references should differ + * because they are each now referencing different child + * objects. This tests the issue reported in #428 + */ + it(" and correctly updates child identifiers in models ", function () { + var childA_ID = task.clones[0].getId(), + childB_ID = task.clones[1].getId(), + childC_ID = task.clones[3].getId(), + childD_ID = task.clones[4].getId(); + + expect(domainObjectClone.model.someArr[0]).toNotBe(domainObjectBClone.model.someArr[0]); + expect(domainObjectClone.model.someArr[0]).toBe(childA_ID); + expect(domainObjectBClone.model.someArr[0]).toBe(childC_ID); + expect(domainObjectClone.model.someArr[1]).toNotBe(domainObjectBClone.model.someArr[1]); + expect(domainObjectClone.model.someArr[1]).toBe(childB_ID); + expect(domainObjectBClone.model.someArr[1]).toBe(childD_ID); + expect(domainObjectClone.model.someObj.someProperty).toNotBe(domainObjectBClone.model.someObj.someProperty); + expect(domainObjectClone.model.someObj.someProperty).toBe(childB_ID); + expect(domainObjectBClone.model.someObj.someProperty).toBe(childD_ID); + + }); + }); + }); From d1f617a54e8c2f5f14c0bce91537476ac16d2069 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 11:50:46 -0800 Subject: [PATCH 51/98] [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 12:56:31 -0800 Subject: [PATCH 52/98] [API] Add Proposals and feedback Add proposals interspersed with narrative. As with all proposals, there is room for details to be fleshed out. https://github.com/nasa/openmctweb/issues/261 --- .../proposals/APIRedesign_PeteRichards.md | 246 ++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 docs/src/design/proposals/APIRedesign_PeteRichards.md diff --git a/docs/src/design/proposals/APIRedesign_PeteRichards.md b/docs/src/design/proposals/APIRedesign_PeteRichards.md new file mode 100644 index 0000000000..fbf9aabcbd --- /dev/null +++ b/docs/src/design/proposals/APIRedesign_PeteRichards.md @@ -0,0 +1,246 @@ + + +**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* + +- [Reducing interface depth (the bundle.json version)](#reducing-interface-depth-the-bundlejson-version) + - [Imperitive component registries](#imperitive-component-registries) + - [Get rid of "extension category" concept.](#get-rid-of-extension-category-concept) + - [Reduce number and depth of extension points](#reduce-number-and-depth-of-extension-points) + - [Composite services should not be the default](#composite-services-should-not-be-the-default) + - [Get rid of views, representations, and templates.](#get-rid-of-views-representations-and-templates) +- [Reducing interface depth (The angular discussion)](#reducing-interface-depth-the-angular-discussion) + - [More angular: for all services](#more-angular-for-all-services) + - [Less angular: only for views](#less-angular-only-for-views) +- [Standard packaging and build system](#standard-packaging-and-build-system) + - [Use systemjs for module loading](#use-systemjs-for-module-loading) + - [Use gulp or grunt for standard tooling](#use-gulp-or-grunt-for-standard-tooling) + - [Package openmctweb as single versioned file.](#package-openmctweb-as-single-versioned-file) +- [Misc Improvements](#misc-improvements) + - [Refresh on navigation](#refresh-on-navigation) + - [Move persistence adapter to promise rejection.](#move-persistence-adapter-to-promise-rejection) + - [Remove bulk requests from providers](#remove-bulk-requests-from-providers) +- [Notes on current API proposals:](#notes-on-current-api-proposals) +- [[1] Footnote: The angular debacle](#1-footnote-the-angular-debacle) + - ["Do or do not, there is no try"](#do-or-do-not-there-is-no-try) + - [A lack of commitment](#a-lack-of-commitment) + - [Commitment is good!](#commitment-is-good) + + + + +# Reducing interface depth (the bundle.json version) + +## Imperitive component registries +Transition component registries to javascript, get rid of bundle.json and bundles.json. Prescribe a method for application configuration, but allow flexibility in how application configuration is defined. + +Register components in an imperitive fashion, see angularApp.factory, angularApp.controller, etc. Alternatively, implement our own application object with new registries and it's own form of registering objects. + +## Get rid of "extension category" concept. +The concept of an "extension category" is itself an extraneous concept-- an extra layer of interface depth, an extra thing to learn before you can say "hello world". Extension points should be clearly supported and documented with whatever interfaces make sense. Developers who wish to add something that is conceptually equivalent to an extension category can do so directly, in the manner that suites their needs, without us forcing a common method on them. + +## Reduce number and depth of extension points +Clearly specify supported extension points (e.g. persistence, model providers, telemetry providers, routes, time systems), but don't claim that the system has a clear and perfect repeatable solution for unknown extension types. New extension categories can be implemented in whatever way makes sense, without prescribing "the one and only system for managing extensions". + +The underlying problem here is we are predicting needs for extension points where none exist-- if we try and design the extension system before we know how it is used, we design the wrong thing and have to rewrite it later. + +## Composite services should not be the default +Understanding composite services, and describing services as composite services can confuse developers. Aggregators are implemented once and forgotten, while decorators tend to be hacky, brittle solutions that are generally needed to avoid circular imports. While composite services are a useful construct, it reduces interface depth to implement them as registries + typed providers. + +You can write a provider (provides "thing x" for "inputs y") with a simple interface. A provider has two or more methods: +* a method which takes "inputs y" and returns True if it knows how to provide "thing x", false otherwise. +* one or more methods which provide "thing x" for objects of "inputs y". + +Actually checking whether a provider can respond to a request before asking it to do work allows for faster failure and clearer errors when no providers match the request. + +## Get rid of views, representations, and templates. +Templates are an implementation detail that should be handled by module loaders. Views and representations become "components," and a new concept, "routes", is used to exposing specific views to end users. + +`components` - building blocks for views, have clear inputs and outputs, and can be coupled to other components when it makes sense. (e.g. parent-child components such as menu and menu item), but should have ZERO knowledge of our data models or telemetry apis. They should define data models that enable them to do their job well while still being easy to test. + +`routes` - a view type for a given domain object, e.g. a plot, table, display layout, etc. Can be described as "whatever shows in the main screen when you are viewing an object." Handle loading of data from a domain object and passing that data to the view components. Routes should support editing as it makes sense in their own context. + +To facilitate testing: + +* routes should be testable without having to test the actual view. +* components should be independently testable with zero knowledge of our data models or telemetry APIs. + +Component code should be organized side by side, such as: + +``` +app +|- components + |- productDetail + | |- productDetail.js + | |- productDetail.css + | |- productDetail.html + | |- productDetailSpec.js + |- productList + |- checkout + |- wishlist +``` + +Components are not always reusable, and we shouldn't be overly concerned with making them so. If components are heavily reused, they should either be moved to a platform feature (e.g. notifications, indicators), or broken off as an external dependency (e.g. publish mct-plot as mct-plot.js). + + +# Reducing interface depth (The angular discussion) +Two options here: use more angular, use less angular. Wrapping angular methods does not reduce interface depth and must be avoided. + +The primary issue with angular is duplications of concerns-- both angular and the openmctweb platform implement the same tools side by side and it can be hard to comprehend-- it increases interface depth. For other concerns, see footnotes[1]. + +Wrapping angular methods for non-view related code is confusing to developers because of the random constraints angular places on these items-- developers ultimately have to understand both angular DI and our framework. For example, it's not possible to name the topic service "topicService" because angular expects Services to be implemented by Providers, which is different than our expectation. + +To reduce interface depth, we can replace our own provider and registry patterns with angular patterns, or we can only utilize angular view logic, and only use our own DI patterns. + +## More angular: for all services + +Increasing our commitment to angular would mean using more of the angular factorys, services, etc, and less of our home grown tools. We'd implement our services and extension points as angular providers, and make them configurable via app.config. + +As an example, registering a specific type of model provider in angular would look like: + +```javascript +mct.provider('model', modelProvider() { /* implementation */}); + +mct.config(['modelProvider', function (modelProvider) { + modelProvider.providers.push(RootModelProvider); +}]); +``` + +## Less angular: only for views + +The other reason to move away from angular DI is angular DI makes it impossible to take one of our common services (say the persistence service) and start running it in a worker without loading the entire angular framework. Webworkers should not have module loading functionality than the rest of the platform. + +If we wish to use less angular, I would recommend discontinuing use of all angular components that are not view related-- services, factories, $http, etc, and implementing them in our own paradigm. Otherwise, we end up with layered interfaces-- one of the goals we would like to avoid. + + +# Standard packaging and build system + +Standardize the packaging and build system, and completely separate the core platform from deployments. Prescribe a starting point for deployments, but allow flexibility. + +## Use systemjs for module loading + +Allow developers to use whatever module loading system they'd like to use, while still supporting all standard cases. We should also use this system for loading assets (css, scss, html templates), which makes it easier to implement a single file deployment using standard build tooling. + +## Use gulp or grunt for standard tooling + +Using gulp or grunt as a task runner would bring us in line with standard web developer workflows and help standardize rendering, deployment, and packaging. Additional tools can be added to the workflow at low cost, simplifying the set up of developer environments. + +Gulp and grunt provide useful developer tooling such as live reload, automatic scss/less/etc compiliation, and ease of extensibility for standard production build processes. They're key in decoupling code. + +## Package openmctweb as single versioned file. + +Deployments should depend on a specific version of openmctweb, but otherwise be allowed to have their own deployment and development toolsets. + +Customizations and deployments of openmctweb should not use the same build tooling as the core platform; instead they should be free to use their own build tools as they wish. (We would provide a template for an application, based on our experience with warp-for-rp and vista) + +Installation and utilization of openmctweb should be as simple as downloading the js file, including it in your own html page, and then initializing an app and running it. If a developer would prefer, they could use bower or npm to handle installation. + +Then, if we're using imperative methods for extending the application we can use the following for basic customization: + +```html + + +``` + +This packaging reduces the complexity of managing multiple deployed versions, and also allows us to provide users with incredibly simple tutorials-- they can use whatever tooling they like. For instance, a hello world tutorial may take the option of "exposing a new object in the tree". + +```javascript +var myApp = new OpenMCTWeb(); +myApp.roots.addRoot({ + id: 'myRoot', + name: 'Hello World!', +}); +myApp.routes.setDefault('myRoot'); +myApp.run(); +``` + +# Misc Improvements + +## Refresh on navigation +In cases where navigation events change the entire screen, we should be using routes and location changes to navigate between objects. We should be using href for all navigation events. + +At the same time, navigating should refresh state of every visible object. A properly configured persistence store will handle caching with standard cache headers and 304 not modified responses, which will provide good performance of object reloads, while helping us ensure that objects are always in sync between clients. + +View state (say, the expanded tree nodes) should not be tied to caching of data-- it should be something we intentionally persist and restore with each navigation. Data (such as object definitions) should be reloaded from server as necessary to restore state. + +## Move persistence adapter to promise rejection. +Simple: reject on fail, resolve on success. + +## Remove bulk requests from providers +Aggregators can request multiple things at once, but individual providers should only have to implement handling at the level of a single request. Each provider can implement it's own internal batching, but it should support making requests at a finer level of detail. + +Excessive wrapping of code with $q.all causes additional digest cycles and decreased performance. + +For example, instead of every telemetry provider responding to a given telemetry request, aggregators should route each request to the first provider that can fulfill that request. + + +# Notes on current API proposals: + +* [RequireJS for Dependency Injection](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#requirejs-as-dependency-injector): requires other topics to be discussed first. +* [Arbitrary HTML Views](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#arbitrary-html-views): think there is a place for it, requires other topics to be discussed first. +* [Wrap Angular Services](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#wrap-angular-services): No, this is bad. +* [Bundle definitions in Javascript](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#bundle-declarations-in-javascript): Points to a solution, but ultimately requires more discussion. +* [pass around a dependency injector](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#pass-around-a-dependency-injector): No. +* [remove partial constructors](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-partial-constructors): Yes, this should be superseded by another proposal though. The entire concept was a messy solution to dependency injection issues caused by declarative syntax. +* [Rename views to applications](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#rename-views-to-applications): Points to a problem that needs to be solved but I think the name is bad. +* [Provide classes for extensions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#provide-classes-for-extensions): Yes, in specific places +* [Normalize naming conventions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#normalize-naming-conventions): Yes. +* [Expose no third-party APIs](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#expose-no-third-party-apis): Completely disagree, points to a real problem with poor angular integration. +* [Register Extensions as Instances instead of Constructors](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#register-extensions-as-instances-instead-of-constructors): Superseded by the fact that we should not hope to implement a generic construct. +* [Remove capability delegation](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-capability-delegation): Yes. +* [Nomenclature Change](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#nomenclature-change): Yes, hope to discuss the implications of this more clearly in other proposals. +* [Capabilities as mixins](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#capabilities-as-mixins): Yes. +* [Remove appliesTo methods](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#remove-applies-to-methods): No-- I think some level of this is necessary. I think a more holistic approach to policy is needed. it's a rather complicated system. +* [Revise telemetry API](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#revise-telemetry-api): If we can rough out and agree to the specifics, then Yes. Needs discussion. +* [Allow composite services to fail gracefully](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#allow-composite-services-to-fail-gracefully): No. As mentioned above, I think composite services themselves should be eliminated for a more purpose bound tool. +* [Plugins as angular modules](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#plugins-as-angular-modules): Should we decide to embrace Angular completely, I would support this. Otherwise, no. +* [Contextual Injection](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#contextual-injection): No, don't see a need. +* [Add New Abstractions for Actions](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#add-new-abstractions-for-actions): Worth a discussion. +* [Add gesture handlers](https://github.com/nasa/openmctweb/blob/api-redesign/docs/src/design/proposals/APIRedesign.md#add-gesture-handlers): Yes if we can agree on details. We need a platform implementation that is easy to use, but we should not reinvent the wheel. + + + +# [1] Footnote: The angular debacle + +## "Do or do not, there is no try" + +A commonly voiced concern of embracing angular is the possibility of becoming dependent on a third party framework. This concern is itself detrimental-- if we're afraid of becoming dependent on a third party framework, then we will do a bad job of using the framework, and inevitably will want to stop using it. + +If we're using a framework, we need to use it fully, or not use it at all. + +## A lack of commitment + +A number of the concerns we heard from developers and interns can be attributed to the tenuous relationship between the OpenMCTWeb platform and angular. We claimed to be angular, but we weren't really angular. Instead, we are caught between our incomplete framework paradigm and the angular paradigm. In many cases we reinvented the wheel or worked around functionality that angular provides, and ended up in a more confusing state. + +## Commitment is good! + +We could just be an application that is built with angular. + +An application that is modular and extensible not because it reinvents tools for providing modularity and extensibility, but because it reuses existing tools for modularity and extensibility. + +There are benefits to buying into the angular paradigm: shift documentation burden to external project, engage a larger talent pool available both as voluntary open source contributors and as experienced developers for hire, and gain access to an ecosystem of tools that we can use to increase the speed of development. + +There are negatives too: Angular is a monolith, it has performance concerns, and an unclear future. If we can't live with it, we should look at alternatives. + From 9b32461240ef5e016d155a86b75d6a0dcb2a183c Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 13:26:30 -0800 Subject: [PATCH 53/98] [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 4579b4fabcc8d3241a461c3782803a167223aff0 Mon Sep 17 00:00:00 2001 From: Pete Richards Date: Wed, 16 Dec 2015 13:29:42 -0800 Subject: [PATCH 54/98] [API] Remove orphan paragraph, update spacing --- docs/src/design/proposals/APIRedesign_PeteRichards.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/src/design/proposals/APIRedesign_PeteRichards.md b/docs/src/design/proposals/APIRedesign_PeteRichards.md index fbf9aabcbd..3fa78fe2ed 100644 --- a/docs/src/design/proposals/APIRedesign_PeteRichards.md +++ b/docs/src/design/proposals/APIRedesign_PeteRichards.md @@ -31,19 +31,23 @@ # Reducing interface depth (the bundle.json version) ## Imperitive component registries + Transition component registries to javascript, get rid of bundle.json and bundles.json. Prescribe a method for application configuration, but allow flexibility in how application configuration is defined. Register components in an imperitive fashion, see angularApp.factory, angularApp.controller, etc. Alternatively, implement our own application object with new registries and it's own form of registering objects. ## Get rid of "extension category" concept. + The concept of an "extension category" is itself an extraneous concept-- an extra layer of interface depth, an extra thing to learn before you can say "hello world". Extension points should be clearly supported and documented with whatever interfaces make sense. Developers who wish to add something that is conceptually equivalent to an extension category can do so directly, in the manner that suites their needs, without us forcing a common method on them. ## Reduce number and depth of extension points + Clearly specify supported extension points (e.g. persistence, model providers, telemetry providers, routes, time systems), but don't claim that the system has a clear and perfect repeatable solution for unknown extension types. New extension categories can be implemented in whatever way makes sense, without prescribing "the one and only system for managing extensions". The underlying problem here is we are predicting needs for extension points where none exist-- if we try and design the extension system before we know how it is used, we design the wrong thing and have to rewrite it later. ## Composite services should not be the default + Understanding composite services, and describing services as composite services can confuse developers. Aggregators are implemented once and forgotten, while decorators tend to be hacky, brittle solutions that are generally needed to avoid circular imports. While composite services are a useful construct, it reduces interface depth to implement them as registries + typed providers. You can write a provider (provides "thing x" for "inputs y") with a simple interface. A provider has two or more methods: @@ -53,6 +57,7 @@ You can write a provider (provides "thing x" for "inputs y") with a simple inter Actually checking whether a provider can respond to a request before asking it to do work allows for faster failure and clearer errors when no providers match the request. ## Get rid of views, representations, and templates. + Templates are an implementation detail that should be handled by module loaders. Views and representations become "components," and a new concept, "routes", is used to exposing specific views to end users. `components` - building blocks for views, have clear inputs and outputs, and can be coupled to other components when it makes sense. (e.g. parent-child components such as menu and menu item), but should have ZERO knowledge of our data models or telemetry apis. They should define data models that enable them to do their job well while still being easy to test. @@ -83,6 +88,7 @@ Components are not always reusable, and we shouldn't be overly concerned with ma # Reducing interface depth (The angular discussion) + Two options here: use more angular, use less angular. Wrapping angular methods does not reduce interface depth and must be avoided. The primary issue with angular is duplications of concerns-- both angular and the openmctweb platform implement the same tools side by side and it can be hard to comprehend-- it increases interface depth. For other concerns, see footnotes[1]. @@ -107,8 +113,6 @@ mct.config(['modelProvider', function (modelProvider) { ## Less angular: only for views -The other reason to move away from angular DI is angular DI makes it impossible to take one of our common services (say the persistence service) and start running it in a worker without loading the entire angular framework. Webworkers should not have module loading functionality than the rest of the platform. - If we wish to use less angular, I would recommend discontinuing use of all angular components that are not view related-- services, factories, $http, etc, and implementing them in our own paradigm. Otherwise, we end up with layered interfaces-- one of the goals we would like to avoid. @@ -189,6 +193,7 @@ View state (say, the expanded tree nodes) should not be tied to caching of data- Simple: reject on fail, resolve on success. ## Remove bulk requests from providers + Aggregators can request multiple things at once, but individual providers should only have to implement handling at the level of a single request. Each provider can implement it's own internal batching, but it should support making requests at a finer level of detail. Excessive wrapping of code with $q.all causes additional digest cycles and decreased performance. From b59fc430385a47877f85d41ff7410b95494dce57 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 16 Dec 2015 14:52:19 -0800 Subject: [PATCH 55/98] [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 56/98] [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 57/98] [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 58/98] [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 59/98] [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 60/98] [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 61/98] [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 62/98] [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. -->