mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-21 15:04:01 +02:00
add inlet + some ui changes.
This commit is contained in:
Kushagra Gour
@ -5,6 +5,7 @@
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Inconsolata';
|
||||
@ -76,6 +77,12 @@
|
||||
top: 0; bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
will-change: -webkit-filter;
|
||||
transition: 0.15s ease 0.4s;
|
||||
}
|
||||
.overlay-visible .main-container {
|
||||
transition-duration: 0.3s;
|
||||
-webkit-filter: blur(3px);
|
||||
}
|
||||
.code-side,
|
||||
.demo-side {
|
||||
@ -239,6 +246,7 @@
|
||||
}
|
||||
.modal__content {
|
||||
background: #fdfdfd;
|
||||
color: #444;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
@ -262,25 +270,21 @@
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
background: rgba(0,0,0,0.6);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.is-modal-visible ~ .modal-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
z-index: 4;
|
||||
background-color: #111;
|
||||
padding: 20px 30px;
|
||||
z-index: 6;
|
||||
background-color: #272822;
|
||||
transition: 0.3s ease;
|
||||
will-change: transform;
|
||||
transform: translateX(100%);
|
||||
@ -288,10 +292,19 @@
|
||||
.saved-items-pane.is-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.is-modal-visible ~ .modal-overlay,
|
||||
.saved-items-pane.is-open ~ .modal-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.saved-items-pane__close-btn {
|
||||
position: absolute;
|
||||
left: -32px;
|
||||
left: -18px;
|
||||
top: 24px;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
padding: 10px 14px;
|
||||
background: crimson;
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.saved-items-pane.is-open .saved-items-pane__close-btn {
|
||||
@ -299,14 +312,20 @@
|
||||
}
|
||||
.saved-item-tile {
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
margin: 10px 0;
|
||||
background-color: #2f302b;
|
||||
/*border: 1px solid rgba(255,255,255,0.1);*/
|
||||
margin: 20px 0;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
}
|
||||
.saved-item-tile:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
.saved-items-pane__container {
|
||||
overflow-y: scroll;
|
||||
max-height: calc(100vh - 90px);
|
||||
}
|
||||
.notifications-btn {
|
||||
position: relative;
|
||||
}
|
||||
@ -635,8 +654,8 @@
|
||||
|
||||
<div id="js-saved-items-pane" class="saved-items-pane">
|
||||
<button class="btn saved-items-pane__close-btn" id="js-saved-items-pane-close-btn">X</button>
|
||||
<h3>My Items</h3>
|
||||
<div id="js-saved-items-wrap">
|
||||
<h3>My Library</h3>
|
||||
<div id="js-saved-items-wrap" class="saved-items-pane__container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -675,6 +694,7 @@
|
||||
<script src="lib/emmet.js"></script>
|
||||
|
||||
<script src="lib/split.js"></script>
|
||||
<script src="lib/inlet.min.js"></script>
|
||||
<script src="lib/esprima.js"></script>
|
||||
<script src="lib/escodegen.browser.min.js"></script>
|
||||
|
||||
|
||||
176
src/lib/inlet.css
Normal file
176
src/lib/inlet.css
Normal file
@ -0,0 +1,176 @@
|
||||
/*
|
||||
* =========================================================
|
||||
* =========================================================
|
||||
* ColorPicker
|
||||
* =========================================================
|
||||
* =========================================================
|
||||
*
|
||||
*/
|
||||
.inlet_clicker {
|
||||
z-index: 10;
|
||||
}
|
||||
.inlet_slider {
|
||||
opacity: 0.85;
|
||||
z-index: 10;
|
||||
width: 24%;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
height: 14px;
|
||||
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
|
||||
box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
|
||||
background-color: #d6d6d6;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ebebeb));
|
||||
background-image: -webkit-linear-gradient(top, #d6d6d6, #ebebeb);
|
||||
background-image: -moz-linear-gradient(top, #d6d6d6, #ebebeb);
|
||||
background-image: -o-linear-gradient(top, #d6d6d6, #ebebeb);
|
||||
background-image: -ms-linear-gradient(top, #d6d6d6, #ebebeb);
|
||||
background-image: linear-gradient(top, #d6d6d6, #ebebeb);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
|
||||
}
|
||||
.inlet_slider:hover {
|
||||
opacity: 0.98;
|
||||
}
|
||||
.inlet_slider .range {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.inlet_slider input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
@-moz-document url-prefix() {
|
||||
.inlet_slider input[type="range"] {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.inlet_slider input::-moz-range-track {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.inlet_slider input::-webkit-slider-thumb {
|
||||
cursor: col-resize;
|
||||
-webkit-appearance: none;
|
||||
-moz-apperance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid black;
|
||||
background-color: red;
|
||||
-webkit-box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
|
||||
box-shadow: 0px 0px 3px 0px rgba(4, 4, 4, 0.4);
|
||||
background-color: #424242;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#212121));
|
||||
background-image: -webkit-linear-gradient(top, #424242, #212121);
|
||||
background-image: -moz-linear-gradient(top, #424242, #212121);
|
||||
background-image: -o-linear-gradient(top, #424242, #212121);
|
||||
background-image: -ms-linear-gradient(top, #424242, #212121);
|
||||
background-image: linear-gradient(top, #424242, #212121);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#424242', EndColorStr='#212121');
|
||||
}
|
||||
/*
|
||||
* =========================================================
|
||||
* =========================================================
|
||||
* ColorPicker
|
||||
* =========================================================
|
||||
* =========================================================
|
||||
*
|
||||
*/
|
||||
.ColorPicker {
|
||||
/*
|
||||
border: 1px solid rgba(0,0,0,0.5);
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#333), color-stop(0.1, #111), to(#000000));
|
||||
box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.35);
|
||||
color:#AAA;
|
||||
*/
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
color: #050505;
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-family: 'arial', helvetica, sans-serif;
|
||||
font-size: 20px;
|
||||
padding: 7px 8px 20px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 700px;
|
||||
width: 229px;
|
||||
z-index: 100;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
|
||||
box-shadow: inset 0px 0px 5px 0px rgba(4, 4, 4, 0.5);
|
||||
background-color: rgba(214, 214, 215, 0.85);
|
||||
/*
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(214, 214, 214)), to(rgb(235, 235, 235)));
|
||||
background-image: -webkit-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
|
||||
background-image: -moz-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
|
||||
background-image: -o-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
|
||||
background-image: -ms-linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
|
||||
background-image: linear-gradient(top, rgb(214, 214, 214), rgb(235, 235, 235));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#d6d6d6', EndColorStr='#ebebeb');
|
||||
*/
|
||||
}
|
||||
.ColorPicker br {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ColorPicker input.hexInput:hover,
|
||||
.ColorPicker input.hexInput:focus {
|
||||
color: #aa1212;
|
||||
}
|
||||
.ColorPicker input.hexInput {
|
||||
-webkit-transition-property: color;
|
||||
-webkit-transition-duration: .5s;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
font-family: courier,monospace;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
float: left;
|
||||
color: #050505;
|
||||
cursor: text;
|
||||
}
|
||||
.ColorPicker div.hexBox {
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 2px;
|
||||
background: #FFF;
|
||||
float: left;
|
||||
font-size: 1px;
|
||||
height: 20px;
|
||||
margin: 0 5px 0 2px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ColorPicker div.hexBox div {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
.ColorPicker div.hexClose {
|
||||
display: none;
|
||||
/*
|
||||
-webkit-transition-property: color, text-shadow;
|
||||
-webkit-transition-duration: .5s;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
color:#FFF;
|
||||
cursor:pointer;
|
||||
float:right;
|
||||
padding: 0 5px;
|
||||
margin:0 4px 3px;
|
||||
user-select:none;
|
||||
-webkit-user-select: none;
|
||||
*/
|
||||
}
|
||||
.ColorPicker div.hexClose:hover {
|
||||
text-shadow: 0 0 20px #fff;
|
||||
color: #FF1100;
|
||||
}
|
||||
2
src/lib/inlet.min.js
vendored
Normal file
2
src/lib/inlet.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -173,8 +173,13 @@
|
||||
toggleSavedItemsPane();
|
||||
}
|
||||
|
||||
function toggleSavedItemsPane() {
|
||||
savedItemsPane.classList.toggle('is-open');
|
||||
function toggleSavedItemsPane(shouldOpen) {
|
||||
if (shouldOpen === false) {
|
||||
savedItemsPane.classList.remove('is-open');
|
||||
} else {
|
||||
savedItemsPane.classList.toggle('is-open');
|
||||
}
|
||||
document.body.classList[savedItemsPane.classList.contains('is-open') ? 'add' : 'remove']('overlay-visible');
|
||||
}
|
||||
function openSavedItemsPane() {
|
||||
chrome.storage.local.get('items', function (result) {
|
||||
@ -501,10 +506,12 @@
|
||||
mode: 'css',
|
||||
gutters: [ 'error-gutter' ]
|
||||
});
|
||||
Inlet(editur.cm.css);
|
||||
editur.cm.js = initEditor(jsCode, {
|
||||
mode: 'javascript',
|
||||
gutters: [ 'error-gutter' ]
|
||||
});
|
||||
Inlet(editur.cm.js);
|
||||
|
||||
function init () {
|
||||
var lastCode;
|
||||
@ -601,6 +608,7 @@
|
||||
if (typeof e.target.className === 'string' && e.target.className.indexOf('modal-overlay') !== -1) {
|
||||
helpModal.classList.remove('is-modal-visible');
|
||||
notificationsModal.classList.remove('is-modal-visible');
|
||||
toggleSavedItemsPane(false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user