diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less index 739ec6cb..24b2f2d8 100644 --- a/webapp/src/assets/less/variables.less +++ b/webapp/src/assets/less/variables.less @@ -15,6 +15,8 @@ @darkened-primary-color: darken(@global-primary-background, 15%); @inverse-global-color: fade(@global-inverse-color, 80%); +@very-light-primary-color: lighten(@global-primary-background, 40%); + @global-border: #d5d5d5; // UIkit @@ -265,6 +267,32 @@ } } +/* + * Text + */ + +// A text label for an input control that is highlighted +.ofm-highlighted-label { + color: @darkened-primary-color; + // 500 is slightly more bold than normal text (400) and less than semi-bold (600) + font-weight: 500; +} + +// Reducing the ui-kit margins from 20px to 5px +.ofm-close-pars p{ + margin-bottom: 5px; +} + +// Use CSS "next-sibling combinator" to get p-tags following another tag at the same level. +.ofm-close-pars * + p{ + margin-top: 5px; +} + +.hook-inverse() { + .ofm-highlighted-label{ + color: @very-light-primary-color; + } +} /* * Links @@ -277,11 +305,29 @@ } .uk-alert-success{ - color: rgba(28, 131, 45); + color: rgb(28, 131, 45); background-color: rgba(130, 221, 145, 0.671); } } +// For links that shouldn't look styled like links (such as in menus) +.ofm-unstyled-link { + text-decoration: none; + cursor: pointer; + color: @global-color; +} + +.ofm-unstyled-link.disabled{ + cursor: default; + color: @global-muted-color; +} + +.hook-inverse() { + .ofm-unstyled-link{ + color: @inverse-global-color; + } +} + /* * Buttons */ diff --git a/webapp/src/components/genericComponents/iconButton.vue b/webapp/src/components/genericComponents/iconButton.vue new file mode 100644 index 00000000..79703c13 --- /dev/null +++ b/webapp/src/components/genericComponents/iconButton.vue @@ -0,0 +1,74 @@ + + + + {{ icon }} + + + {{ label }} + + + + + + + diff --git a/webapp/src/components/genericComponents/miniMenu.vue b/webapp/src/components/genericComponents/miniMenu.vue new file mode 100644 index 00000000..07cf23f9 --- /dev/null +++ b/webapp/src/components/genericComponents/miniMenu.vue @@ -0,0 +1,73 @@ + + + + more_vert + + + + + + + + + + diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue index f6c2d279..0622a40f 100644 --- a/webapp/src/components/labThingsComponents/inputFromSchema.vue +++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue @@ -1,7 +1,9 @@ - - {{ label }} + + + {{ label }} + - + - {{ label }} + + + {{ label }} + - + - + - {{ label }} + + {{ label }} + - + - {{ label }} + + + {{ label }} + - + - {{ label }} + + + {{ label }} + {{ internalLabels[key] }} @@ -94,12 +120,18 @@ @keydown="keyDown" @animationend="animationEnd" /> - + - {{ label }} + + + {{ label }} + - + - {{ label }} + + + {{ label }} + diff --git a/webapp/src/components/labThingsComponents/syncPropertyButton.vue b/webapp/src/components/labThingsComponents/syncPropertyButton.vue deleted file mode 100644 index f93f5d66..00000000 --- a/webapp/src/components/labThingsComponents/syncPropertyButton.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - sync - - - - - - - diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue index 89dcecb9..70cac330 100644 --- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue +++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue @@ -22,7 +22,7 @@ and zero position buttons. It also includes the d-pad. type="number" @keyup.enter="startMoveTask" /> - + import ActionButton from "../../labThingsComponents/actionButton.vue"; -import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue"; +import iconButton from "@/components/genericComponents/iconButton.vue"; import stageControlButtons from "./stageControlButtons.vue"; import { eventBus } from "../../../eventBus.js"; @@ -68,7 +68,7 @@ export default { components: { ActionButton, - syncPropertyButton, + iconButton, stageControlButtons, },
import ActionButton from "../../labThingsComponents/actionButton.vue"; -import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue"; +import iconButton from "@/components/genericComponents/iconButton.vue"; import stageControlButtons from "./stageControlButtons.vue"; import { eventBus } from "../../../eventBus.js"; @@ -68,7 +68,7 @@ export default { components: { ActionButton, - syncPropertyButton, + iconButton, stageControlButtons, },