From 24f3b9d49a07608f7b45eda7a03d755c3d2e6882 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 14 Dec 2015 13:31:52 +0300 Subject: [PATCH 1/6] email and grid widgets and fix typography --- src/app/app.js | 2 + src/app/components/sidebar/sidebar.js | 9 + src/app/pages/grid/_grid.scss | 19 + src/app/pages/grid/grid.html | 1 + src/app/pages/grid/grid.js | 23 + src/app/pages/grid/widgets/baseGrid.html | 243 +++++++++ src/app/pages/mail/_mail.scss | 5 + src/app/pages/mail/mail.html | 7 + src/app/pages/mail/mail.js | 20 + .../mail/widgets/email-widget/_email.scss | 365 +++++++++++++ .../mail/widgets/email-widget/email.html | 156 ++++++ .../pages/mail/widgets/email-widget/email.js | 295 +++++++++++ src/app/pages/typography/_typography.scss | 422 +++++++-------- src/app/pages/typography/typography.html | 486 +++++++++--------- src/assets/css/main.scss | 3 + 15 files changed, 1588 insertions(+), 468 deletions(-) create mode 100644 src/app/pages/grid/_grid.scss create mode 100644 src/app/pages/grid/grid.html create mode 100644 src/app/pages/grid/grid.js create mode 100644 src/app/pages/grid/widgets/baseGrid.html create mode 100644 src/app/pages/mail/_mail.scss create mode 100644 src/app/pages/mail/mail.html create mode 100644 src/app/pages/mail/mail.js create mode 100644 src/app/pages/mail/widgets/email-widget/_email.scss create mode 100644 src/app/pages/mail/widgets/email-widget/email.html create mode 100644 src/app/pages/mail/widgets/email-widget/email.js diff --git a/src/app/app.js b/src/app/app.js index a52cce3..db70264 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -5,7 +5,9 @@ var blurAdminApp = angular.module('BlurAdmin', [ 'ngRoute', 'ngTouch', 'BlurAdmin.dashboard', + 'BlurAdmin.mail', 'BlurAdmin.buttonsPage', + 'BlurAdmin.gridPage', 'BlurAdmin.chartsPage', 'BlurAdmin.formInputsPage', 'BlurAdmin.formLayoutsPage', diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js index c77819d..ee580c4 100644 --- a/src/app/components/sidebar/sidebar.js +++ b/src/app/components/sidebar/sidebar.js @@ -57,9 +57,18 @@ blurAdminApp.directive('sidebar', function () { { title: 'Modals', root: '#/modals' + }, + { + title: 'Grid', + root: '#/grid' } ] }, + { + title: 'Mail', + icon: 'ion-ios-email-outline', + root: '#/mail' + }, { title: 'Maps', icon: 'ion-ios-location-outline', diff --git a/src/app/pages/grid/_grid.scss b/src/app/pages/grid/_grid.scss new file mode 100644 index 0000000..be4cd38 --- /dev/null +++ b/src/app/pages/grid/_grid.scss @@ -0,0 +1,19 @@ +.show-grid [class^=col-] { + + padding: 10px; + box-sizing: border-box; + div { + text-align: center; + font-size: 18px; + background-color: $border-light;; + padding: 12px 5px; + } +} + +.grid-h{ + margin-top: 10px; + margin-bottom: 0; + &:first-child{ + margin-top: 0; + } +} \ No newline at end of file diff --git a/src/app/pages/grid/grid.html b/src/app/pages/grid/grid.html new file mode 100644 index 0000000..9fb49c3 --- /dev/null +++ b/src/app/pages/grid/grid.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/grid/grid.js b/src/app/pages/grid/grid.js new file mode 100644 index 0000000..4f1c58e --- /dev/null +++ b/src/app/pages/grid/grid.js @@ -0,0 +1,23 @@ +'use strict'; + +angular.module('BlurAdmin.gridPage', ['ngRoute']) + + .config(['$routeProvider', function ($routeProvider) { + $routeProvider.when('/grid', { + templateUrl: 'app/pages/grid/grid.html', + controller: 'gridPageCtrl' + }); + }]) + .controller('gridPageCtrl', ['$scope', function ($scope) { + $scope.widgetBlocks = [ + { + widgets: [ + [ + { + url: 'app/pages/grid/widgets/baseGrid.html' + } + ] + ] + } + ]; + }]); \ No newline at end of file diff --git a/src/app/pages/grid/widgets/baseGrid.html b/src/app/pages/grid/widgets/baseGrid.html new file mode 100644 index 0000000..3e552f5 --- /dev/null +++ b/src/app/pages/grid/widgets/baseGrid.html @@ -0,0 +1,243 @@ +

Stacked to horizontal

+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
+
+
.col-md-8
+
+
+
.col-md-4
+
+
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
+
+
.col-md-6
+
+
+
.col-md-6
+
+
+ +

Mobile and desktop

+
+
+
xs-12 .col-md-8
+
+
+
xs-6 .col-md-4
+
+
+
+
+
xs-6 .col-md-4
+
+
+
xs-6 .col-md-4
+
+
+
xs-6 .col-md-4
+
+
+
+
+
.col-xs-6
+
+
+
.col-xs-6
+
+
+ +

Mobile, tablet, desktop

+
+
+
.col-xs-12 .col-sm-6 .col-md-8
+
+
+
.col-xs-6 .col-md-4
+
+
+
+
+
.col-xs-6 .col-sm-4
+
+
+
.col-xs-6 .col-sm-4
+
+
+
+
.col-xs-6 .col-sm-4
+
+
+ +

Column wrapping

+
+
+
.col-xs-9
+
+
+
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous + unit. +
+
+
+
.col-xs-6
Subsequent columns continue along the new line.
+
+
+ +

Responsive column resets

+
+
+
.col-xs-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

+
+
+
.col-xs-6 .col-sm-3
+
+
+
+
.col-xs-6 .col-sm-3
+
+
+
.col-xs-6 .col-sm-3
+
+
+ +

Offsetting columns

+
+
+
.col-md-4
+
+
+
.col-md-4 .col-md-offset-4
+
+
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
+
+
.col-md-6 .col-md-offset-3
+
+
+ +

Grid options

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Extra small devices + Phones (<768px) + Small devices + Tablets (≥768px) + Medium devices + Desktops (≥992px) + Large devices + Desktops (≥1200px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
+
\ No newline at end of file diff --git a/src/app/pages/mail/_mail.scss b/src/app/pages/mail/_mail.scss new file mode 100644 index 0000000..d153d09 --- /dev/null +++ b/src/app/pages/mail/_mail.scss @@ -0,0 +1,5 @@ +.mail-container{ + div{ + + } +} \ No newline at end of file diff --git a/src/app/pages/mail/mail.html b/src/app/pages/mail/mail.html new file mode 100644 index 0000000..0ea76cb --- /dev/null +++ b/src/app/pages/mail/mail.html @@ -0,0 +1,7 @@ +
+
+ + + +
+
\ No newline at end of file diff --git a/src/app/pages/mail/mail.js b/src/app/pages/mail/mail.js new file mode 100644 index 0000000..94036da --- /dev/null +++ b/src/app/pages/mail/mail.js @@ -0,0 +1,20 @@ +'use strict'; + +angular.module('BlurAdmin.mail', ['ngRoute']) + + .config(['$routeProvider', function ($routeProvider) { + $routeProvider.when('/mail', { + templateUrl: 'app/pages/mail/mail.html', + controller: 'MailCtrl' + }); + $routeProvider.when('/mail/:label', { + templateUrl: 'app/pages/mail/mail.html', + controller: 'MailCtrl' + }); + $routeProvider.when('/mail/:label/:id', { + templateUrl: 'app/pages/mail/mail.html', + controller: 'MailCtrl' + }); + }]) + .controller('MailCtrl', ['$scope', function ($scope) { + }]); \ No newline at end of file diff --git a/src/app/pages/mail/widgets/email-widget/_email.scss b/src/app/pages/mail/widgets/email-widget/_email.scss new file mode 100644 index 0000000..2e70342 --- /dev/null +++ b/src/app/pages/mail/widgets/email-widget/_email.scss @@ -0,0 +1,365 @@ +.mail-navigation-container { + display: table; + table-layout: fixed; + width: 100%; + padding: 15px 0; + .mail-navigation { + cursor: pointer; + display: table-cell; + line-height: 1; + text-align: center; + font-weight: 100; + font-size: 18px; + &.active { + color: $dribble-color; + } + transition: transform .5s ease; + &:hover{ + transform: skew(-10deg); + } + } +} + +.message-container, .side-message-navigation{ + float: left; + padding: 0 15px; + position: relative; + min-height: 1px; + height: 650px; + overflow: scroll; +} + +@media (max-width: 1400px) { + + .side-message-navigation{ + width: 249px; + } + + .message-container{ + width: calc(100% - 250px); + } + + .additional-info{ + display: none; + &.date{ + display: table-cell; + } + } +} + +@media (max-width: 1100px) { + + .additional-info{ + &.date{ + display: none; + } + } + + .side-message-navigation{ + width: 180px; + } + + .message-container{ + width: calc(100% - 180px); + } +} + +@media (min-width: 1400px) { + + .side-message-navigation{ + width: 380px; + } + + .message-container{ + width: calc(100% - 380px); + } + +} + + + +.control-container { + background-color: #ebebeb; + padding-left: 15px; + margin-bottom: 30px; + .compose-button { + color: white; + font-size: 16px; + font-weight: 100; + padding-left: 40px; + padding-right: 40px; + background-color: $dribble-color; + } + + .icon-buttons { + margin-left: -10px; + } + .btn-icon { + background-color: $dribble-color; + color: white; + height: 35px; + width: 35px; + font-size: 16px; + margin-left: -3px; + } + + .btn.btn-icon.dropdown-toggle { + width: 50px; + &.margin-left { + margin-left: 10px; + } + } + .dropdown-menu { + margin-left: 10px; + } + + .more-button { + font-size: 12px; + font-weight: 100; + } +} + +.little-human { + cursor: pointer; + transition: border-left 1.5s ease; + .little-human-picture { + width: 45px; + height: 45px; + border-radius: 23px; + margin: 0 10px 10px 0; + transition: all .2s ease-in-out; + } + .name { + font-size: 14px; + vertical-align: super; + } + .date { + text-align: right; + span { + vertical-align: super; + padding-rigth: 5px; + } + } + .tag { + vertical-align: super; + margin: 0 3px; + } + .subject { + vertical-align: super; + margin-right: 3px; + } + + &:hover { + .little-human-picture { + transform: rotate(5deg); + } + } + + &.active { + .name { + color: $dribble-color; + } + } + +} + +.tag { + text-transform: uppercase; + font-size: 11px; + font-weight: 100; + cursor: pointer; + &.label { + padding: .3em .6em; + } + &.work { + background-color: $primary; + } + + &.study { + background-color: $success; + } + + &.family { + background-color: $warning; + } + + &.friend { + background-color: $danger; + } +} + +.messages { + overflow: auto; + table { + width: 100%; + } +} + +.important { + color: $warning; +} + +.message-control-icon { + cursor: pointer; + font-size: 16px; + margin-right: 5px; +} + +.person-info { + padding:0 15px; + .human-picture { + width: 90px; + height: 90px; + border-radius: 45px; + margin-top: -43px; + } + + .name { + display: inline-block; + margin-left: 10px; + margin-top: 5px; + h2 { + margin-bottom: 0; + font-size: 24px; + font-weight: bold; + } + } + +} + +.no-padding { + padding: 0; +} + +.contact-info { + display: inline-block; + div { + margin-top: 10px; + } + &.phone-email { + .ion-iphone { + font-size: 32px; + width: 27px; + display: inline-block; + } + .phone { + font-size: 19px; + font-weight: 200; + vertical-align: super; + } + .ion-email { + font-size: 24px; + width: 27px; + display: inline-block; + } + .email { + font-size: 16px; + font-weight: 200; + vertical-align: super; + } + } + + &.position-address { + div { + margin-top: 17px; + } + .position { + font-size: 20px; + font-weight: bold; + } + + .address { + font-size: 16px; + font-weight: 100; + } + } +} + +.message-details { + margin: 5px 0; + .subject { + font-size: 20px; + margin-right: 10px; + } + .control-icons { + float: right; + font-size: 20px; + margin-right: 40px; + i { + cursor: pointer; + } + } +} + +.message-body { + margin: 20px 0; + width: 85%; + font-weight: 100; + line-height: 18px; + p { + margin-bottom: 0; + } +} + +.attachment { + + margin: 5px 0; + + .file-icon { + font-size: 30px; + } + + .file-name { + font-size: 16px; + vertical-align: super; + margin-left: 10px; + } + + .file-link { + font-size: 25px; + border-bottom: solid 3px; + float: right; + cursor: pointer; + } +} + +.tag-line { + margin: 15px; + .tag{ + margin-left: 10px; + } +} + +.line { + height: 1px; + background-color: $input-border; + opacity: 0.3; +} + +.answer-button { + margin-left: 20px; + color: white; + font-size: 16px; + font-weight: 100; + padding-left: 40px; + padding-right: 40px; + background-color: $dribble-color; + &:hover { + color: white; + } + &:focus { + color: white; + } + &.focus { + color: white; + } +} + +.answer-container { + margin-top: 30px; +} + +.answer-area { + width: 60%; + float: left; +} diff --git a/src/app/pages/mail/widgets/email-widget/email.html b/src/app/pages/mail/widgets/email-widget/email.html new file mode 100644 index 0000000..603fd38 --- /dev/null +++ b/src/app/pages/mail/widgets/email-widget/email.html @@ -0,0 +1,156 @@ +
+
+
+
+ {{t.name}} +
+
+
+
+
+ +
+
+ + + +
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ + + + + + + + +
{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.{{m.tag}}{{m.subject}}{{m.date | date : 'MMM d HH:mm'}}
+
+
+
+
+
+
+ + +
+

{{mail.name.split(' ')[0]}}

+ +

{{mail.name.split(' ')[1]}}

+
+
+
+
+
+ + 777-777-7777 +
+
+ + +
+
+
+ +
+
+
+ {{mail.position}} +
+
+ 12 Nezavisimosti st. Vilnius, Lithuania +
+
+
+
+
+
+ +
+
+
+ Work + Family + Friend + Study +
+
+
+
+
+ {{mail.subject}} + • {{mail.date | date : 'h:mm a MMMM d '}} +
+
+
+ +
+
+
+ + {{mail.attachment}} + +
+
+
+ + +
+ +
+
+
Nothing to show
+
+
+
+
diff --git a/src/app/pages/mail/widgets/email-widget/email.js b/src/app/pages/mail/widgets/email-widget/email.js new file mode 100644 index 0000000..4012540 --- /dev/null +++ b/src/app/pages/mail/widgets/email-widget/email.js @@ -0,0 +1,295 @@ +'use strict'; + +blurAdminApp.directive('blurEmail', function () { + return { + restrict: 'EA', + controller: ['$scope', '$routeParams', '$location', '$sce', function ($scope, $routeParams, $location, $sce) { + console.log($routeParams); + $scope.messages = [ + { + "id": "4563faass", + "name": "Anastasiya Tyshkavets", + "subject": "Great text", + "date": "2015-08-28T07:57:09", + "important": true, + "body": $sce.trustAsHtml("

Hey John,

Check out this cool text.

"), + "pic": "img/Nasta.png", + "email": "petraramsey@mail.com", + "attachment": "poem.txt", + "draft": false, + "trash": false, + "position": "Great Employee", + "tag": "friend" + }, + { + "id": "4563fdfvd", + "name": "Anastasiya Tyshkavets", + "subject": "Lores ipsum", + "date": "2015-11-19T03:30:45", + "important": false, + "body": $sce.trustAsHtml("

Hey John,


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex mauris, ultrices vel lectus quis, scelerisque hendrerit ipsum. Suspendisse ullamcorper turpis neque, eget dapibus magna placerat ac. Suspendisse rhoncus ligula ac mi tempus varius ut sed lacus. Sed et commodo nulla, et placerat leo. Nam rhoncus vulputate sem non pharetra. Praesent fringilla massa in laoreet convallis. Aliquam lobortis dui a congue facilisis. Aenean dapibus semper semper. Quisque aliquam, nibh dapibus interdum condimentum, ex velit tempor tortor, at vestibulum magna leo quis leo. Morbi pulvinar varius erat ac rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.

" + + "

Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

"), + "pic": "img/Nasta.png", + "email": "petraramsey@mail.com", + "position": "Great Employee", + "tag": "work", + "draft": false, + "trash": false + }, + { + "id": "4563zxcss", + "name": "Anastasiya Tyshkavets", + "subject": "Lores ipsum", + "date": "2015-10-19T03:30:45", + "important": false, + "body": $sce.trustAsHtml("

Hey John,

Lorem ipsum dolor sit amet, consectetur adipiscing elit

"), + "pic": "img/Nasta.png", + "email": "petraramsey@mail.com", + "position": "Great Employee", + "tag": "work", + "draft": false, + "trash": true + }, + { + "id": "8955sddf", + "name": "Nikolass Cat", + "subject": "New Design", + "date": "2015-05-05T12:59:45", + "important": true, + "body": $sce.trustAsHtml("

Hey John, Consectetur adipiscing elit


" + + "

Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

"), + "pic": "img/Nick.png", + "email": "barlowshort@mail.com", + "position": "Graphical designer", + "attachment": "design.psd", + "draft": false, + "trash": false, + "tag": "work" + }, + { + "id": "8955sdfcc", + "name": "Nikolass Cat", + "subject": "Gift card", + "date": "2015-07-18T10:19:01", + "important": false, + "body": $sce.trustAsHtml("

Hey John,


Consectetur adipiscing elit, Lorem ipsum dolor sit amet

"), + "pic": "img/Nick.png", + "email": "barlowshort@mail.com", + "position": "Graphical designer", + "draft": false, + "trash": false, + "tag": "work" + }, + { + "id": "8955asewf", + "name": "Nikolass Cat", + "subject": "Some news", + "date": "2015-09-23T03:04:10", + "important": true, + "body": $sce.trustAsHtml("

Hey John,


Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

"), + "pic": "img/Nick.png", + "email": "barlowshort@mail.com", + "position": "Graphical designer", + "draft": false, + "trash": false, + "tag": "work" + }, + { + "id": "2334uudsa", + "name": "Konstantin Danovsky", + "subject": "Street Art", + "date": "2015-11-22T10:05:09", + "important": false, + "body": $sce.trustAsHtml("

Hey John,

Aliquam eu facilisis eros, quis varius est.

" + + "

Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.

" + + "

Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.

" + + "

Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." + + "Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic

"), + "pic": "img/Kostya.png", + "email": "schwartzalford@mail.com", + "position": "Technical Chef", + "draft": false, + "attachment": "file.doc", + "trash": false, + "tag" : "work" + }, + { + "id": "2334aefvv", + "name": "Konstantin Danovsky", + "subject": "New product", + "date": "2015-06-22T06:26:10", + "important": true, + "body": $sce.trustAsHtml("

Hello John,

Lorem ipsum dolor sit amet!

" + + "

Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.

" + + "

Aliquam eu facilisis eros, quis varius est. Nullam imperdiet justo a ipsum laoreet euismod.

" + + "

Nulla facilisi. Nulla congue, arcu eget blandit lacinia, leo ante ullamcorper lectus, vel pulvinar justo ipsum vitae justo." + + "Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic

"), + "pic": "img/Kostya.png", + "email": "schwartzalford@mail.com", + "position": "Technical Chef", + "draft": false, + "trash": false, + "tag" : "work" + }, + { + "id": "8223xzxfn", + "name": "Andrei Hrabouski", + "subject": "Skype moji", + "date": "2015-07-16T06:47:53", + "important": false, + "body": $sce.trustAsHtml("

Hello John,

Aliquam sodales sem in nibh pellentesque

" + + "

Lorem ipsum dolor I find moji in skype sit amet!.

"), + "pic": "img/Andrey.png", + "email": "lakeishaphillips@mail.com", + "position": "Mobile Developer", + "tag" : 'family', + "draft": false, + "trash": true + }, + { + "id": "8223sdffn", + "name": "Andrei Hrabouski", + "subject": "My App", + "date": "2015-06-20T07:05:02", + "important": false, + "body": $sce.trustAsHtml("

Hey Vlad.

Lorem ipsum dolor sit amet!

" + + "

Consectetur My Falasson App elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.

"), + "pic": "img/Andrey.png", + "email": "lakeishaphillips@mail.com", + "position": "Mobile Developer", + "draft": false, + "trash": false, + "tag" : 'family', + "spam": true + }, + { + "id": "9391xdsff", + "name": "Vladimir Lugovsky", + "subject": "Cool", + "date": "2015-03-31T11:52:58", + "important": false, + "body": $sce.trustAsHtml("

Hey Vlad.

Aliquam sodales sem in nibh pellentesque

" + + "

Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed.

"), + "pic": "img/Vlad.png", + "email": "carlsongoodman@mail.com", + "my": true, + "position": "Fullstack man", + "tag": "study", + "draft": false, + "trash": false, + "spam": false + }, + { + "id": "9391xdsff", + "name": "Vladimir Lugovsky", + "subject": "Whan next", + "date": "2015-03-31T11:52:58", + "important": false, + "body": $sce.trustAsHtml("

Hey Vlad.

Lorem ipsum dolor sit amet!

" + + "

Esse esse labore tempor ullamco ullamco. Id veniam laborum c.

"), + "pic": "img/Vlad.png", + "email": "carlsongoodman@mail.com", + "my": true, + "position": "Fullstack man", + "tag": "study", + "draft": true, + "trash": false, + "spam": false + } + ].sort(function (a, b) { + if (a.date > b.date) return 1; + if (a.date < b.date) return -1; + }).reverse(); + + $scope.tabs = [ + { + label: 'inbox', + name: 'Inbox', + filter: function (messages) { + return messages.filter(function (m) { + return !m.trash && !m.draft && !m.spam && !m.my + }); + } + }, + { + label: 'sentMail', + name: 'Sent Mail', + filter: function (messages) { + return messages.filter(function (m) { + return m.my && !m.trash && !m.draft + }); + } + }, + { + label: 'important', + name: 'Important', + filter: function (messages) { + return messages.filter(function (m) { + return m.important && !m.trash && !m.draft + }); + } + }, + { + label: 'draft', + name: 'Draft', + filter: function (messages) { + return messages.filter(function (m) { + return m.draft && !m.trash + }); + } + }, + { + label: 'spam', + name: 'Spam', + filter: function (messages) { + return messages.filter(function (m) { + return m.spam && !m.trash + }); + } + }, + { + label: 'trash', + name: 'Trash', + filter: function (messages) { + return messages.filter(function (m) { + return m.trash + }); + } + }]; + + $scope.selectTab = function (tab) { + $scope.tab = tab; + $scope.currentMessages = $scope.tabs[tab].filter($scope.messages); + $scope.mail = $scope.currentMessages[0]; + //var mailId = $scope.mail ? $scope.mail.id : ''; + //$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId); + }; + + $scope.selectMail = function (mail) { + $scope.mail = mail; + //$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id); + }; + + $scope.isSelectedTab = function (tab) { + return $scope.tab === tab; + }; + + function findTabByLabel(label) { + var i = 0; + while (label && i < $scope.tabs.length && $scope.tabs[i].label.toLowerCase() !== label.toLowerCase())i++; + return i === $scope.tabs.length ? 0 : i; + } + + function findMessageById(id) { + var i = 0; + while (id && i < $scope.currentMessages.length && $scope.currentMessages[i].id !== id)i++; + return i === $scope.currentMessages.length ? 0 : i; + } + + $scope.tab = findTabByLabel($routeParams.label); + $scope.currentMessages = $scope.tabs[$scope.tab].filter($scope.messages); + $scope.mail = $scope.currentMessages[findMessageById($routeParams.id)]; + }], + templateUrl: 'app/pages/mail/widgets/email-widget/email.html' + }; +}); \ No newline at end of file diff --git a/src/app/pages/typography/_typography.scss b/src/app/pages/typography/_typography.scss index 94db7aa..eca9b18 100644 --- a/src/app/pages/typography/_typography.scss +++ b/src/app/pages/typography/_typography.scss @@ -53,225 +53,116 @@ h5 { .typography-document-samples { - .typography-document{ - } - p { margin: 0; } .typography-widget { + height: 100%; - div.panel{ + .panel { height: 620px; } - height: 100%; .panel-body { padding: 15px 30px 0 30px; } - .typography-widget-header { - text-align: center; - margin: 0; - width: 100%; + } + +} + +.typography-widget-header { + text-align: center; + margin: 0; + width: 100%; + font-weight: 100; +} + +.heading-widget { + text-align: center; + + h1, h2, h3, h4, h5, h6 { + width: 100%; + font-weight: 100; + } + + p { + line-height: 16px; + font-weight: 100; + } +} + +.more-text-widget { + text-align: center; + font-size: 14px; + + p { + line-height: 17px; + } + + .gray { + color: #767676; + } + + .black { + color: #585858; + } + + .light-text { + font-weight: 100; + } + + .regular-text { + font-weight: 600; + } + + .upper-text { + text-transform: uppercase; + } + + .bold-text { + font-weight: 900; + } + + .small-text { + padding: 5px 0 0 0; + p { + font-size: 9px; font-weight: 100; + line-height: 10px; } + } +} - .heading-widget { - text-align: center; +.color-widget { + text-align: center; + font-size: 14px; + font-weight: 300; + p { + line-height: 17px; + } - h1, h2, h3, h4, h5, h6 { - width: 100%; - font-weight: 100; - } + .section-block { + margin: 14px 0; + } - p { - line-height: 16px; - font-weight: 100; - } + .red-text p { + color: $dribble-color; + } + + .blue-text p { + color: $primary; + } + + .links { + h3 { + margin-bottom: 10px; } - - .more-text-widget { - text-align: center; - font-size: 14px; - - p { - line-height: 17px; - } - - .gray { - color: #767676; - } - - .black { - color: #585858; - } - - .light-text { - font-weight: 100; - } - - .regular-text { - font-weight: 600; - } - - .upper-text { - text-transform: uppercase; - } - - .bold-text { - font-weight: 900; - } - - .small-text { - padding: 5px 0 24px 0; - p { - font-size: 9px; - font-weight: 100; - line-height: 10px; - } - } - } - - - - .color-widget { - text-align: center; - font-size: 14px; - font-weight: 300; - p { - line-height: 17px; - } - - .section-block{ - margin: 14px 0; - } - - .red-text p{ - color: $dribble-color; - } - - .blue-text p{ - color: $primary; - } - - .links { - h3 { - margin-bottom: 10px; - } - p { - margin-bottom: 0; - &.hovered { - a { - color: $danger; - } - } - } - } - - } - - .lists-widget{ - - - font-weight: 100; - .list-header{ - width: 100%; - font-weight: 100; - text-align: center; - } - - .accent { - margin-top: 44px; - color: $dribble-color; - line-height: 14px; - font-size: 14px; - margin-bottom: 36px; - padding-left: 11px; - border-left: 4px solid $dribble-color; - margin-left: 13px; - } - - ul.blur, ol.blur { - padding-left: 13px; - margin-bottom: 19px; - list-style: none; - padding-top: 1px; - li { - margin-top: 5px; - color: $default-text; - font-size: 14px; - ul, ol { - padding-left: 20px; - margin-bottom: 0; - list-style: none; - } - } - } - - ul.blur { - li { - &:before { - content: "• "; - color: $dribble-color; - width: 10px; - display: inline-block; - } - } - } - - ol.blur { - counter-reset: section; - li { - color: $dribble-color; - padding-left: 0; - line-height: 14px; - position: relative; - span { - color: $default-text; - display: block; - } - ol { - padding-left: 0; - margin-left: 12px; - } - &:before { - content: counters(section, ".") "."; - counter-increment: section; - width: 19px; - position: absolute; - left: 0; - top: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - & > li { - span { - padding-left: 14px; - } - } - ol { - counter-reset: section; - & > li { - &:before { - width: 30px; - } - span { - padding-left: 27px - } - } - ol { - & > li { - &:before { - width: 40px; - } - span { - padding-left: 40px; - } - } - } + p { + margin-bottom: 0; + &.hovered { + a { + color: $danger; } } } @@ -279,7 +170,110 @@ h5 { } -.columns-section{ +.lists-widget { + + font-weight: 100; + .list-header { + width: 100%; + font-weight: 100; + text-align: center; + } + + .accent { + margin-top: 30px; + color: $dribble-color; + line-height: 14px; + font-size: 14px; + padding-left: 11px; + border-left: 4px solid $dribble-color; + margin-left: 13px; + } + + ul.blur, ol.blur { + padding-left: 13px; + margin-bottom: 19px; + list-style: none; + padding-top: 1px; + li { + margin-top: 5px; + color: $default-text; + font-size: 14px; + ul, ol { + padding-left: 20px; + margin-bottom: 0; + list-style: none; + } + } + } + + ul.blur { + li { + &:before { + content: "• "; + color: $dribble-color; + width: 10px; + display: inline-block; + } + } + } + + ol.blur { + counter-reset: section; + li { + color: $dribble-color; + padding-left: 0; + line-height: 14px; + position: relative; + span { + color: $default-text; + display: block; + } + ol { + padding-left: 0; + margin-left: 12px; + } + &:before { + content: counters(section, ".") "."; + counter-increment: section; + width: 19px; + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + & > li { + span { + padding-left: 14px; + } + } + ol { + counter-reset: section; + & > li { + &:before { + width: 30px; + } + span { + padding-left: 27px + } + } + ol { + & > li { + &:before { + width: 40px; + } + span { + padding-left: 40px; + } + } + } + } + } +} + +.columns-section { background-color: white; } @@ -297,8 +291,6 @@ p.small-text { margin-bottom: 8px; } - - .cols-two { margin-bottom: 50px; & > div { @@ -344,8 +336,6 @@ a.learn-more { margin-bottom: 10px; } - - .banner { position: relative; margin-bottom: 20px; @@ -395,11 +385,11 @@ a.learn-more { .banner-text { padding: 55px 60px 30px; min-width: 0; - h1{ + h1 { font-size: 24px; } - p{ + p { font-size: 16px; } } @@ -426,8 +416,6 @@ a.learn-more { } } - - .section-block { padding-bottom: 12px; } @@ -444,8 +432,20 @@ a.learn-more { padding: 0 20px 50px 20px; } -div.banner-column-panel{ +.panel.banner-column-panel { padding: 0; margin-bottom: 50px; + + .panel-body{ + padding: 0; + } } + + + + @media screen and (min-width: 1700px) { + .col-xlg-3{ + width: 25%; + } + } \ No newline at end of file diff --git a/src/app/pages/typography/typography.html b/src/app/pages/typography/typography.html index ea52e66..20705c0 100644 --- a/src/app/pages/typography/typography.html +++ b/src/app/pages/typography/typography.html @@ -1,274 +1,246 @@ -
-
-
-
- +
+
+ +
+

Text Size

-
-
-
- -
-
-
- +
+

H2. Heading 2

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat + vestibulum eleifend pellentesque.

-
-
-
- -
+
+

H4. Heading 4

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat + vestibulum eleifend pellentesque.

+
+
+
H5. Heading 5
+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.

+
+
-
-
-
- \ No newline at end of file +
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 62f19e2..14b10a7 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -32,6 +32,9 @@ "../../app/pages/dashboard/widgets/popularApp/popularApp.scss", "../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss", "../../app/pages/dashboard/widgets/weather/weather.scss", +"../../app/pages/grid/grid.scss", +"../../app/pages/mail/mail.scss", +"../../app/pages/mail/widgets/email-widget/email.scss", "../../app/pages/maps/widgets/leaflet/leaflet.scss", "../../app/pages/maps/widgets/google-maps/google-maps.scss", "../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss", From 1c40d1869407d4dcbc598da97e18ba6353aec466 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 14 Dec 2015 17:27:02 +0300 Subject: [PATCH 2/6] alerts page --- src/app/app.js | 1 + src/app/components/contentTop/contentTop.js | 1 + src/app/components/sidebar/sidebar.js | 4 +++ src/app/pages/alerts/_alerts.scss | 25 +++++++++++++++ src/app/pages/alerts/alerts.html | 1 + src/app/pages/alerts/alerts.js | 34 +++++++++++++++++++++ src/app/pages/alerts/widgets/closeable.html | 16 ++++++++++ src/app/pages/alerts/widgets/composite.html | 11 +++++++ src/app/pages/alerts/widgets/default.html | 15 +++++++++ src/app/pages/alerts/widgets/link.html | 15 +++++++++ src/assets/css/main.scss | 1 + 11 files changed, 124 insertions(+) create mode 100644 src/app/pages/alerts/_alerts.scss create mode 100644 src/app/pages/alerts/alerts.html create mode 100644 src/app/pages/alerts/alerts.js create mode 100644 src/app/pages/alerts/widgets/closeable.html create mode 100644 src/app/pages/alerts/widgets/composite.html create mode 100644 src/app/pages/alerts/widgets/default.html create mode 100644 src/app/pages/alerts/widgets/link.html diff --git a/src/app/app.js b/src/app/app.js index db70264..2c65459 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -9,6 +9,7 @@ var blurAdminApp = angular.module('BlurAdmin', [ 'BlurAdmin.buttonsPage', 'BlurAdmin.gridPage', 'BlurAdmin.chartsPage', + 'BlurAdmin.alertsPage', 'BlurAdmin.formInputsPage', 'BlurAdmin.formLayoutsPage', 'BlurAdmin.iconsPage', diff --git a/src/app/components/contentTop/contentTop.js b/src/app/components/contentTop/contentTop.js index 7d90684..e452248 100644 --- a/src/app/components/contentTop/contentTop.js +++ b/src/app/components/contentTop/contentTop.js @@ -15,6 +15,7 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) { '/buttons': 'Buttons', '/charts': 'Charts', '/grid': 'Grid', + '/alerts': 'Alerts', '/icons': 'Icons', '/login': 'Authentication', '/maps': 'Maps', diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js index ee580c4..5a586a3 100644 --- a/src/app/components/sidebar/sidebar.js +++ b/src/app/components/sidebar/sidebar.js @@ -61,6 +61,10 @@ blurAdminApp.directive('sidebar', function () { { title: 'Grid', root: '#/grid' + }, + { + title: 'Alerts', + root: '#/alerts' } ] }, diff --git a/src/app/pages/alerts/_alerts.scss b/src/app/pages/alerts/_alerts.scss new file mode 100644 index 0000000..0f0c6c4 --- /dev/null +++ b/src/app/pages/alerts/_alerts.scss @@ -0,0 +1,25 @@ +.alert{ + font-size: 13px; + .close{ + margin-top: -3px; + } + //a{ + // font-weight: 900; + // color: #3C3C3B; + // &:hover{ + // border-bottom: 1px solid $github-color; + // } + //} + .control-alert{ + padding-top:10px ; + button{ + margin-right: 10px; + } + } +} + +.closeable{ + button{ + color: $input-border; + } +} \ No newline at end of file diff --git a/src/app/pages/alerts/alerts.html b/src/app/pages/alerts/alerts.html new file mode 100644 index 0000000..9fb49c3 --- /dev/null +++ b/src/app/pages/alerts/alerts.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/alerts/alerts.js b/src/app/pages/alerts/alerts.js new file mode 100644 index 0000000..6118021 --- /dev/null +++ b/src/app/pages/alerts/alerts.js @@ -0,0 +1,34 @@ +'use strict'; + +angular.module('BlurAdmin.alertsPage', ['ngRoute']) + + .config(['$routeProvider', function ($routeProvider) { + $routeProvider.when('/alerts', { + templateUrl: 'app/pages/alerts/alerts.html', + controller: 'alertsPageCtrl' + }); + }]) + .controller('alertsPageCtrl', ['$scope', function ($scope) { + $scope.widgetBlocks = [ + { + widgets: [ + [ + { + url: 'app/pages/alerts/widgets/default.html' + }, + { + url: 'app/pages/alerts/widgets/closeable.html' + } + ], + [ + { + url: 'app/pages/alerts/widgets/link.html' + }, + { + url: 'app/pages/alerts/widgets/composite.html' + } + ] + ] + } + ]; + }]); \ No newline at end of file diff --git a/src/app/pages/alerts/widgets/closeable.html b/src/app/pages/alerts/widgets/closeable.html new file mode 100644 index 0000000..201f5cc --- /dev/null +++ b/src/app/pages/alerts/widgets/closeable.html @@ -0,0 +1,16 @@ +

Alerts with close icon

+
+ + + + +
+ diff --git a/src/app/pages/alerts/widgets/composite.html b/src/app/pages/alerts/widgets/composite.html new file mode 100644 index 0000000..788e855 --- /dev/null +++ b/src/app/pages/alerts/widgets/composite.html @@ -0,0 +1,11 @@ +

Composite alerts

+
+
+
Unhandled error!
+ Oh snap! Change a few things up and try submitting again. +
+ + +
+
+
\ No newline at end of file diff --git a/src/app/pages/alerts/widgets/default.html b/src/app/pages/alerts/widgets/default.html new file mode 100644 index 0000000..dd3d36f --- /dev/null +++ b/src/app/pages/alerts/widgets/default.html @@ -0,0 +1,15 @@ +

Default alerts

+
+
+ Well done! You successfully read this important alert message. +
+
+ Heads up! This alert needs your attention, but it's not super important. +
+
+ Warning! Better check yourself, you're not looking too good. +
+
+ Oh snap! Change a few things up and try submitting again. +
+
\ No newline at end of file diff --git a/src/app/pages/alerts/widgets/link.html b/src/app/pages/alerts/widgets/link.html new file mode 100644 index 0000000..ac46a80 --- /dev/null +++ b/src/app/pages/alerts/widgets/link.html @@ -0,0 +1,15 @@ +

Links in alerts

+
+
+ Well done! You successfully read this important alert message. +
+
+ Heads up! This alert needs your attention, but it's not super important. +
+
+ Warning! Better check yourself, you're not looking too good. +
+
+ Oh snap! Change a few things up and try submitting again. +
+
\ No newline at end of file diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 14b10a7..7dfa644 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -33,6 +33,7 @@ "../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss", "../../app/pages/dashboard/widgets/weather/weather.scss", "../../app/pages/grid/grid.scss", +"../../app/pages/alerts/alerts.scss", "../../app/pages/mail/mail.scss", "../../app/pages/mail/widgets/email-widget/email.scss", "../../app/pages/maps/widgets/leaflet/leaflet.scss", From 56d94116cd0afbbd228277d303c8332d1eb4e3d7 Mon Sep 17 00:00:00 2001 From: alex Date: Mon, 14 Dec 2015 18:36:44 +0300 Subject: [PATCH 3/6] progress bars --- src/app/app.js | 1 + src/app/components/contentTop/contentTop.js | 1 + src/app/components/sidebar/sidebar.js | 4 ++ src/app/pages/progressBars/_progressBars.scss | 0 src/app/pages/progressBars/progressBars.html | 1 + src/app/pages/progressBars/progressBars.js | 48 +++++++++++++++++++ .../pages/progressBars/widgets/animated.html | 20 ++++++++ src/app/pages/progressBars/widgets/basic.html | 20 ++++++++ src/app/pages/progressBars/widgets/label.html | 20 ++++++++ .../pages/progressBars/widgets/stacked.html | 14 ++++++ .../pages/progressBars/widgets/striped.html | 20 ++++++++ src/assets/css/main.scss | 1 + 12 files changed, 150 insertions(+) create mode 100644 src/app/pages/progressBars/_progressBars.scss create mode 100644 src/app/pages/progressBars/progressBars.html create mode 100644 src/app/pages/progressBars/progressBars.js create mode 100644 src/app/pages/progressBars/widgets/animated.html create mode 100644 src/app/pages/progressBars/widgets/basic.html create mode 100644 src/app/pages/progressBars/widgets/label.html create mode 100644 src/app/pages/progressBars/widgets/stacked.html create mode 100644 src/app/pages/progressBars/widgets/striped.html diff --git a/src/app/app.js b/src/app/app.js index 2c65459..cd72e99 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -14,6 +14,7 @@ var blurAdminApp = angular.module('BlurAdmin', [ 'BlurAdmin.formLayoutsPage', 'BlurAdmin.iconsPage', 'BlurAdmin.mapsPage', + 'BlurAdmin.progressBarsPage', 'BlurAdmin.modalsPage', 'BlurAdmin.profilePage', 'BlurAdmin.tablesPage', diff --git a/src/app/components/contentTop/contentTop.js b/src/app/components/contentTop/contentTop.js index e452248..04f93b9 100644 --- a/src/app/components/contentTop/contentTop.js +++ b/src/app/components/contentTop/contentTop.js @@ -16,6 +16,7 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) { '/charts': 'Charts', '/grid': 'Grid', '/alerts': 'Alerts', + '/progressBars': 'Progress Bars', '/icons': 'Icons', '/login': 'Authentication', '/maps': 'Maps', diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js index 5a586a3..1f1aa2b 100644 --- a/src/app/components/sidebar/sidebar.js +++ b/src/app/components/sidebar/sidebar.js @@ -65,6 +65,10 @@ blurAdminApp.directive('sidebar', function () { { title: 'Alerts', root: '#/alerts' + }, + { + title: 'Progress Bars', + root: '#/progressBars' } ] }, diff --git a/src/app/pages/progressBars/_progressBars.scss b/src/app/pages/progressBars/_progressBars.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/progressBars/progressBars.html b/src/app/pages/progressBars/progressBars.html new file mode 100644 index 0000000..9fb49c3 --- /dev/null +++ b/src/app/pages/progressBars/progressBars.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/progressBars/progressBars.js b/src/app/pages/progressBars/progressBars.js new file mode 100644 index 0000000..f77f563 --- /dev/null +++ b/src/app/pages/progressBars/progressBars.js @@ -0,0 +1,48 @@ +'use strict'; + +angular.module('BlurAdmin.progressBarsPage', ['ngRoute']) + + .config(['$routeProvider', function ($routeProvider) { + $routeProvider.when('/progressBars', { + templateUrl: 'app/pages/progressBars/progressBars.html', + controller: 'progressBarsPageCtrl' + }); + }]) + .controller('progressBarsPageCtrl', ['$scope', function ($scope) { + $scope.widgetBlocks = [ + { + widgets: [ + [ + { + title: "Basic", + url: 'app/pages/progressBars/widgets/basic.html' + }, + { + title: "Striped", + url: 'app/pages/progressBars/widgets/striped.html' + } + ], + [ + { + title: "With label", + url: 'app/pages/progressBars/widgets/label.html' + }, + { + title: "Animated", + url: 'app/pages/progressBars/widgets/animated.html' + } + ] + ] + }, { + widgets: [ + [ + { + title: "Stacked", + url: 'app/pages/progressBars/widgets/stacked.html' + } + ] + ] + } + ]; + }]); + diff --git a/src/app/pages/progressBars/widgets/animated.html b/src/app/pages/progressBars/widgets/animated.html new file mode 100644 index 0000000..e25b0a7 --- /dev/null +++ b/src/app/pages/progressBars/widgets/animated.html @@ -0,0 +1,20 @@ +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
\ No newline at end of file diff --git a/src/app/pages/progressBars/widgets/basic.html b/src/app/pages/progressBars/widgets/basic.html new file mode 100644 index 0000000..0fb3b2f --- /dev/null +++ b/src/app/pages/progressBars/widgets/basic.html @@ -0,0 +1,20 @@ +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
\ No newline at end of file diff --git a/src/app/pages/progressBars/widgets/label.html b/src/app/pages/progressBars/widgets/label.html new file mode 100644 index 0000000..8258fe7 --- /dev/null +++ b/src/app/pages/progressBars/widgets/label.html @@ -0,0 +1,20 @@ +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
\ No newline at end of file diff --git a/src/app/pages/progressBars/widgets/stacked.html b/src/app/pages/progressBars/widgets/stacked.html new file mode 100644 index 0000000..4d3f223 --- /dev/null +++ b/src/app/pages/progressBars/widgets/stacked.html @@ -0,0 +1,14 @@ +
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+ 20% Complete (warning) +
+
\ No newline at end of file diff --git a/src/app/pages/progressBars/widgets/striped.html b/src/app/pages/progressBars/widgets/striped.html new file mode 100644 index 0000000..7e6ae5d --- /dev/null +++ b/src/app/pages/progressBars/widgets/striped.html @@ -0,0 +1,20 @@ +
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete (danger) +
+
\ No newline at end of file diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 7dfa644..78873f3 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -35,6 +35,7 @@ "../../app/pages/grid/grid.scss", "../../app/pages/alerts/alerts.scss", "../../app/pages/mail/mail.scss", +"../../app/pages/progressBars/progressBars.scss", "../../app/pages/mail/widgets/email-widget/email.scss", "../../app/pages/maps/widgets/leaflet/leaflet.scss", "../../app/pages/maps/widgets/google-maps/google-maps.scss", From 7fb008ae843e129708c90e7dd77f7a7c18ab11fd Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 15 Dec 2015 16:45:46 +0300 Subject: [PATCH 4/6] notification widget --- src/app/app.js | 1 + src/app/components/contentTop/contentTop.js | 1 + src/app/components/sidebar/sidebar.js | 4 + src/app/pages/alerts/alerts.js | 4 + .../pages/notifications/_notifications.scss | 25 +++ .../pages/notifications/notifications.html | 151 ++++++++++++++++++ src/app/pages/notifications/notifications.js | 121 ++++++++++++++ src/app/pages/progressBars/_progressBars.scss | 0 src/assets/css/main.scss | 2 +- 9 files changed, 308 insertions(+), 1 deletion(-) create mode 100644 src/app/pages/notifications/_notifications.scss create mode 100644 src/app/pages/notifications/notifications.html create mode 100644 src/app/pages/notifications/notifications.js delete mode 100644 src/app/pages/progressBars/_progressBars.scss diff --git a/src/app/app.js b/src/app/app.js index cd72e99..2da1ceb 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -15,6 +15,7 @@ var blurAdminApp = angular.module('BlurAdmin', [ 'BlurAdmin.iconsPage', 'BlurAdmin.mapsPage', 'BlurAdmin.progressBarsPage', + 'BlurAdmin.notificationsPage', 'BlurAdmin.modalsPage', 'BlurAdmin.profilePage', 'BlurAdmin.tablesPage', diff --git a/src/app/components/contentTop/contentTop.js b/src/app/components/contentTop/contentTop.js index 04f93b9..2d9e0c4 100644 --- a/src/app/components/contentTop/contentTop.js +++ b/src/app/components/contentTop/contentTop.js @@ -17,6 +17,7 @@ blurAdminApp.directive('contentTop', ['$location', function ($location) { '/grid': 'Grid', '/alerts': 'Alerts', '/progressBars': 'Progress Bars', + '/notifications': 'Notifications', '/icons': 'Icons', '/login': 'Authentication', '/maps': 'Maps', diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js index 1f1aa2b..d192c74 100644 --- a/src/app/components/sidebar/sidebar.js +++ b/src/app/components/sidebar/sidebar.js @@ -69,6 +69,10 @@ blurAdminApp.directive('sidebar', function () { { title: 'Progress Bars', root: '#/progressBars' + }, + { + title: 'Notifications', + root: '#/notifications' } ] }, diff --git a/src/app/pages/alerts/alerts.js b/src/app/pages/alerts/alerts.js index 6118021..31fc397 100644 --- a/src/app/pages/alerts/alerts.js +++ b/src/app/pages/alerts/alerts.js @@ -14,17 +14,21 @@ angular.module('BlurAdmin.alertsPage', ['ngRoute']) widgets: [ [ { + title: 'Basic', url: 'app/pages/alerts/widgets/default.html' }, { + title: 'Dismissible alerts', url: 'app/pages/alerts/widgets/closeable.html' } ], [ { + title: 'Links in alerts', url: 'app/pages/alerts/widgets/link.html' }, { + title: 'Composite alerts', url: 'app/pages/alerts/widgets/composite.html' } ] diff --git a/src/app/pages/notifications/_notifications.scss b/src/app/pages/notifications/_notifications.scss new file mode 100644 index 0000000..87298b3 --- /dev/null +++ b/src/app/pages/notifications/_notifications.scss @@ -0,0 +1,25 @@ +.control{ + margin-bottom: 10px; + .form-control{ + width: 75%; + } + span{ + white-space: pre-line; + } +} + +.toastr-radio-setup{ + margin-left: 22px; +} +.radio-header{ + + margin-bottom: 0; + &.position-header{ + margin-top: 15px; + } +} + +.result-toastr{ + margin-top: 15px; + border-radius: 0; +} \ No newline at end of file diff --git a/src/app/pages/notifications/notifications.html b/src/app/pages/notifications/notifications.html new file mode 100644 index 0000000..de533ca --- /dev/null +++ b/src/app/pages/notifications/notifications.html @@ -0,0 +1,151 @@ + +
+
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + +
+
+
+
+ + + + + + + + + +
+
+
+
+
+ + + +
+
+ + +
+
+ + + +
+
+ +
+
+
+ 
{{optionsStr}}
+
+
+ +
+
+ + + + +
+
+ + diff --git a/src/app/pages/notifications/notifications.js b/src/app/pages/notifications/notifications.js new file mode 100644 index 0000000..251601f --- /dev/null +++ b/src/app/pages/notifications/notifications.js @@ -0,0 +1,121 @@ +'use strict'; + +angular.module('BlurAdmin.notificationsPage', ['ngRoute']) + + .config(['$routeProvider', function ($routeProvider) { + $routeProvider.when('/notifications', { + templateUrl: 'app/pages/notifications/notifications.html', + controller: 'notificationsPageCtrl' + }); + }]) + .controller('notificationsPageCtrl', ['$scope', 'toastr', 'toastrConfig', + function ($scope, toastr, toastrConfig) { + + + $scope.types = ['success', 'error', 'info', 'warning']; + + $scope.quotes = [ + { + title: 'Come to Freenode', + message: 'We rock at #angularjs', + options: { + allowHtml: true + } + }, + { + title: 'Looking for bootstrap?', + message: 'Try ui-bootstrap out!' + }, + { + title: 'Wants a better router?', + message: 'We have you covered with ui-router' + }, + { + title: 'Angular 2', + message: 'Is gonna rock the world' + }, + { + title: null, + message: 'Titles are not always needed' + }, + { + title: null, + message: 'Toastr rock!' + }, + { + title: 'What about nice html?', + message: 'Sure you can!', + options: { + allowHtml: true + } + }, + { + title: 'Ionic is cool', + message: 'Best mobile framework ever', + options: { + allowHtml: true + } + } + ]; + + var openedToasts = []; + $scope.options = { + autoDismiss: false, + position: 'toast-top-right', + type: 'success', + timeout: '5000', + extendedTimeout: '1000', + html: false, + closeButton: false, + tapToDismiss: true, + progressBar: false, + newestOnTop: true, + maxOpened: 0, + preventDuplicates: false, + preventOpenDuplicates: false, + title: "Some title here", + msg: "Type your message here" + }; + + $scope.$watchCollection('options', function (newValue) { + toastrConfig.autoDismiss = newValue.autoDismiss; + toastrConfig.allowHtml = newValue.html; + toastrConfig.extendedTimeOut = parseInt(newValue.extendedTimeout, 10); + toastrConfig.positionClass = newValue.position; + toastrConfig.timeOut = parseInt(newValue.timeout, 10); + toastrConfig.closeButton = newValue.closeButton; + toastrConfig.tapToDismiss = newValue.tapToDismiss; + toastrConfig.progressBar = newValue.progressBar; + toastrConfig.newestOnTop = newValue.newestOnTop; + toastrConfig.maxOpened = newValue.maxOpened; + toastrConfig.preventDuplicates = newValue.preventDuplicates; + toastrConfig.preventOpenDuplicates = newValue.preventOpenDuplicates; + }); + + + $scope.clearLastToast = function () { + var toast = openedToasts.pop(); + toastr.clear(toast); + }; + + $scope.clearToasts = function () { + toastr.clear(); + }; + + $scope.openRandomToast = function () { + var type = Math.floor(Math.random() * 4); + var quote = Math.floor(Math.random() * 7); + var toastType = $scope.types[type]; + var toastQuote = $scope.quotes[quote]; + openedToasts.push(toastr[toastType](toastQuote.message, toastQuote.title, toastQuote.options)); + $scope.optionsStr = "toastr." + toastType + "(\'" + toastQuote.message + "\', \'" + toastQuote.title + "', " + JSON.stringify(toastQuote.options || {}, null, 2) + ")"; + }; + + $scope.openToast = function () { + openedToasts.push(toastr[$scope.options.type]($scope.options.msg, $scope.options.title)); + var strOptions = {}; + for (var o in $scope.options) if (o != 'msg' && o != 'title')strOptions[o] = $scope.options[o]; + $scope.optionsStr = "toastr." + $scope.options.type + "(\'" + $scope.options.msg + "\', \'" + $scope.options.title + "\', " + JSON.stringify(strOptions, null, 2) + ")"; + }; + + }]); \ No newline at end of file diff --git a/src/app/pages/progressBars/_progressBars.scss b/src/app/pages/progressBars/_progressBars.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 78873f3..34b9c7c 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -35,7 +35,7 @@ "../../app/pages/grid/grid.scss", "../../app/pages/alerts/alerts.scss", "../../app/pages/mail/mail.scss", -"../../app/pages/progressBars/progressBars.scss", +"../../app/pages/notifications/notifications.scss", "../../app/pages/mail/widgets/email-widget/email.scss", "../../app/pages/maps/widgets/leaflet/leaflet.scss", "../../app/pages/maps/widgets/google-maps/google-maps.scss", From c2c6ff3920c0483a6f7d9f63a530f80e47695a4d Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 15 Dec 2015 16:46:12 +0300 Subject: [PATCH 5/6] alerts widget: fix headers --- src/app/pages/alerts/widgets/closeable.html | 1 - src/app/pages/alerts/widgets/composite.html | 1 - src/app/pages/alerts/widgets/default.html | 1 - src/app/pages/alerts/widgets/link.html | 1 - 4 files changed, 4 deletions(-) diff --git a/src/app/pages/alerts/widgets/closeable.html b/src/app/pages/alerts/widgets/closeable.html index 201f5cc..9ab157a 100644 --- a/src/app/pages/alerts/widgets/closeable.html +++ b/src/app/pages/alerts/widgets/closeable.html @@ -1,4 +1,3 @@ -

Alerts with close icon