github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add animations and state toggling.

Browse source
This commit is contained in:
Paulo Reis 2016-12-05 15:32:38 +00:00
parent 73e0a63689
commit a00acd7458
3 changed files with 118 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
services/web/app/views/project/list.jade
View file

@ -19,21 +19,34 @@ block content
}
};
.content.content-alt(ng-controller="ProjectPageController")
.content.content-alt.project-list-page(ng-controller="ProjectPageController")
.container
div(
ng-controller="AnnouncementsController"
ng-cloak
)
.announcements(ng-if="announcements.length")
span.announcements-badge {{ announcements.length }}
.announcements-body
.announcements-backdrop(ng-if="ui.isOpen")
a.announcements-btn(
href
ng-if="announcements.length"
ng-click="ui.isOpen = !ui.isOpen"
ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.hasNew }"
)
span.announcements-badge(ng-if="ui.hasNew") {{ announcements.length }}
.announcements-body(
ng-if="ui.isOpen"
)
.announcement(
ng-repeat="announcement in announcements"
)
a.announcement-title(href, ng-click="openLink()") {{ announcement.title }}
h2.announcement-header {{ announcement.title }}
p.announcement-date {{ announcement.date | date:"longDate" }}
p.announcement-description {{ announcement.excerpt }}
a(
ng-href="{{ announcement.url }}"
target="_blank"
) Read more
//- .card.card-thin(ng-show="dataReceived")
//- a.announcement-title(href, ng-click="openLink()") {{ title }}
//- p.announcement-description {{ excerpt }}

3
services/web/public/coffee/main/announcements.coffee
View file

@ -3,6 +3,9 @@ define [
], (App) ->
App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) ->
$scope.announcements = []
$scope.ui =
isOpen: false
hasNew: false
refreshAnnouncements = ->
$http.get("/announcements").success (announcements) ->

80
services/web/public/stylesheets/app/project-list.less
View file

@ -8,6 +8,19 @@
opacity: .9;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.project-list-page {
position: relative;
overflow: hidden;
}
.project-header {
.btn-group > .btn {
@ -305,18 +318,43 @@ ul.project-list {
}
}
.announcements {
position: absolute;
bottom: 100px;
right: 100px;
width: 80px;
height: 80px;
background: url(/img/lion-128.png) no-repeat center/80% white;
border-radius: 50%;
box-shadow: @announcements-shadow;
.announcements-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.35);
opacity: 0;
animation: fade-in 0.35s forwards;
z-index: 1;
}
.announcements-btn {
position: absolute;
bottom: -50px;
right: 3%;
width: 80px;
height: 80px;
background: url(/img/lion-128.png) no-repeat center/80% transparent;
border-radius: 50%;
box-shadow: none;
z-index: 1;
transition: bottom 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55),
background 0.25s ease,
box-shadow 0.25s ease;
&:hover {
bottom: -45px;
}
&-open, &-open:hover,
&-has-new, &-has-new:hover {
background-color: #FFF;
box-shadow: @announcements-shadow;
bottom: 40px;
}
}
.announcements-badge {
display: inline-block;
position: absolute;
@ -334,16 +372,32 @@ ul.project-list {
vertical-align: baseline;
white-space: nowrap;
text-align: center;
z-index: 1;
animation: pulse 1s alternate infinite;
}
.announcements-body {
position: absolute;
right: 0;
bottom: 80px;
width: 500px;
right: 3%;
bottom: 130px;
width: 700px;
min-height: 100px;
background: #FFF;
z-index: 1;
box-shadow: @announcements-shadow;
border-radius: 10px;
padding: 0 @line-height-computed;
border-radius: @border-radius-base;
animation: fade-in 0.35s forwards;
}
.announcement {
margin-bottom: @line-height-computed;
}
.announcement-header {
.page-header;
margin-bottom: 0;
}
.announcement-date {
.small;
margin: (@line-height-computed / 4) 0;
}