Skip to content

Commit

Permalink
active property for page
Browse files Browse the repository at this point in the history 
color fix
defaults fix
  • Loading branch information
@A1Gard
A1Gard committed May 17, 2021
1 parent 2b589fe commit 60b58bd
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 74 deletions.
52 changes: 31 additions & 21 deletions src/assets/json/colors.json
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,117 @@
{
"data": [
{
"name": "Pink",
"name": "default",
"value": "",
"color": "#ffffff"
},
{
"name": "transparent",
"value": "Colors.transparent",
"color": "transparent"
},
{
"name": "pink",
"value": "Colors.pink",
"color": "#e91e63"
},
{
"name": "Red",
"name": "red",
"value": "Colors.red",
"color": "#f44336"
},
{
"name": "DeepOrange",
"name": "deepOrange",
"value": "Colors.deepOrange",
"color": "#ff5722"
},
{
"name": "Orange",
"name": "orange",
"value": "Colors.orange",
"color": "#ff9800"
},
{
"name": "Amber",
"name": "amber",
"value": "Colors.amber",
"color": "#ffc107"
},
{
"name": "Yellow",
"name": "yellow",
"value": "Colors.yellow",
"color": "#ffeb3b"
},
{
"name": "Lime",
"name": "lime",
"value": "Colors.lime",
"color": "#cddc39"
},
{
"name": "LightGreen",
"name": "lightGreen",
"value": "Colors.lightGreen",
"color": "#8bc34a"
},
{
"name": "Green",
"name": "green",
"value": "Colors.green",
"color": "#4caf50"
},
{
"name": "Teal",
"name": "teal",
"value": "Colors.teal",
"color": "#009688"
},
{
"name": "Cyan",
"name": "cyan",
"value": "Colors.cyan",
"color": "#00bcd4"
},
{
"name": "LightBlue",
"name": "lightBlue",
"value": "Colors.lightBlue",
"color": "#03a9f4"
},
{
"name": "Blue",
"name": "blue",
"value": "Colors.blue",
"color": "#2196f3"
},
{
"name": "Indigo",
"name": "indigo",
"value": "Colors.indigo",
"color": "#3f51b5"
},
{
"name": "Purple",
"name": "purple",
"value": "Colors.purple",
"color": "#9c27b0"
},
{
"name": "DeepPurple",
"name": "deepPurple",
"value": "Colors.deepPurple",
"color": "#673ab7"
},
{
"name": "BlueGrey",
"name": "blueGrey",
"value": "Colors.blueGrey",
"color": "#607d8b"
},
{
"name": "Brown",
"name": "brown",
"value": "Colors.brown",
"color": "#795548"
},
{
"name": "Grey",
"name": "grey",
"value": "Colors.grey",
"color": "#9e9e9e"
},
{
"name": "Black",
"name": "black",
"value": "Colors.black",
"color": "#000000"
},
{
"name": "White",
"name": "white",
"value": "Colors.white",
"color": "#ffffff"
}
Expand Down
2 changes: 1 addition & 1 deletion src/assets/json/defaults/defPage.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "page",
"scrollable": true,
"safeArea": false,
"bgColor": "transparent",
"bgColor": "Colors.transparent",
"padding": "15",
"align": "center"
}
2 changes: 1 addition & 1 deletion src/assets/json/defaults/defPreloader.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
"align": "center",
"width": 50.0,
"height": 50.0,
"color": "appColor",
"color": "default",
"hide": false
}
154 changes: 109 additions & 45 deletions src/components/elements/PropertyElement.vue
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,89 @@
<template>
<div id="property">
<table>
<tr>
<!-- <tr>-->
<!-- <th>-->
<!-- <label for="p1">-->
<!-- Color-->
<!-- </label>-->
<!-- </th>-->
<!-- <td>-->
<!-- <input type="text" id="p1" value="red">-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>-->
<!-- <label for="p2">-->
<!-- Text-->
<!-- </label>-->
<!-- </th>-->
<!-- <td>-->
<!-- <input type="text" value="title text here" id="p2">-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>-->
<!-- <label for="p3">-->
<!-- Lock-->
<!-- </label>-->
<!-- </th>-->
<!-- <td>-->
<!-- <div class="switch">-->
<!-- <label>-->
<!-- <input type="checkbox">-->
<!-- <span class="lever"></span>-->
<!-- </label>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <th>-->
<!-- <label for="p4">-->
<!-- Align-->
<!-- </label>-->
<!-- </th>-->
<!-- <td>-->
<!-- <select id="p4">-->
<!-- <option value=""> left</option>-->
<!-- <option value=""> center</option>-->
<!-- <option value=""> right</option>-->
<!-- </select>-->
<!-- </td>-->
<!-- </tr>-->
<tr v-for="(p,k) in properties" :key="k" >
<th>
<label for="p1">
Color
<label :for="k">
{{k}}
</label>
</th>
<td>
<input type="text" id="p1" value="red">
</td>
</tr>
<tr>
<th>
<label for="p2">
Text
</label>
</th>
<td>
<input type="text" value="title text here" id="p2">
</td>
</tr>
<tr>
<th>
<label for="p3">
Lock
</label>
</th>
<td>
<div class="switch">
<label>
<input type="checkbox">
<span class="lever"></span>
</label>
<div v-if="k === 'hide' || k === 'safeArea' || k === 'scrollable'">
<div class="switch">
<label>
<input type="checkbox" v-model="properties[k]">
<span class="lever"></span>
</label>
</div>
</div>
<div v-else-if="k === 'name'">
<input type="text" @blur="nameCheck($event,true)" @keyup="nameCheck($event,false)" :id="k" v-model="properties[k]">
</div>
<div v-else-if="k === 'align'">
<select v-model="properties[k]" :id="k">
<option value="left"> left </option>
<option value="center"> center </option>
<option value="right"> right </option>
</select>
</div>
<div v-else-if="k.toLowerCase().indexOf('color') !== -1">
<select v-model="properties[k]" :id="k">
<option :value="cl.value" v-for="(cl,n) in colors" class="ui dropdown" v-bind:key="n"
:style="'background:'+cl.color + (['white','transparent','yellow','lime','grey','default'].indexOf(cl.name) > -1?';color:black;':'')"> {{cl.name}} </option>
</select>
</div>
<div v-else>
<input type="text" :id="k" v-model="properties[k]">
</div>
</td>
</tr>
<tr>
<th>
<label for="p4">
Align
</label>
</th>
<td>
<select id="p4">
<option value=""> left</option>
<option value=""> center</option>
<option value=""> right</option>
</select>
</td>
</tr>
</table>
Expand All @@ -57,15 +93,43 @@
<script>
export default {
name: "PropertyElement",
props:[
'props'
],
mounted() {
},
data:function () {
return {
colors: window.colors,
}
},
props:{
properties: {
default: function () {
return {}
},
type: Object
}
},methods:{
nameCheck:function (e,isBlur) {
let name = e.target.value;
if (!/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)){
e.target.classList.add('invalid');
}else {
e.target.classList.remove('invalid');
}
if(isBlur){
e.target.focus();
}
}
}
}
</script>

<style scoped>
#property{
overflow-x: hidden;
}
table {
width: 100%;
overflow: hidden;
}
th {
Expand Down
11 changes: 6 additions & 5 deletions src/components/pages/MainAppPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
<i class="fa fa-expand"></i>
</h2>
<div v-if="!isInitProject">
<property></property>
<property :properties="currentProperties"></property>
</div>
<div v-else class="text-center">
<img src="../../assets/img/logo.svg" class="logo-sm" alt="">
Expand All @@ -145,7 +145,7 @@
<div id="pages">
<div class="container">
<div v-if="!isInitProject">
<page v-for="(page,i) in data.pages" @click.native="changePage(i)" :title="page.name" :active="currentPage === i">
<page v-for="(page,i) in data.pages" @click.native="changePage(i)" :key="i" :title="page.name" :active="currentPage === i">
hello {{i}}
</page>
<i class="fa fa-plus-circle" id="page-add" @click="newPage"></i>
Expand Down Expand Up @@ -175,6 +175,7 @@ export default {
data: window.appData,
currentDisplay: "Nexus 5",
currentPage: 0,
currentProperties:{},
isInitProject: false,
display: {
name: 'Nexus 5',
Expand All @@ -193,9 +194,8 @@ export default {
try {
var $ = window.jQuery;
$("html").niceScroll();
$("#properties").niceScroll();
$("#mobile").niceScroll({touchbehavior: true,});
$("#elements").niceScroll();
$("#mobile").niceScroll({touchbehavior: true});
// $("#elements").niceScroll();
$('#main select').formSelect();
Expand Down Expand Up @@ -226,6 +226,7 @@ export default {
},
changePage:function (i) {
this.currentPage = i;
this.currentProperties = this.data.pages[i];
},
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/ProjectPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<label for="clr" class="active">Color</label>
<select id="clr" @change="changeColor" v-model="data.xColor">
<option :data-icon="'data:image/svg+xml;base64,'+color2base64svg(cl.color)" :value="cl.value" v-for="(cl,n) in colors" class="circle left" v-bind:key="n"
:style="'background:'+cl.color + (cl.name === 'Black'?';color:white;':'')"> {{cl.name}} </option>
:style="'background:'+cl.color + (cl.name === 'Black'?';color:white;':'')" :disabled="(['transparent','default'].indexOf(cl.name) > -1)" > {{cl.name}} </option>
</select>
</div>
<div class="input-field col s6">
Expand Down

0 comments on commit 60b58bd

Please sign in to comment.