CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-06-24 01:00:35 +12:00
Code Issues Projects Releases Wiki Activity

Adding links animation

Browse source
This commit is contained in:
AnatoleLucet 2020-06-09 16:43:24 +02:00
parent 48a3e063c6
commit 960136a823
22 changed files with 104 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/views/console/account/index.phtml
View file

@ -1,6 +1,6 @@
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Your Account</span>
@ -26,7 +26,7 @@
<br />
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small" target="_blank"><i class="icon-upload"></i> Upload</a>
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small link-animation-disabled" target="_blank"><i class="icon-upload"></i> Upload</a>
<br />
@ -317,4 +317,4 @@
</div>
</li>
</ul>
</div>
</div>

38
app/views/console/comps/header.phtml
View file

@ -1,5 +1,5 @@
<header class="clear">
<a href="/console" class="logo pull-start">
<a href="/console" class="logo pull-start link-animation-disabled">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a>
@ -34,10 +34,10 @@
data-failure-param-trigger-events="account.deleteSession">
<div class="console-back">
<a href="/console">Back to Console &nbsp;<i class="icon-right-open"></i></a>
<a href="/console" class="link-return-animation--end">Back to Console &nbsp;<i class="icon-right-open"></i></a>
</div>
<div class="account link pull-end clear">
<div class="account link link-animation-disabled pull-end clear">
<img src="" data-ls-attrs="src={{account|gravatar}}" alt="User Avatar" class="avatar margin-start pull-end" />
<span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
</div>
@ -45,10 +45,10 @@
<div class="console-index drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="account-button" data-blur="1" tabindex="1">
<ul class="margin-top-large arrow-end">
<li>
<a href="/console/account"><i class="icon-user"></i> &nbsp; Your Account</a>
<a href="/console/account" class="link-animation-disabled"><i class="icon-user"></i> &nbsp; Your Account</a>
</li>
<li>
<span class="link"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> &nbsp; Change Theme
<span class="link link-animation-disabled"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> &nbsp; Change Theme
<div class="pull-end switch-theme">
<button data-general-theme
data-analytics-event="click"
@ -66,7 +66,7 @@
</div>
<nav class="project-only" data-ls-ui-open="" data-button-class="round icon-btn phones-only tablets-only" data-button-icon="icon-dot-3">
<a class="logo" href="/console"
<a class="logo link-animation-disabled" href="/console"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Logo Link">
@ -83,7 +83,8 @@
<a data-ls-attrs="href=/console/home?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Home Link">
data-analytics-label="Home Link"
class="link-animation-disabled">
<i class="icon-home"></i>
Home
</a>
@ -97,7 +98,8 @@
<a data-ls-attrs="href=/console/database?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Database Link">
data-analytics-label="Database Link"
class="link-animation-disabled">
<i class="icon-database"></i>
Database
</a>
@ -106,7 +108,8 @@
<a data-ls-attrs="href=/console/storage?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Storage Link">
data-analytics-label="Storage Link"
class="link-animation-disabled">
<i class="icon-folder"></i>
Storage
</a>
@ -115,7 +118,8 @@
<a data-ls-attrs="href=/console/users?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Users Link">
data-analytics-label="Users Link"
class="link-animation-disabled">
<i class="icon-users"></i>
Users
</a>
@ -129,7 +133,8 @@
<a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Tasks Link">
data-analytics-label="Tasks Link"
class="link-animation-disabled">
<i class="icon-clock"></i>
Tasks
</a>
@ -138,7 +143,8 @@
<a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Webhooks Links">
data-analytics-label="Webhooks Links"
class="link-animation-disabled">
<i class="icon-link"></i>
Webhooks
</a>
@ -147,7 +153,8 @@
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="API Keys Link">
data-analytics-label="API Keys Link"
class="link-animation-disabled">
<i class="icon-key-inv"></i>
API Keys
</a>
@ -160,7 +167,8 @@
<a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
data-analytics-event="click"
data-analytics-category="console/navigation"
data-analytics-label="Settings Link">
data-analytics-label="Settings Link"
class="link-animation-disabled">
<i class="icon-cog"></i> Settings</a>
</li>
</ul>
@ -214,4 +222,4 @@
<button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</footer>
</form>
</div>
</div>

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

@ -12,7 +12,7 @@ $rules = $collection->getAttribute('rules', []);
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/database?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Database</a>
<a data-ls-attrs="href=/console/database?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Database</a>
<br />
@ -516,4 +516,4 @@ $rules = $collection->getAttribute('rules', []);
data-event="load,database.createCollection,database.updateCollection,database.deleteCollection"
data-scope="sdk"
data-name="project-collections">
</div>
</div>

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

@ -163,7 +163,7 @@ $collections = [];
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> <?php echo $this->escape($name); ?></a>
<a data-ls-attrs="href=/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> <?php echo $this->escape($name); ?></a>
<br />
@ -315,4 +315,4 @@ $collections = [];
</li> -->
</ul>
</div>
</div>
</div>

6
app/views/console/database/index.phtml
View file

@ -1,6 +1,6 @@
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Database</span>
@ -65,7 +65,7 @@
<div data-ls-if="0 != {{project-collections.sum}}">
<ul data-ls-loop="project-collections.collections" data-ls-as="collection" data-ls-append="" class="tiles cell-3 margin-bottom-small" style="visibility: hidden">
<li class="margin-bottom">
<a data-ls-attrs="href=/console/database/collection?id={{collection.$id}}&project={{router.params.project}}" class="box">
<a data-ls-attrs="href=/console/database/collection?id={{collection.$id}}&project={{router.params.project}}" class="box link-animation-disabled">
<div data-ls-bind="{{collection.name}}" class="text-one-liner margin-bottom text-bold">&nbsp;</div>
<i class="icon-right-open"></i>
@ -109,4 +109,4 @@
</li> -->
</ul>
</div>
</div>
</div>

4
app/views/console/index.phtml
View file

@ -33,7 +33,7 @@ $home = $this->getParam('home', '');
<ul data-ls-loop="console-projects" data-ls-as="project" data-ls-append="" class="tiles cell-3" style="visibility: hidden">
<li class="margin-bottom">
<a data-ls-attrs="href=/console/home?project={{project.$id}}" class="box">
<a data-ls-attrs="href=/console/home?project={{project.$id}}" class="box link-animation-disabled">
<div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-tiny text-bold">&nbsp;</div>
<p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p>
@ -102,4 +102,4 @@ $home = $this->getParam('home', '');
</div>
</div>
</div>
</section>
</section>

4
app/views/console/keys/index.phtml
View file

@ -3,7 +3,7 @@ $scopes = $this->getParam('scopes', []);
?>
<div class="cover margin-bottom-large">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>API Keys</span>
@ -167,4 +167,4 @@ $scopes = $this->getParam('scopes', []);
</form>
</div>
</div>
</div>
</div>

4
app/views/console/settings/index.phtml
View file

@ -6,7 +6,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
?>
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Settings</span>
@ -500,4 +500,4 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
</li>
</ul>
</div>
</div>
</div>

4
app/views/console/storage/index.phtml
View file

@ -5,7 +5,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
?>
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Storage</span>
@ -240,4 +240,4 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
</div>
</li>
</ul>
</div>
</div>

4
app/views/console/tasks/index.phtml
View file

@ -1,6 +1,6 @@
<div class="cover margin-bottom-large">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Tasks</span>
@ -346,4 +346,4 @@
</form>
</div>
</div>
</div>
</div>

4
app/views/console/users/index.phtml
View file

@ -4,7 +4,7 @@ $providers = $this->getParam('providers', []);
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Users</span>
@ -416,4 +416,4 @@ $providers = $this->getParam('providers', []);
</div>
</li>
</ul>
</div>
</div>

4
app/views/console/users/view.phtml
View file

@ -8,7 +8,7 @@
<div class="cover">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/users?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Users</a>
<a data-ls-attrs="href=/console/users?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Users</a>
<br />
<span data-ls-bind="{{user.name}}">&nbsp;</span>
@ -255,4 +255,4 @@
</li>
</ul>
</div>
</div>
</div>

4
app/views/console/webhooks/index.phtml
View file

@ -5,7 +5,7 @@ $events = array_keys($this->getParam('events', []));
?>
<div class="cover margin-bottom-large">
<h1 class="zone xl margin-bottom-large">
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
<br />
<span>Webhooks</span>
@ -227,4 +227,4 @@ $events = array_keys($this->getParam('events', []));
</form>
</div>
</div>
</div>
</div>

4
app/views/home/comps/header.phtml
View file

@ -1,6 +1,6 @@
<div class="logo text-align-center margin-bottom-xl">
<a href="/">
<a href="/" class="link-animation-disabled">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a>
</div>
</div>

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

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

@ -334,9 +334,6 @@ a.box {
}
a.box:hover {
border-bottom: none;
border-right: none;
border-left: none;
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
opacity: .7;
}
@ -362,4 +359,4 @@ a.box:hover {
bottom: 0;
.func-start(-6px);
}
}
}

10
public/styles/comps/header.less
View file

@ -16,10 +16,6 @@ header {
margin: 7px 0;
display: block;
&:hover {
border-bottom: none;
}
img {
display: block;
}
@ -35,10 +31,6 @@ header {
.account {
.func-margin-start(25px);
&:hover {
border-bottom: none;
}
}
.avatar {
@ -113,4 +105,4 @@ header {
}
}
}
}
}

7
public/styles/forms.less
View file

@ -36,7 +36,6 @@ button,
&:hover,
&:focus {
background: var(--config-color-focus-hover);
border-bottom: none;
}
&.fly {
@ -175,10 +174,6 @@ button,
padding: 0;
.func-padding-end(0) !important;
&:hover {
border-bottom: dotted 1px var(--config-color-link);
}
&:focus {
box-shadow: inherit;
}
@ -1300,4 +1295,4 @@ ol {
.pull-start;
}
}
}
}

9
public/styles/scopes/console.less
View file

@ -130,10 +130,6 @@
.account {
.func-margin-start(25px);
.text-one-liner;
&:hover {
border-bottom: none;
}
}
.switch-theme {
@ -189,11 +185,6 @@
height: 39px;
padding: 15px 20px;
display: block;
border-bottom: none;
&:hover {
border-bottom: none;
}
img {
display: inline-block;

4
public/styles/scopes/home.less
View file

@ -7,11 +7,9 @@ html.home {
.logo {
a {
display: block;
border-bottom: none;
&:hover {
opacity: .8;
border-bottom: none;
}
}
@ -30,4 +28,4 @@ html.home {
main {
min-height: 400px;
}
}
}

53
public/styles/typography.less
View file

@ -17,11 +17,12 @@ a, .link {
text-decoration: none;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom: solid 1px transparent;
transition: 200ms;
display: inline-block;
cursor: pointer;
&:hover {
border-bottom: dotted 1px var(--config-color-link);
cursor: pointer;
transform: translateY(-2px);
}
&.disabled {
@ -29,11 +30,11 @@ a, .link {
}
&.disabled:hover {
border-bottom: none;
.link.link-animation-disabled();
}
&.tag:hover {
border-bottom: none;
.link.link-animation-disabled();
opacity: .9;
}
@ -42,6 +43,46 @@ a, .link {
}
}
a.link-animation-disabled,
.link.link-animation-disabled {
&:hover {
transform: translateY(0);
}
}
.func-link-return-animation(@pos) {
.link.link-animation-disabled();
& > i {
display: inline-block;
transition: 200ms;
}
&:hover > i {
transform: translateX(@pos);
}
}
@link-return-animation-offset: 2px;
.link-return-animation--start {
.func-link-return-animation(
if((@config-start = right),
@link-return-animation-offset,
-@link-return-animation-offset
)
);
}
.link-return-animation--end {
.func-link-return-animation(
if((@config-start = right),
-@link-return-animation-offset,
@link-return-animation-offset
)
);
}
b, strong {
font-weight: 500;
}
@ -196,4 +237,4 @@ small {
.icon-dot-3:before {
.func-rotate(90deg);
}
}