mirror of https://github.com/akveo/blur-admin
refactor&fix(modals): use bootstrap ui instead simple bootstrap
alex
parent
648e4e2123
commit
fe8f8fd704
|
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* @author a.demeshko
|
||||
* created on 18.01.2016
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.ui.notifications')
|
||||
.controller('ModalsPageCtrl', ModalsPageCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function ModalsPageCtrl($scope, $uibModal) {
|
||||
$scope.open = function (page, size) {
|
||||
$uibModal.open({
|
||||
animation: true,
|
||||
templateUrl: page,
|
||||
size: size,
|
||||
resolve: {
|
||||
items: function () {
|
||||
return $scope.items;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
})();
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<div class="modal-buttons same-width clearfix">
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#successModal">Success Message</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#infoModal">Info Message</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#warningModal">Warning Message</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dangerModal">Danger Message</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header bg-danger">
|
||||
<i class="ion-flame"></i><span> Error</span>
|
||||
</div>
|
||||
<div class="modal-body text-center">Your information hasn't been saved!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" ng-click="$dismiss()">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header bg-info">
|
||||
<i class="ion-information-circled"></i><span> Information</span>
|
||||
</div>
|
||||
<div class="modal-body text-center">You've got a new email!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-info" ng-click="$dismiss()">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" ng-click="$dismiss()" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" ng-click="$dismiss()">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header bg-success">
|
||||
<i class="ion-checkmark"></i><span> Success</span>
|
||||
</div>
|
||||
<div class="modal-body text-center">Your information has been saved successfully</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" ng-click="$dismiss()">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header bg-warning">
|
||||
<i class="ion-android-warning"></i><span> Warning</span>
|
||||
</div>
|
||||
<div class="modal-body text-center">Your computer is about to explode!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning" ng-click="$dismiss()">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,15 @@
|
|||
ba-panel
|
||||
ba-panel-title="Modals"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/modals/modalsPanel.html'"></div>
|
||||
<div class="modal-buttons clearfix">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/basicModal.html', 'md')">Default modal</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/largeModal.html', 'lg')">
|
||||
Large modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/smallModal.html', 'sm')">
|
||||
Small modal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -14,7 +22,18 @@
|
|||
ba-panel
|
||||
ba-panel-title="Message Modals"
|
||||
ba-panel-class="with-scroll">
|
||||
<div ng-include="'app/pages/ui/modals/message-modals.html'"></div>
|
||||
<div class="modal-buttons same-width clearfix">
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/successModal.html')">
|
||||
Success Message
|
||||
</button>
|
||||
<button type="button" class="btn btn-info" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/infoModal.html')">Info Message</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/warningModal.html')">
|
||||
Warning Message
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" ng-click="open('/app/pages/ui/modals/modalTemplates/dangerModal.html')">
|
||||
Danger Message
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6"
|
||||
ba-panel
|
||||
|
|
@ -25,138 +44,3 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Large modal -->
|
||||
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
|
||||
<div class="modal-dialog modal-sm" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<em class="ion-ios-close-empty sn-link-close"></em>
|
||||
</button>
|
||||
<h4 class="modal-title">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
|
||||
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
|
||||
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success modal -->
|
||||
<div class="modal fade message-modal success-modal" id="successModal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="mySmallModalLabel">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<i class="ion-checkmark"></i>
|
||||
</div>
|
||||
<div class="modal-title">Success</div>
|
||||
<div class="modal-body">Your information has been saved successfully</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info modal -->
|
||||
<div class="modal fade message-modal info-modal" id="infoModal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="mySmallModalLabel">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<i class="ion-information"></i>
|
||||
</div>
|
||||
<div class="modal-title">Information</div>
|
||||
<div class="modal-body">You've got a new email!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warning modal -->
|
||||
<div class="modal fade message-modal warning-modal" id="warningModal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="mySmallModalLabel">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<i class="ion-android-warning"></i>
|
||||
</div>
|
||||
<div class="modal-title">Warning</div>
|
||||
<div class="modal-body">Your computer is about to explode!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger modal -->
|
||||
<div class="modal fade message-modal danger-modal" id="dangerModal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="mySmallModalLabel">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<i class="ion-flame"></i>
|
||||
</div>
|
||||
<div class="modal-title">Error</div>
|
||||
<div class="modal-body">Your information hasn't been saved!</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
.state('ui.modals', {
|
||||
url: '/modals',
|
||||
templateUrl: 'app/pages/ui/modals/modals.html',
|
||||
controller: 'ModalsPageCtrl',
|
||||
title: 'Modals',
|
||||
sidebarMeta: {
|
||||
order: 300,
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<div class="modal-buttons clearfix">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Default modal</button>
|
||||
<button type="button" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||||
<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
</div>
|
||||
|
|
@ -85,6 +85,7 @@ textarea.form-control {
|
|||
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
color: $default-text;
|
||||
}
|
||||
|
||||
@mixin setSwitchBorder($color) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue