add code panel

nemerovchenko · nemerovchenko · commit 5f06641681c0 · 2016-08-05T18:55:44.000+03:00
diff --git a/app/build/mojs-curve-editor.js b/app/build/mojs-curve-editor.js
diff --git a/app/build/mojs-curve-editor.min.js b/app/build/mojs-curve-editor.min.js
diff --git a/app/css/blocks/code-panel.postcss.css b/app/css/blocks/code-panel.postcss.css
@@ -0,0 +1,31 @@
+@import '../assets/globals.postcss.css';
+
+.code-panel {
+  position:       absolute;
+  left:           calc( 10 * $PX );
+  top:            calc( -32 * $PX );
+  width:          calc( 391 * $PX );
+  height:         calc( 32 * $PX );
+  margin:         0 auto;
+  border-radius:  calc( 6 * $PX ) calc( 6 * $PX ) 0 0;
+  background:     rgba( 61, 27, 60, 1 );
+  z-index: 3;
+
+  &__input-wrapp {
+    width:          381px;
+    height:         23px;
+    margin:         5px 5px;
+    border-radius:  calc( 2 * $PX );
+    background:     rgba( 58, 8, 58, 1 );
+    border:         1px solid #B3A0B2;
+    box-shadow:     inset 3px 3px 0 rgba(0,0,0,0.5);
+  }
+  &__input-field {
+    display:    block;
+    background: transparent;
+    color:      $c-white;
+    padding:    0.4em;
+    border:     none;
+    width:      100%;
+  }
+}
diff --git a/app/css/blocks/code-panel.postcss.css.json b/app/css/blocks/code-panel.postcss.css.json
@@ -0,0 +1 @@
+{"code-panel":"_code-panel_1jdzk_3","code-panel__input-wrapp":"_code-panel__input-wrapp_1jdzk_1","code-panel__input-field":"_code-panel__input-field_1jdzk_1"}
diff --git a/app/css/blocks/curve-editor.postcss.css b/app/css/blocks/curve-editor.postcss.css
@@ -20,7 +20,7 @@
     top:          0;
     bottom:       0;
     padding:      calc( $gap * $PX );
-    
+
     & icon-divider {
       margin: calc( 10*$PX ) auto;
     }
diff --git a/app/css/blocks/curve-editor.postcss.css.json b/app/css/blocks/curve-editor.postcss.css.json
@@ -1 +1 @@
-{"curve-editor":"_curve-editor_hshpo_4","curve-editor__left":"_curve-editor__left_hshpo_1","curve-editor__right":"_curve-editor__right_hshpo_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_hshpo_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_hshpo_1"}
+{"curve-editor":"_curve-editor_dzxd1_4","curve-editor__left":"_curve-editor__left_dzxd1_1","curve-editor__right":"_curve-editor__right_dzxd1_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_dzxd1_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_dzxd1_1"}
diff --git a/app/css/blocks/curve.postcss.css b/app/css/blocks/curve.postcss.css
diff --git a/app/css/blocks/curve.postcss.css.json b/app/css/blocks/curve.postcss.css.json
@@ -1 +1 @@
-{"curve":"_curve_adube_5","curve__svg-wrapper":"_curve__svg-wrapper_adube_1","curve__svg":"_curve__svg_adube_1","curve__svg-path":"_curve__svg-path_adube_1"}
+{"curve":"_curve_14zwe_5","curve__svg-wrapper":"_curve__svg-wrapper_14zwe_1","curve__svg":"_curve__svg_14zwe_1","curve__svg-path":"_curve__svg-path_14zwe_1"}
diff --git a/app/js/tags/code-panel.tag b/app/js/tags/code-panel.tag
@@ -0,0 +1,13 @@
+
+
+<code-panel class={ this.CLASSES['code-panel'] }>
+  <div class={ this.CLASSES['code-panel__input-wrapp'] }>
+    <input class={ this.CLASSES['code-panel__input-field'] } type="text" readonly="readonly" />
+  </div>
+
+  <script>
+    this.CLASSES = require('../../css/blocks/code-panel.postcss.css.json');
+    require('../../css/blocks/code-panel');
+  </script>
+
+</code-panel>
diff --git a/app/js/tags/curve-editor.tag b/app/js/tags/curve-editor.tag
@@ -1,13 +1,14 @@
 require('./resize-handle');
 require('./icons');
 require('./icon');
+require('./code-panel');
 require('./icon-button');
 require('./icon-divider');
 require('./curve');
 
 <curve-editor class={this.CLASSES['curve-editor']} style={this.getStyle()}>
   <icons />
-
+  <code-panel />
   <div class={this.CLASSES['curve-editor__left']}>
     <icon-button shape="code"></icon-button>
     <icon-divider />
diff --git a/app/js/tags/curve.tag b/app/js/tags/curve.tag
@@ -73,7 +73,7 @@ require('./point');
 
       const background = `background-position: 0 ${-temp_top - 1}px`;
       const transform  = `transform: translate(0px, ${-temp_top}px)`;
-        
+
       return {
         background,
         transform: `${mojs.h.prefix.css}${transform}; ${transform};`
@@ -96,4 +96,4 @@ require('./point');
     store.subscribe( () => { get(); this.update(); });
 
   </script>
-</curve>
+</curve>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+{"code-panel":"_code-panel_1jdzk_3","code-panel__input-wrapp":"_code-panel__input-wrapp_1jdzk_1","code-panel__input-field":"_code-panel__input-field_1jdzk_1"}`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`top: 0;`
`21`	`21`	`bottom: 0;`
`22`	`22`	`padding: calc( $gap * $PX );`
`23`		`-`
	`23`	`+`
`24`	`24`	`& icon-divider {`
`25`	`25`	`margin: calc( 10*$PX ) auto;`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"curve-editor":"_curve-editor_hshpo_4","curve-editor__left":"_curve-editor__left_hshpo_1","curve-editor__right":"_curve-editor__right_hshpo_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_hshpo_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_hshpo_1"}`
	`1`	`+{"curve-editor":"_curve-editor_dzxd1_4","curve-editor__left":"_curve-editor__left_dzxd1_1","curve-editor__right":"_curve-editor__right_dzxd1_1","curve-editor__anchor-buttons":"_curve-editor__anchor-buttons_dzxd1_1","curve-editor__mojs-logo":"_curve-editor__mojs-logo_dzxd1_1"}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"curve":"_curve_adube_5","curve__svg-wrapper":"_curve__svg-wrapper_adube_1","curve__svg":"_curve__svg_adube_1","curve__svg-path":"_curve__svg-path_adube_1"}`
	`1`	`+{"curve":"_curve_14zwe_5","curve__svg-wrapper":"_curve__svg-wrapper_14zwe_1","curve__svg":"_curve__svg_14zwe_1","curve__svg-path":"_curve__svg-path_14zwe_1"}`