CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-05-19 12:12:36 +12:00
Code Issues Projects Releases Wiki Activity

Fixed array list UI

Browse source
This commit is contained in:
Eldad Fux 2020-04-29 11:36:55 +03:00
parent bb054aebea
commit acab36f30a
13 changed files with 184 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/init.php
View file

@ -32,7 +32,7 @@ const APP_EMAIL_SECURITY = 'security@localhost.test'; // Default security email
const APP_USERAGENT = APP_NAME.'-Server v%s. Please report abuse at %s';
const APP_MODE_ADMIN = 'admin';
const APP_PAGING_LIMIT = 15;
const APP_CACHE_BUSTER = 104;
const APP_CACHE_BUSTER = 113;
const APP_VERSION_STABLE = '0.5.3';
const APP_STORAGE_UPLOADS = '/storage/uploads';
const APP_STORAGE_CACHE = '/storage/cache';

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

@ -90,7 +90,7 @@
<tr data-ls-loop="project-collection.rules" data-ls-as="rule">
<td data-ls-attrs="data-title={{rule.label}}:" class="text-size-small text-height-small">
<a data-ls-attrs="href=/console/database/document?id={{node.$id}}&collection={{router.params.id}}&project={{router.params.project}}">
<span data-ls-if="{{rule.type}} !== 'document' && {{rule.type}} !== 'fileId'" data-ls-bind="{{node|documentLabel}}"></span>
<span data-ls-if="{{rule.type}} !== 'document' && {{rule.type}} !== 'fileId'" data-ls-bind="{{node|documentLabel}}" data-ls-attrs="title={{node|documentLabel}}"></span>
<span data-ls-if="{{rule.type}} == 'document' && {{rule.array}}">[...]</span>
<span data-ls-if="{{rule.type}} == 'document' && !{{rule.array}}">{...}</span>
<img data-ls-if="{{rule.type}} == 'fileId' && !{{rule.array}} && {{node|documentLabel|isEmpty}}" src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{node|documentLabel}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="avatar" width="30" height="30" loading="lazy" />

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

@ -16,11 +16,27 @@ $collections = [];
$type = (isset($rule['type'])) ? $rule['type'] : '';
$list = (isset($rule['list'])) ? $rule['list'] : false;
$array = (isset($rule['array'])) ? $rule['array'] : false;
if($type !== 'document') {
continue;
}
?>
<?php if($type !== 'document' && $array): ?>
<form class="margin-bottom-no"
data-service="container.path"
data-event="collection-child-<?php echo $this->escape($namespace.'.'.$key); ?>"
data-scope="window.ls"
data-success="reset">
<input type="hidden" name="path" value="<?php echo $this->escape($namespace.'.'.$key); ?>" />
<input type="hidden" name="type" value="append" />
<input type="hidden" name="value" value="" />
</form>
<?php endif; ?>
<?php if($type !== 'document'): ?>
<?php continue; ?>
<?php endif; ?>
<?php foreach($list as $item):
if($item === $collection->getId()) {
continue; // Do not allow rec recrusion
@ -37,9 +53,6 @@ $collections = [];
$collections[$childCollection->getId()] = $childCollection->getAttribute('name');
?>
<form class="margin-bottom-no"
data-analytics-event="submit"
data-analytics-category="console"
data-analytics-label="Added Child Document"
data-service="container.path"
data-event="collection-child-<?php echo $this->escape($namespace.'.'.$key); ?>-<?php echo $this->escape($childCollection->getId()); ?>"
data-scope="window.ls"
@ -254,7 +267,7 @@ $collections = [];
</div>
</div>
<div data-ui-modal class="modal width-large box close" data-button-hide="on" data-open-event="open-file-serach" data-close-event="none">
<div data-ui-modal class="modal sticky-footer width-large box close" data-button-hide="on" data-open-event="open-file-serach" data-close-event="none">
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
<h2>File Search</h2>
@ -291,23 +304,28 @@ $collections = [];
<div data-ls-if="0 != {{project-files.sum}}">
<div>
<table class="vertical margin-bottom">
<table class="vertical">
<thead>
<tr>
<th width="40"></th>
<th width="40"></th>
<th>Filename</th>
<th width="160">Type</th>
<th width="100">Type</th>
<th width="100">Size</th>
<th width="100">Created</th>
<th width="80">Created</th>
<!-- <th width="30"></th> -->
</tr>
</thead>
<tbody data-ls-loop="project-files.files" data-ls-as="file">
<tr>
<td class="hide">
<input type="radio" name="selected" data-ls-attrs="value={{file.$id}}" data-ls-bind="{{search.selected}}" />
</td>
<td class="hide">
<img src="" data-ls-attrs="src=//{{env.DOMAIN}}/v1/storage/files/{{file.$id}}/preview?width=65&height=65&project={{router.params.project}}&mode=admin" class="pull-start avatar" width="30" height="30" loading="lazy" />
</td>
<td data-title="Name: " class="text-one-liner">
<span data-ls-bind="{{file.name}}" class="text-fade text-size-small"></span>
<span data-ls-bind="{{file.name}}" data-ls-attrs="title={{file.name}}" class="text-fade text-size-small"></span>
</td>
<td data-title="Type: ">
<span data-ls-bind="{{file.mimeType}}" class="text-fade text-size-small"></span>
@ -318,6 +336,9 @@ $collections = [];
<td data-title="Created: ">
<span class="text-fade text-size-small" data-ls-bind="{{file.dateCreated|date-text}}"></span>
</td>
<!-- <td class="hide">
<a target="_blank" data-ls-attrs="href="><i class="icon-link-ext"></i></a>
</td> -->
</tr>
</tbody>
</table>
@ -325,33 +346,53 @@ $collections = [];
</div>
</div>
<div class="clear text-align-center paging">
<form
data-service="storage.listFiles"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="DESC"
data-scope="sdk"
data-name="project-files"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-sum="{{project-files.sum}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
</form>
<footer>
<div class="clear text-align-center paging pull-end">
<form
data-service="storage.listFiles"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="DESC"
data-scope="sdk"
data-name="project-files"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-back data-offset="{{router.params.offset}}" data-sum="{{project-files.sum}}" class="margin-end round small" aria-label="Back"><i class="icon-left-open"></i></button>
</form>
<span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-files.sum|pageTotal}}"></span>
<span data-ls-bind="{{router.params.offset|pageCurrent}} / {{project-files.sum|pageTotal}}"></span>
<form
data-service="storage.listFiles"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="DESC"
data-scope="sdk"
data-name="project-files"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-sum="{{project-files.sum}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
<form
data-service="storage.listFiles"
data-event="submit"
data-param-search="{{router.params.search}}"
data-param-limit="<?php echo APP_PAGING_LIMIT; ?>"
data-param-order-type="DESC"
data-scope="sdk"
data-name="project-files"
data-success="state"
data-success-param-state-keys="search,offset">
<button name="offset" data-paging-next data-offset="{{router.params.offset}}" data-sum="{{project-files.sum}}" class="margin-start round small" aria-label="Next"><i class="icon-right-open"></i></button>
</form>
</div>
<form data-service="container.path"
data-param-path="search.selected"
data-param-type="assign"
data-param-value="{{file.$id}}"
data-success="trigger"
data-success-param-trigger-events="modal-close"
data-event="click"
data-scope="window.ls">
<input type="hidden" name="path" data-ls-bind="{{search.path}}" />
<input type="hidden" name="type" value="assign" />
<input type="hidden" name="value" data-ls-bind="{{search.selected}}" />
<button data-ls-if="({{search.selected}})" type="button" class=""> &nbsp; Select &nbsp; </button> &nbsp;
<button data-ls-if="(!{{search.selected}})" type="button" class="" disabled> &nbsp; Select &nbsp; </button> &nbsp;
</form>
</div>
<button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</footer>
</div>

1
app/views/console/database/form.phtml
View file

@ -6,6 +6,7 @@ $collection = $this->getParam('collection', null);
$collections = $this->getParam('collections', []);
$rules = $collection->getAttribute('rules', []);
$key = $this->getParam('key', null);
$type = $this->getParam('type', null);
$parent = $this->getParam('parent', true);
$namespace = $this->getParam('namespace', 'project-document');
$array = $this->getParam('array', false);

12
app/views/console/database/rules/array.phtml
View file

@ -18,10 +18,10 @@ if($type === 'document') {
<hr />
<ul <?php if($type !== 'document'): ?>data-forms-add="New" <?php endif; ?>data-ls-loop="<?php echo $this->escape($namespace); ?>" data-ls-as="node" class="sortable">
<ul data-ls-loop="<?php echo $this->escape($namespace); ?>" data-ls-as="node" class="sortable numbers">
<li data-forms-move-up data-forms-move-down>
<div class="row thin responsive margin-bottom-small force-reverse">
<div class="col span-1">
<div class="col span-2">
<div class="drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-icon="icon-cog" data-button-selector="[data-toggler]" data-button-class="round dark small margin-bottom-small margin-top-tiny pull-end" data-blur="1" tabindex="1">
<ul class="arrow-end margin-top margin-end-negative-small">
<li data-move-up>
@ -36,7 +36,7 @@ if($type === 'document') {
</ul>
</div>
</div>
<div class="col span-11">
<div class="col span-10">
<?php echo $comp->render(); ?>
</div>
</div>
@ -46,7 +46,7 @@ if($type === 'document') {
</ul>
<?php if(!empty($list) && $type === 'document'): ?>
<div class="drop-list" data-ls-ui-open="" data-button-text="Add" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="reverse" data-blur="1" tabindex="1">
<div class="drop-list" data-ls-ui-open="" data-button-text="Add" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="reverse margin-bottom-small" data-blur="1" tabindex="1">
<ul>
<?php foreach($list as $item):
$name = (isset($collections[$item])) ? $collections[$item] : '';
@ -57,4 +57,6 @@ if($type === 'document') {
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php else: ?>
<button type="button" data-ls-ui-trigger="collection-child-<?php echo $this->escape($namespace); ?>" class="reverse margin-bottom-small">Add</button>
<?php endif; ?>

2
app/views/console/database/rules/url.phtml
View file

@ -3,4 +3,4 @@ $key = $this->getParam('key', '');
$required = $this->getParam('required', '');
$namespace = $this->getParam('namespace', '');
?>
<input name="<?php echo $this->escape($key); ?>" type="url" autocomplete="off" data-ls-bind="{{<?php echo $this->escape($namespace); ?>}}" placeholder="https://example.com"<?php if($required): ?> required<?php endif; ?> class="margin-bottom-no">
<input name="<?php echo $this->escape($key); ?>" type="url" autocomplete="off" data-ls-bind="{{<?php echo $this->escape($namespace); ?>}}" placeholder="https://example.com"<?php if($required): ?> required<?php endif; ?> />

1
gulpfile.js
View file

@ -23,6 +23,7 @@ const configApp = {
'public/scripts/services/form.js',
'public/scripts/services/markdown.js',
'public/scripts/services/sdk.js',
'public/scripts/services/search.js',
'public/scripts/services/timezone.js',
'public/scripts/routes.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

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

@ -79,8 +79,35 @@
border-bottom: solid 1px #efefef;
}
ul.sortable {
ul.numbers {
> li {
position: relative;
&::after {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
font-weight: 500;
border-radius: 50%;
background: var(--config-color-focus);
color: var(--config-color-background);
counter-increment: section;
content: counter(section);
text-align: center;
position: absolute;
top: 2px;
.func-start(-45px);
}
}
}
ul.sortable {
counter-reset: section;
> li {
[data-move-up].round, [data-move-down].round, [data-remove].round {
background: var(--config-color-focus);
color: var(--config-color-background-fade);
@ -92,7 +119,6 @@
padding: 0;
.func-margin-end(5px);
&:disabled {
display: none;
}

23
public/styles/comps/modal.less
View file

@ -20,6 +20,7 @@
overflow: auto;
display: none;
position: fixed;
transform: translate3d(0,0,0);
width: 100%;
max-height: 90%;
max-width: 640px;
@ -45,13 +46,13 @@
}
&.height-tiny {
form {
> form {
height: 100px;
}
}
&.height-small {
form {
> form {
height: 220px;
}
}
@ -94,7 +95,7 @@
line-height: 35px;
}
form, .main {
> form, .main {
position: relative;
border-top: solid 1px var(--config-border-color);
padding: 30px 30px 0 30px;
@ -156,7 +157,19 @@
}
}
.sticky-footer {
&.sticky-footer {
footer {
position: sticky;
bottom: -30px;
background: var(--config-color-background-fade-super);
height: 50px;
z-index: 1;
padding: 30px;
box-shadow: 0 0 1px rgba(0,0,0,.05);
form {
display: inline-block;
}
}
}
}

51
public/styles/forms.less
View file

@ -160,7 +160,8 @@ button,
&:disabled,
.disabled {
color: var(--config-color-normal);
background: var(--config-color-fade);
background: var(--config-color-background-dark);
opacity: .6;
cursor: default;
}
@ -261,7 +262,7 @@ select {
}
&:disabled {
color: var(--config-color-normal);
color: var(--config-color-fade);
background: var(--config-color-fade-super);
opacity: 1!important;
}
@ -543,7 +544,7 @@ input[type=checkbox], input[type=radio] {
display: block;
width: 20px;
height: 20px;
background: var(--config-color-background-input);
background: var(--config-color-background-fade);
top: -5px;
border-radius: 50%;
position: absolute;
@ -560,6 +561,19 @@ input[type=checkbox], input[type=radio] {
color: var(--config-color-background-fade);
background: var(--config-color-focus);
}
&[type=radio] {
&:checked:after {
//content: '●';
content: '';
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--config-color-background-fade);
border: solid 8px var(--config-color-focus);
}
}
&:focus {
outline: none;
@ -941,7 +955,7 @@ hr {
.pull-start;
.margin-end;
.margin-bottom-small;
background: #f1f1f1;
background: var(--config-color-background-fade-super);
width: 150px;
height: 150px;
line-height: 148px;
@ -950,7 +964,7 @@ hr {
overflow: hidden;
position: relative;
cursor: pointer;
border: solid 10px #f1f1f1;
border: solid 2px var(--config-color-background-dark);
&:hover:before {
background: var(--config-color-focus);
@ -964,8 +978,8 @@ hr {
width: 20px;
height: 20px;
display: block;
top: 5px;
.func-end(5px);
top: 8px;
.func-end(8px);
text-align: center;
line-height: 20px;
vertical-align: middle;
@ -1094,6 +1108,20 @@ ol {
padding: 0;
.clear;
&:first-child {
border-radius: 10px 10px 0 0;
}
&:last-child {
border-radius: 0 0 10px 10px;
}
&:first-child:hover, &:last-child:hover {
background: var(--config-color-fade-super);
border-color: transparent;
}
a,
.link, button.link {
display: block;
@ -1101,19 +1129,14 @@ ol {
height: auto;
line-height: 30px;
display: inline-block;
padding: 10px 15px;
padding: 10px 15px!important;
color: inherit;
font-size: 14px;
border: none;
max-width: 260px;
cursor: pointer;
width: ~"calc(100% - 30px)";
text-align: @config-start;
&:hover {
background: var(--config-color-fade-super);
border-color: transparent;
}
box-sizing: content-box;
}
&.disabled a:hover, &.disabled .link:hover {

8
public/styles/tabels.less
View file

@ -59,6 +59,14 @@ table {
background: var(--config-color-background-fade-super);
}
tr.selected {
background: var(--config-note-background);
td, td span {
font-weight: 500;
}
}
th {
text-align: @config-start;
font-weight: normal;