Skip to content

Commit

Permalink
remove page
Browse files Browse the repository at this point in the history 
fix default values
  • Loading branch information
@A1Gard
A1Gard committed May 17, 2021
1 parent 60b58bd commit be0b825
Show file tree
Hide file tree
Showing 7 changed files with 178 additions and 107 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "anubias",
"version": "0.0.3",
"version": "0.1.0",
"private": true,
"description": "anubias desktop application",
"author": {
Expand Down
4 changes: 4 additions & 0 deletions src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,8 @@ label{
}
.nav-wrapper li.disabled:hover{
background: transparent !important;
}

.ajs-dialog{
color: black;
}
4 changes: 3 additions & 1 deletion src/assets/json/defaults/defPage.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"type": "preloader",
"name": "page",
"scrollable": true,
"safeArea": false,
"bgColor": "Colors.transparent",
"padding": "15",
"align": "center"
"align": "center",
"children": []
}
1 change: 1 addition & 0 deletions src/components/elements/PageElement.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default {
text-align: center;
padding: 10px;
min-width: 85px;
position: relative;
}
#page:hover{
Expand Down
198 changes: 103 additions & 95 deletions src/components/elements/PropertyElement.vue
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,98 @@
<template>
<div id="property">
<table>
<!-- <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="k">
{{k}}
</label>
</th>
<td>
<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>
<!-- <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>-->
<template v-for="(p,k) in properties" >

<tr v-if="k !== 'type' || k !== 'children'" :key="k">
<th>
<label :for="k">
{{ k }}
</label>
</th>
<td>
<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>
<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>
<div v-else>
<input type="text" :id="k" v-model="properties[k]">
</div>
</td>
</tr>
</template>

</table>
</div>
</template>
Expand All @@ -95,27 +102,27 @@ export default {
name: "PropertyElement",
mounted() {
},
data:function () {
data: function () {
return {
colors: window.colors,
}
},
props:{
props: {
properties: {
default: function () {
return {}
},
type: Object
}
},methods:{
nameCheck:function (e,isBlur) {
}, methods: {
nameCheck: function (e, isBlur) {
let name = e.target.value;
if (!/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)){
if (!/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)) {
e.target.classList.add('invalid');
}else {
} else {
e.target.classList.remove('invalid');
}
if(isBlur){
if (isBlur) {
e.target.focus();
}
}
Expand All @@ -124,9 +131,10 @@ export default {
</script>

<style scoped>
#property{
#property {
overflow-x: hidden;
}
table {
width: 100%;
overflow: hidden;
Expand All @@ -139,14 +147,14 @@ th {
border-bottom: 0;
font-weight: normal;
font-size: 12px;
padding: 0 ;
padding: 0;
margin: 0;
}
td {
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 0;
padding: 0 ;
padding: 0;
margin: 0;
}
Expand Down Expand Up @@ -183,7 +191,7 @@ input[type='checkbox'] {
width: auto !important;
}
label{
label {
display: block;
}
</style>
15 changes: 15 additions & 0 deletions src/components/elements/Simulator.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<div>
simulate
</div>
</template>

<script>
export default {
name: "Simulator"
}
</script>

<style scoped>
</style>
Loading

0 comments on commit be0b825

Please sign in to comment.