Made confirm delete dialog pre-rendered

index.html

@@ -21,6 +21,6 @@
         <span>Загрузка...</span>
     </div>
     <script src="https://apis.google.com/js/api.js"></script>
-<script type="text/javascript" src="/vendor.d5361600659682212156.js"></script><script type="text/javascript" src="/app.d5361600659682212156.js"></script></body>
+<script type="text/javascript" src="/vendor.37bcbfa407ae1e6ee11a.js"></script><script type="text/javascript" src="/app.37bcbfa407ae1e6ee11a.js"></script></body>
 
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youlikeapp",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/youlikeapp/youlikeapp.github.io"

src/app/components/main/main.component.ts

@@ -1,6 +1,6 @@
-import { YouTubeService, CheckingResult } from "../../common/youtube/youtube.service";
-import { blockUI, material } from "angular";
 import * as toastr from "toastr";
+import { blockUI, material } from "angular";
+import { YouTubeService, CheckingResult } from "../../common/youtube/youtube.service";
 
 import "./main.scss";
 
@@ -107,18 +107,22 @@ class MainController implements ng.IComponentController {
         toastr.success("Список видео сохранён.");
     }
 
-    public clearList(): void {
-        let confirm: material.IConfirmDialog = this.$mdDialog.confirm()
-            .title("Подтверждение действия")
-            .textContent("Вы уверены, что хотите удалить список видео?")
-            .ok("Да")
-            .cancel("Нет");
+    public showClearListDialog(): void {
+        this.$mdDialog.show({
+            contentElement: "#confirmDeleteDialog",
+            parent: document.body
+        });
+    }
 
-        this.$mdDialog.show(confirm).then((value) => {
-            localStorage.removeItem("videosList");
+    public closeClearListDialog(): void {
+        this.$mdDialog.cancel();
+    }
 
-            toastr.success("Список видео удалён.");
-        });
+    public clearList(): void {
+        this.$mdDialog.hide();
+        localStorage.removeItem("videosList");
+
+        toastr.success("Список видео удалён.");
     }
 
     public loadList(): void {

src/app/components/main/main.html

@@ -21,7 +21,7 @@ <h1 class="md-headline">Восстановление лайков</h1>
 						Загрузить
 					</md-button>
 					<md-button class="md-raised md-accent" ng-if="$ctrl.hasVideosInStorage" 
-					ng-click="$ctrl.clearList()" id="clearListBtn">
+					ng-click="$ctrl.showClearListDialog()">
 						<md-icon class="material-icons">&#xE872;</md-icon>
 						Удалить
 					</md-button>	
@@ -49,4 +49,25 @@ <h3>Результат выставления лайков</h3>
 		</div>
 	</div>
 </div>
-<input id="forceUpdate" type="hidden" ng-click="$ctrl.forceUpdate()" />
+<input id="forceUpdate" type="hidden" ng-click="$ctrl.forceUpdate()" />
+<div class="confirm-dialog-container">
+	<div class="md-dialog-container" id="confirmDeleteDialog">
+		<md-dialog md-theme="default" aria-label="Подтверждение действия" ng-class="dialog.css" 
+			role="dialog" tabindex="-1">
+			<md-dialog-content class="md-dialog-content" role="document" tabindex="-1">
+				<h2>Подтверждение действия</h2>
+				<div>
+					<p>Вы уверены, что хотите удалить список видео?</p>
+				</div>
+			</md-dialog-content>
+			<md-dialog-actions>
+				<md-button class="md-primary md-cancel-button" ng-click="$ctrl.closeClearListDialog()">
+					<span>Нет</span>
+				</md-button>
+				<md-button class="md-primary md-raised md-accent md-confirm-button" ng-click="$ctrl.clearList()">
+					<span>Да</span>
+				</md-button>
+			</md-dialog-actions>
+		</md-dialog>
+	</div>
+</div>

src/app/components/main/main.scss

@@ -1,3 +1,7 @@
 .list-empty {
     color: #999 !important;
+}
+
+.confirm-dialog-container {
+    visibility: hidden;
 }