mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Basic mark-up and styles. Change the controller to hold all notifications.
This commit is contained in:
parent
4b59fdd453
commit
73e0a63689
3 changed files with 81 additions and 15 deletions
|
@ -22,9 +22,21 @@ block content
|
||||||
.content.content-alt(ng-controller="ProjectPageController")
|
.content.content-alt(ng-controller="ProjectPageController")
|
||||||
.container
|
.container
|
||||||
|
|
||||||
//- div(ng-controller="AnnouncementsController", ng-cloak)
|
div(
|
||||||
//- .alert.alert-success(ng-show="dataRecived")
|
ng-controller="AnnouncementsController"
|
||||||
//- a(href, ng-click="openLink()") {{title}} and {{totalAnnouncements}} others
|
ng-cloak
|
||||||
|
)
|
||||||
|
.announcements(ng-if="announcements.length")
|
||||||
|
span.announcements-badge {{ announcements.length }}
|
||||||
|
.announcements-body
|
||||||
|
.announcement(
|
||||||
|
ng-repeat="announcement in announcements"
|
||||||
|
)
|
||||||
|
a.announcement-title(href, ng-click="openLink()") {{ announcement.title }}
|
||||||
|
p.announcement-description {{ announcement.excerpt }}
|
||||||
|
//- .card.card-thin(ng-show="dataReceived")
|
||||||
|
//- a.announcement-title(href, ng-click="openLink()") {{ title }}
|
||||||
|
//- p.announcement-description {{ excerpt }}
|
||||||
|
|
||||||
.row(ng-cloak)
|
.row(ng-cloak)
|
||||||
span(ng-if="projects.length > 0")
|
span(ng-if="projects.length > 0")
|
||||||
|
|
|
@ -2,19 +2,19 @@ define [
|
||||||
"base"
|
"base"
|
||||||
], (App) ->
|
], (App) ->
|
||||||
App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) ->
|
App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) ->
|
||||||
|
$scope.announcements = []
|
||||||
|
|
||||||
$scope.dataRecived = false
|
refreshAnnouncements = ->
|
||||||
announcement = null
|
$http.get("/announcements").success (announcements) ->
|
||||||
$http.get("/announcements").success (announcements) ->
|
$scope.announcements = announcements
|
||||||
if announcements?[0]?
|
|
||||||
announcement = announcements[0]
|
dismissCurrentAnnouncement = ->
|
||||||
$scope.title = announcement.title
|
event_tracking.sendMB "announcement-alert-dismissed", { blogPostId:announcement.id }
|
||||||
$scope.totalAnnouncements = announcements.length
|
|
||||||
$scope.dataRecived = true
|
|
||||||
|
|
||||||
dismissannouncement = ->
|
refreshAnnouncements()
|
||||||
event_tracking.sendMB "announcement-alert-dismissed", {blogPostId:announcement.id}
|
|
||||||
|
|
||||||
$scope.openLink = ->
|
$scope.openLink = ->
|
||||||
dismissannouncement()
|
dismissCurrentAnnouncement()
|
||||||
$window.location.href = announcement.url
|
.then(refreshAnnouncements)
|
||||||
|
|
||||||
|
$window.open = announcement.url
|
||||||
|
|
|
@ -1,3 +1,14 @@
|
||||||
|
@announcements-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: .9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.project-header {
|
.project-header {
|
||||||
.btn-group > .btn {
|
.btn-group > .btn {
|
||||||
padding-left: @line-height-base / 2;
|
padding-left: @line-height-base / 2;
|
||||||
|
@ -293,3 +304,46 @@ ul.project-list {
|
||||||
margin-left:-100px;
|
margin-left:-100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements-badge {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 11px;
|
||||||
|
height: 1.8em;
|
||||||
|
min-width: 1.8em;
|
||||||
|
border-radius: 0.9em;
|
||||||
|
line-height: 1.8;
|
||||||
|
padding: 0 2px;
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFF;
|
||||||
|
background-color: @red;
|
||||||
|
vertical-align: baseline;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: center;
|
||||||
|
animation: pulse 1s alternate infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcements-body {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 80px;
|
||||||
|
width: 500px;
|
||||||
|
min-height: 100px;
|
||||||
|
background: #FFF;
|
||||||
|
box-shadow: @announcements-shadow;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue