light9 Changeset - 5707e7b42de6

Changeset - 5707e7b42de6

Parent rev.

Child rev.

[Not reviewed]

default

0 4 0

Drew Perttula - 8 years ago 2017-06-04 08:58:38
drewp@bigasterisk.com

css work on live ui
Ignore-this: e70c49ee127305aeba8efa9f65acb430

4 files changed with 56 insertions and 20 deletions:

light9/web/live/index.html

light9/web/live/live.coffee

light9/web/resource-display.html

light9/web/style.css

0 comments (0 inline, 0 general)

light9/web/live/index.html

➞

Show inline comments

@@ @@ -23,12 +23,26 @@ @@
     <dom-module id="light9-live-control">
       <template>
         <style>
          paper-slider { width: 100%; margin: -19px 0; }
         </style>
         <style is="custom-style">
          paper-slider {
              --paper-slider-knob-color: var(--paper-red-500);
              --paper-slider-active-color: var(--paper-red-500);
              --paper-slider-font-color: white;
              --paper-slider-input: {
                  width: 75px;
                  background: black;
+             }
+         }
          </style>
         <template is="dom-if" if="{{deviceAttr.useSlider}}">
           <paper-slider min="0"
                         max="{{deviceAttr.max}}"
                         step=".001"
                         editable
                         content-type="application/json"
@@ @@ -56,51 +70,50 @@ @@
     </dom-module>
     <dom-module id="light9-live-device-control">
       <template>
         <style>
          .device {
              border: 2px solid gray;
              border: 2px solid gray;
              margin: 9px;
              padding: 5px;
              background: #171717;
              border: 2px solid #151e2d;
              margin: 4px;
              padding: 1px;
              background: #171717;  /* deviceClass gradient added later */
              break-inside: avoid-column;
              border-top-right-radius: 15px;
              overflow: hidden;
+         }
          .deviceAttr {
              border-top: 1px solid #ffffff26;
              margin-top: 6px;
              padding-top: 4px;
              border-top: 1px solid #272727;
              padding-bottom: 2px;
              display: flex;
+         }
          .deviceAttr > span {
+         }
          .deviceAttr > light9-live-control {
              flex-grow: 1;
+         }
          h2 {
              font-size: 110%;
              padding: 4px;
              background: #1f1f1f;
+         }
          #mainLabel {
              font-size: 120%;
              color: #9ab8fd;
              text-decoration: initial;
+         }
         </style>
         <div class="device">
           <h2>
+          <h2 style$="[[bgStyle]]">
             <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
             a <resource-display graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
+            a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
           </h2>
           <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
             <div class="deviceAttr">
               <span>attr <resource-display graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
+              <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
               <light9-live-control device="{{uri}}" device-attr="{{dattr}}"></light9-live-control>
             </div>
           </template>
         </div>
       </template>
     </dom-module>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -35,15 +35,23 @@ Polymer @@
   is: "light9-live-device-control"
   properties:
     graph: { type: Object, notify: true }
     uri: { type: String, notify: true }
     deviceClass: { type: String, notify: true }
     deviceAttrs: { type: Array, notify: true }
     bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }
   observers: [
     'onGraph(graph)'
+    ]
   _bgStyle: (deviceClass) ->
     hash = 0
     for i in [(deviceClass.length-10)...deviceClass.length]
         hash += deviceClass.charCodeAt(i)
     hue = (hash * 8) % 360
     accent = "hsl(#{hue}, 49%, 22%)"
     "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"
   onGraph: ->
     @graph.runHandler(@update.bind(@), "#{@uri} update")
   update: ->
     U = (x) => @graph.Uri(x)
     @deviceClass = @graph.uriValue(@uri, U('rdf:type'))

light9/web/resource-display.html

➞

Show inline comments

 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/paper-dialog/paper-dialog.html">
 <link rel="import" href="/lib/paper-button/paper-button.html">
 <link rel="stylesheet" href="/style.css">
 <dom-module id="resource-display">
   <template>
     <link rel="stylesheet" href="/style.css">
     <style>
      :host {
          display: inline-block;
          vertical-align: top;
          border: 2px rgba(84, 84, 84, 0.27) outset;
          border-radius: 9px;
          padding: 2px;
          zvertical-align: top;
          zborder: 2px rgba(84, 84, 84, 0.27) outset;
          zborder-radius: 9px;
          zpadding: 2px;
+     }
     </style>
-    <span class="resource"><a href="{{uri}}">{{label}}</a></span>
+    <span class$="[[resClasses]]"><a href="{{uri}}">{{label}}</a></span>
     <template is="dom-if" if="{{rename}}">
       <button on-click="onRename">Rename</button>
       <paper-dialog id="renameDialog" modal
                     on-iron-overlay-closed="onRenameClosed">
         <p>
@@ @@ -39,15 +39,20 @@ @@
        is: "resource-display",
        properties: {
            graph: { type: Object },
            uri: { type: String },
            label: { type: String },
            rename: { type: Boolean },
            minor: { type: Boolean },
            resClasses: { type: String, computed: '_resClasses(minor)', value: 'resource' },
            renameTo: { type: String, notify: true },
        },
        observers: ['onUri(graph, uri)'],
        _resClasses: function(minor) {
            return minor ? 'resource minor' : 'resource';
        },
        onUri: function(graph, uri) {
            this.graph.runHandler(this.setLabel.bind(this), `label ${this.uri}`);
        },
        setLabel: function() {
            if (!this.uri) {
                this.label = "<no uri>";

light9/web/style.css

➞

Show inline comments

@@ @@ -148,24 +148,34 @@ button a { @@
 a.resource {
     color: inherit;
     text-decoration: none;
+}
 .resource {
-    border: 1px solid gray;
+    border: 1px solid #545454;
     border-radius: 5px;
     padding: 1px;
     margin: 2px;
-    background: rgb(66, 66, 66);
+    background: rgb(49, 49, 49);
     display: block;
     text-shadow: 1px 1px 2px black;
+}
 .resource.minor {
     background: none;
     border: none;
+}
 .resource a {
     color: rgb(150, 150, 255);
     padding: 1px;
     display: inline-block;
+}
 .resource.minor a {
     text-decoration: none;
     color: rgb(155, 155, 193);
     padding: 0
+}
 .sub {
     display: inline-block;
     vertical-align: top;
+}
 .sub.local {
     background: rgb(44, 44, 44);

0 comments (0 inline, 0 general)