ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-21 17:57:39 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

WIP: styling components

Browse Source
This commit is contained in:
Joel McKinnon 2019-12-27 14:19:39 -08:00
parent d38e2c49cb
commit e52f6ce099
6 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/conditionSet/ConditionSetViewProvider.js
View File

@ -50,12 +50,12 @@ export default class ConditionSetViewProvider {
}, },
provide: { provide: {
openmct, openmct,
// domainObject, domainObject,
objectPath objectPath
}, },
data() { data() {
return { return {
isEditing: isEditing isEditing
} }
}, },
template: '<condition-set :isEditing="isEditing"></condition-set>' template: '<condition-set :isEditing="isEditing"></condition-set>'

4
src/plugins/conditionSet/components/CurrentOutput.vue
View File

@ -5,8 +5,8 @@
<div class="c-cs__ui__header"> <div class="c-cs__ui__header">
<span class="c-cs__ui__header-label">Current Output</span> <span class="c-cs__ui__header-label">Current Output</span>
<span <span
class="c-disclosure-triangle is-enabled flex-elem" class="c-cs__disclosure-triangle is-enabled flex-elem"
:class="{'c-disclosure-triangle--expanded': expanded}" :class="{'c-cs__disclosure-triangle--expanded': expanded}"
></span> ></span>
</div> </div>
<div class="c-cs__ui_text"> <div class="c-cs__ui_text">

8
src/plugins/conditionSet/components/TestData.vue
View File

@ -3,12 +3,12 @@
id="test-data" id="test-data"
class="test-data" class="test-data"
> >
<div class="c-sw-edit__ui__header"> <div class="c-cs__ui__header">
<span class="c-cs__ui__header-label">Test Data</span>
<span <span
class="c-disclosure-triangle is-enabled flex-elem" class="c-cs__disclosure-triangle is-enabled flex-elem"
:class="{'c-disclosure-triangle--expanded': expanded}" :class="{'c-cs__disclosure-triangle--expanded': expanded}"
></span> ></span>
<span class="c-sw-edit__ui__header-label">Test Data</span>
</div> </div>
<div class="l-enable"> <div class="l-enable">
<label class="checkbox custom"> <label class="checkbox custom">

12
src/plugins/conditionSet/components/current-output.scss → src/plugins/conditionSet/components/condition-set.scss
View File

@ -5,6 +5,13 @@
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
color: #7C7D80; color: #7C7D80;
display: flex;
justify-content: stretch;
}
.c-cs__ui__header-label {
display: inline-block;
width: 100%;
} }
.c-cs__ui_text { .c-cs__ui_text {
@ -13,10 +20,9 @@
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;
color: #7C7D80; color: #7C7D80;
} }
.c-disclosure-triangle { .c-cs__disclosure-triangle {
$d: 8px; $d: 8px;
color: $colorDisclosureCtrl; color: $colorDisclosureCtrl;
display: flex; display: flex;
@ -35,7 +41,7 @@
&:before { &:before {
$s: .5; $s: .5;
content: $glyph-icon-arrow-up; content: $glyph-icon-arrow-down;
display: block; display: block;
font-family: symbolsfont; font-family: symbolsfont;
font-size: 1rem * $s; font-size: 1rem * $s;

2
src/plugins/conditionSet/pluginSpec.js
View File

@ -23,7 +23,7 @@
import { createOpenMct } from 'testTools'; import { createOpenMct } from 'testTools';
import ConditionSetPlugin from './plugin'; import ConditionSetPlugin from './plugin';
describe('The plugin', () => { fdescribe('The plugin', () => {
let openmct; let openmct;
let conditionSetDefinition; let conditionSetDefinition;
let element; let element;

2
src/styles/vue-styles.scss
View File

@ -1,6 +1,6 @@
@import "../api/overlays/components/dialog-component.scss"; @import "../api/overlays/components/dialog-component.scss";
@import "../api/overlays/components/overlay-component.scss"; @import "../api/overlays/components/overlay-component.scss";
@import "../plugins/conditionSet/components/current-output.scss"; @import "../plugins/conditionSet/components/condition-set.scss";
@import "../plugins/displayLayout/components/box-view.scss"; @import "../plugins/displayLayout/components/box-view.scss";
@import "../plugins/displayLayout/components/display-layout.scss"; @import "../plugins/displayLayout/components/display-layout.scss";
@import "../plugins/displayLayout/components/edit-marquee.scss"; @import "../plugins/displayLayout/components/edit-marquee.scss";