CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-05-29 17:09:48 +12:00
Code Issues Projects Releases Wiki Activity

DB UI - Work in progress

Browse source
This commit is contained in:
Eldad Fux 2020-04-03 22:27:18 +03:00
parent 0ab706a443
commit 01c93b2d0a
9 changed files with 148 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
app/views/console/database/collection.phtml
View file

@ -211,7 +211,7 @@
</div>
</div>
</div>
<label data-ls-attrs="for=rule-type-{{rule.$id}}">Rule Type</label>
<select data-ls-attrs="id=rule-type-{{rule.$id}}" name="type" required data-ls-bind="{{rule.type}}">
@ -225,13 +225,9 @@
<option value="email">Email</option>
<option value="url">URL</option>
<option value="ip">IP</option>
<option value="document">Document</option>
</optgroup>
</select>
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-{{rule.$id}}">Default</label>
<input name="default" type="text" data-ls-bind="{{rule.default}}" />
</div>
<div class="margin-bottom">
<input name="required" type="hidden" data-forms-switch data-ls-bind="{{rule.required}}" data-cast-to="boolean" /> &nbsp; Required <span class="tooltip" data-tooltip="Mark whether this is a required attribute"><i class="icon-info-circled"></i></span>
@ -240,6 +236,8 @@
<div class="margin-bottom">
<input name="array" type="hidden" data-forms-switch data-ls-bind="{{rule.array}}" data-cast-to="boolean" /> &nbsp; Array <span class="tooltip" data-tooltip="Mark whether this attribute should act as an array"><i class="icon-info-circled"></i></span>
</div>
<div data-ls-template="template-validation-{{rule.type}}" data-type="script" class="margin-bottom"></div>
</fieldset>
<button type="button" data-remove="" class="reverse danger margin-bottom">Remove</button>
@ -304,7 +302,7 @@
<div data-ui-modal class="box modal close" data-button-alias="none" data-open-event="add-rule">
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
<h1>Add Attribute</h1>
<h1>Add Rule</h1>
<form
data-analytics-event="submit"
@ -352,9 +350,15 @@
<option value="email">Email</option>
<option value="url">URL</option>
<option value="ip">IP</option>
<option value="document">Document</option>
</optgroup>
</select>
<input name="default" type="hidden" value="" />
<input name="required" type="hidden" value="false" data-cast-to="boolean" />
<input name="array" type="hidden" value="false" data-cast-to="boolean" />
<!--
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-new">Default</label>
<input name="default" type="text" />
@ -367,7 +371,7 @@
<div class="margin-bottom">
<input name="array" type="hidden" data-forms-switch data-cast-to="boolean" /> Array <span class="tooltip" data-tooltip="Mark whether this attribute should act as an array"><i class="icon-info-circled"></i></span>
</div>
</div> -->
</fieldset>
@ -379,4 +383,49 @@
</li>
</ul>
</div>
</div>
<script type="text/html" id="template-validation-text">
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-{{rule.$id}}">Default Value</label>
<input name="default" type="text" data-ls-bind="{{rule.default}}" />
</div>
</script>
<script type="text/html" id="template-validation-numeric">
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-{{rule.$id}}">Default Value</label>
<input name="default" type="number" data-ls-bind="{{rule.default}}" data-cast-to="integer" placeholder="0" />
</div>
</script>
<script type="text/html" id="template-validation-boolean">
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-{{rule.$id}}">Default Value</label>
<input name="default" data-ls-bind="{{rule.default}}" type="hidden" data-forms-switch data-cast-to="boolean" />
</div>
</script>
<script type="text/html" id="template-validation-text">
<div class="margin-bottom">
<label data-ls-attrs="for=rule-default-{{rule.$id}}">Default Value</label>
<input name="default" type="text" data-ls-bind="{{rule.default}}" />
</div>
</script>
<script type="text/html" id="template-validation-document">
<label data-ls-attrs="for=rule-list-{{rule.$id}}" class="margin-bottom">Allowed Collections</label>
<div data-ls-loop="project-collections.collections" data-ls-as="project" class="tiles cell-3 margin-bottom-negative" style="visibility: hidden">
<div class="margin-bottom">
<input type="checkbox" name="list" data-ls-attrs="value={{project.$id}}" data-ls-bind="{{rule.list}}" /> <span data-ls-bind="{{project.name}}"></span>
</div>
</div>
</script>
<div class="margin-top"
data-service="database.listCollections"
data-event="load,database.createCollection,database.updateCollection,database.deleteCollection"
data-scope="sdk"
data-name="project-collections">
</div>

77
app/views/console/database/document.phtml
View file

@ -166,29 +166,85 @@ $list = [
[
'key' => '',
'bind' => ' data-ls-bind="{{project-document|documentLabel}}"',
'bind' => '{{project-document|documentLabel}}',
],
[
'key' => '-array',
'bind' => ' data-ls-bind="{{node}}"',
'bind' => '{{node}}',
],
];
?>
<?php foreach($list as $mode): ?>
<script type="text/html" id="template-string-form<?php echo $mode['key']; ?>">
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off"<?php echo $mode['bind']; ?> data-forms-text-direction data-forms-text-count />
<script type="text/html" id="template-document-form<?php echo $mode['key']; ?>">
<div class="info margin-bottom-small">
<div class="">document link here</div>
</div>
<button type="button" class="reverse margin-end-small">Add</button>
<button type="button" class="reverse">Search</button>
</script>
<script type="text/html" id="xtemplate-document-form<?php echo $mode['key']; ?>">
<fieldset data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" data-cast-to="object">
<input name="$id" type="hidden" data-ls-bind="{{project-document.$id}}" />
<input name="$collection" type="hidden" data-ls-bind="{{project-collection.$id}}" />
<ul data-ls-loop="project-collection.rules" data-ls-as="rule">
<li>
<label class="margin-bottom-no">
<span data-ls-bind="{{rule.label}}"></span>
<span data-ls-if="{{rule.array}}.toString() == 'true'">
<span class="text-size-small text-fade">&nbsp;&nbsp;(Array)</span>
</span>
</label>
<div data-ls-if="{{rule.required}}.toString() == 'true'" class="margin-bottom-small">
<span class="text-size-xs text-danger text-fade">required</span>
</div>
<div data-ls-if="({{rule.required}}.toString() == 'false')" class="margin-bottom-small">
<span class="text-size-xs text-fade">optional</span>
</div>
<div data-ls-if="({{rule.array}}.toString() == 'false')">
<div data-ls-template="template-{{rule.type}}-form" data-type="script" class="margin-bottom"></div>
</div>
<div data-ls-if="({{rule.array}}.toString() == 'true')">
<div data-ls-template="template-array-form" data-type="script" class="margin-bottom"></div>
</div>
</li>
</ul>
</fieldset>
</script>
<script type="text/html" id="template-text-form<?php echo $mode['key']; ?>">
<textarea data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off"<?php echo $mode['bind']; ?> data-forms-text-direction data-forms-text-count></textarea>
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-forms-text-direction data-forms-text-count />
</script>
<script type="text/html" id="template-string-form<?php echo $mode['key']; ?>">
<textarea data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="text" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-forms-text-direction data-forms-text-count></textarea>
</script>
<script type="text/html" id="template-numeric-form<?php echo $mode['key']; ?>">
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="number" autocomplete="off"<?php echo $mode['bind']; ?> data-cast-to="integer" />
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="number" autocomplete="off" data-ls-bind="<?php echo $mode['bind']; ?>" data-cast-to="integer" />
</script>
<script type="text/html" id="template-boolean-form<?php echo $mode['key']; ?>">
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="hidden" data-forms-switch<?php echo $mode['bind']; ?> data-cast-to="boolean" />
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="hidden" data-forms-switch data-ls-bind="<?php echo $mode['bind']; ?>" data-cast-to="boolean" />
</script>
<script type="text/html" id="template-url-form<?php echo $mode['key']; ?>">
<input data-ls-attrs="name={{rule.key}},{{rule.required|documentRequired}}" type="url" data-ls-bind="<?php echo $mode['bind']; ?>" />
<div class="preview" data-ls-if="(<?php echo $mode['bind']; ?>.toString() !== '')">
</div>
</script>
<?php endforeach; ?>
@ -220,4 +276,11 @@ $list = [
</li>
</ul>
</script>
</script>
<div class="margin-top"
data-service="database.listCollections"
data-event="load,database.createCollection,database.updateCollection,database.deleteCollection"
data-scope="sdk"
data-name="project-collections">
</div>

8
app/views/console/home/index.phtml
View file

@ -140,16 +140,16 @@ $graph = $this->getParam('graph', false);
<div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" data-blur="1" tabindex="1">
<ul>
<li>
<div class="link web-new"><img src="/images/clients/web.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Web Platform Logo" class="avatar xs margin-end" /> New Web App</div>
<button class="link web-new"><img src="/images/clients/web.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Web Platform Logo" class="avatar xs margin-end" /> New Web App</button>
</li>
<li class="disabled">
<div class="link ios-new"><img src="/images/clients/ios.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="iOS Platform Logo" class="avatar xs margin-end" /> New iOS App</div>
<button class="link ios-new"><img src="/images/clients/ios.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="iOS Platform Logo" class="avatar xs margin-end" /> New iOS App</button>
</li>
<li class="disabled">
<div class="link android-new"><img src="/images/clients/android.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Android Platform Logo" class="avatar xs margin-end" /> New Android App</div>
<button class="link android-new"><img src="/images/clients/android.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Android Platform Logo" class="avatar xs margin-end" /> New Android App</button>
</li>
<li class="disabled">
<div class="link unity-new"><img src="/images/clients/unity.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Unity Platform Logo" class="avatar xs margin-end" /> New Unity Game</div>
<button class="link unity-new"><img src="/images/clients/unity.png?v=<?php echo APP_CACHE_BUSTER; ?>" alt="Unity Platform Logo" class="avatar xs margin-end" /> New Unity Game</button>
</li>
</ul>
</div>

3
app/views/layouts/default.phtml
View file

@ -125,7 +125,8 @@ if(!empty($platforms)) {
<ul data-ls-loop="alerts.list" data-ls-as="alert">
<li data-forms-remove>
<div data-ls-attrs="class={{alert.class}} message">
<i class="icon-cancel" data-remove></i>
<i class="icon-cancel" data-forms-run="alert.remove"></i>
<span data-ls-bind="{{alert.text}}"></span>
<span data-ls-if="undefined !== {{alert.link}}">

1
gulpfile.js
View file

@ -45,6 +45,7 @@ const configApp = {
'public/scripts/views/forms/password-meter.js',
'public/scripts/views/forms/pell.js',
'public/scripts/views/forms/remove.js',
'public/scripts/views/forms/run.js',
'public/scripts/views/forms/switch.js',
'public/scripts/views/forms/tags.js',
'public/scripts/views/forms/text-count.js',

2
public/dist/styles/default-ltr.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-rtl.css vendored
View file

File diff suppressed because one or more lines are too long

9
public/styles/comps/box.less
View file

@ -213,6 +213,15 @@
}
}
.info {
margin: 0 -30px;
padding: 20px 30px;
background: var(--config-modal-note-background);
color: var(--config-modal-note-color);
border-top: solid 1px var(--config-modal-note-border);
border-bottom: solid 1px var(--config-modal-note-border);
}
@media @phones, @tablets {
//padding: 20px;
}

4
public/styles/grid.less
View file

@ -284,10 +284,10 @@
.clear;
position: relative;
li {
> * {
.margin-end-large;
.pull-start;
width: ~"calc(33% - 30.333px)";
width: ~"calc(33.3333% - 33.3333px)";
.photo-title {
width: ~"calc(100% + 30px)";