diff --git a/src/app/app.js b/src/app/app.js index 1c40fd9..165026e 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -6,12 +6,17 @@ var blurAdminApp = angular.module('BlurAdmin', [ 'ngTouch', 'BlurAdmin.theme', 'BlurAdmin.dashboard', + 'BlurAdmin.mail', 'BlurAdmin.buttonsPage', + 'BlurAdmin.gridPage', 'BlurAdmin.chartsPage', + 'BlurAdmin.alertsPage', 'BlurAdmin.formInputsPage', 'BlurAdmin.formLayoutsPage', 'BlurAdmin.iconsPage', 'BlurAdmin.mapsPage', + 'BlurAdmin.progressBarsPage', + 'BlurAdmin.notificationsPage', 'BlurAdmin.modalsPage', 'BlurAdmin.profilePage', 'BlurAdmin.tablesPage', 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..31fc397 --- /dev/null +++ b/src/app/pages/alerts/alerts.js @@ -0,0 +1,38 @@ +'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: [ + [ + { + 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' + } + ] + ] + } + ]; + }]); \ 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..9ab157a --- /dev/null +++ b/src/app/pages/alerts/widgets/closeable.html @@ -0,0 +1,15 @@ +
+ + + + +
+ diff --git a/src/app/pages/alerts/widgets/composite.html b/src/app/pages/alerts/widgets/composite.html new file mode 100644 index 0000000..4da57e8 --- /dev/null +++ b/src/app/pages/alerts/widgets/composite.html @@ -0,0 +1,10 @@ +
+
+
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..17c7779 --- /dev/null +++ b/src/app/pages/alerts/widgets/default.html @@ -0,0 +1,14 @@ +
+
+ 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..5697e61 --- /dev/null +++ b/src/app/pages/alerts/widgets/link.html @@ -0,0 +1,14 @@ +
+
+ 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/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.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/notifications/notifications.html b/src/app/pages/notifications/notifications.html new file mode 100644 index 0000000..d0e285c --- /dev/null +++ b/src/app/pages/notifications/notifications.html @@ -0,0 +1,152 @@ + +
+
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + +
+
+
+
+ + + + + + + + + +
+
+
+
+
+ + + +
+
+ + +
+
+ + + +
+
+ +
+
+
+ + 
{{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.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/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/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js index 4ea39ae..ca9b20b 100644 --- a/src/app/theme/components/contentTop/contentTop.directive.js +++ b/src/app/theme/components/contentTop/contentTop.directive.js @@ -21,6 +21,9 @@ '/buttons': 'Buttons', '/charts': 'Charts', '/grid': 'Grid', + '/alerts': 'Alerts', + '/progressBars': 'Progress Bars', + '/notifications': 'Notifications', '/icons': 'Icons', '/login': 'Authentication', '/maps': 'Maps', diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js index f6b6932..7c8a989 100644 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ b/src/app/theme/components/sidebar/SidebarCtrl.js @@ -59,9 +59,30 @@ { title: 'Modals', root: '#/modals' + }, + { + title: 'Grid', + root: '#/grid' + }, + { + title: 'Alerts', + root: '#/alerts' + }, + { + title: 'Progress Bars', + root: '#/progressBars' + }, + { + title: 'Notifications', + root: '#/notifications' } ] }, + { + title: 'Mail', + icon: 'ion-ios-email-outline', + root: '#/mail' + }, { title: 'Maps', icon: 'ion-ios-location-outline', diff --git a/src/sass/app/_alerts.scss b/src/sass/app/_alerts.scss new file mode 100644 index 0000000..0f0c6c4 --- /dev/null +++ b/src/sass/app/_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/sass/app/_grid.scss b/src/sass/app/_grid.scss new file mode 100644 index 0000000..be4cd38 --- /dev/null +++ b/src/sass/app/_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/sass/app/_mail.scss b/src/sass/app/_mail.scss new file mode 100644 index 0000000..d153d09 --- /dev/null +++ b/src/sass/app/_mail.scss @@ -0,0 +1,5 @@ +.mail-container{ + div{ + + } +} \ No newline at end of file diff --git a/src/sass/app/_notifications.scss b/src/sass/app/_notifications.scss new file mode 100644 index 0000000..9fc06fa --- /dev/null +++ b/src/sass/app/_notifications.scss @@ -0,0 +1,32 @@ +.control{ + margin-bottom: 10px; + .form-control{ + width: 75%; + } + span{ + white-space: pre-line; + } +} + +@media (max-width: 991px) { + .toastr-radio-setup { + margin-left: 22px; + } +} +.radio-header{ + + margin-bottom: 0; + &.position-header{ + margin-top: 15px; + } +} + +.button-row{ + line-height: 37px; + button{ + width: 125px; + } +} +.result-toastr{ + border-radius: 0; +} \ No newline at end of file diff --git a/src/sass/app/_typography.scss b/src/sass/app/_typography.scss index 174fd68..eca9b18 100644 --- a/src/sass/app/_typography.scss +++ b/src/sass/app/_typography.scss @@ -53,223 +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: 10px; - 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; } } } @@ -277,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; } @@ -295,8 +291,6 @@ p.small-text { margin-bottom: 8px; } - - .cols-two { margin-bottom: 50px; & > div { @@ -342,8 +336,6 @@ a.learn-more { margin-bottom: 10px; } - - .banner { position: relative; margin-bottom: 20px; @@ -393,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; } } @@ -424,8 +416,6 @@ a.learn-more { } } - - .section-block { padding-bottom: 12px; } @@ -442,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