Browse Source

Redesign settings and lock screen

pull/64/head
brantje 2 years ago
parent
commit
a4df8183d9
No account linked to committer's email address

+ 8
- 0
_locales/en/messages.json View File

@@ -187,6 +187,10 @@
187 187
     "message": "Disable browser auto fill",
188 188
     "description": "Disable auto fill of forms"
189 189
   },
190
+  "ignore_site_placeholder": {
191
+    "message": "Enter a domain or tld to ignore and press enter",
192
+    "description": "Disable auto fill of forms"
193
+  },
190 194
   "disable_password_picker": {
191 195
     "message": "Disable password picker",
192 196
     "description": "Disable password picker"
@@ -271,6 +275,10 @@
271 275
     "message": "Remember master password",
272 276
     "description": "Remember master password"
273 277
   },
278
+  "master_pw_warning": {
279
+    "message": "Warning! Your master password will be stored in plain text",
280
+    "description": "Remember master password"
281
+  },
274 282
   "done": {
275 283
     "message": "Done",
276 284
     "description": "Done"

+ 242
- 4
css/browser_action.css View File

@@ -50,13 +50,22 @@
50 50
       color: #737373; }
51 51
     .list .list-item .mdi {
52 52
       cursor: pointer; }
53
+  .list .list-item.no-hover:hover {
54
+    background-color: transparent; }
53 55
 
56
+/**
57
+  Source: https://codepen.io/sevilayha/pen/IdGKH
58
+  Edited to work with angular
59
+ */
54 60
 /* form starting stylings ------------------------------- */
55 61
 .group {
56 62
   position: relative;
57 63
   margin-bottom: 45px; }
58 64
 
59
-input[type="text"], input[type="password"] {
65
+.group:last-child {
66
+  margin-bottom: 0; }
67
+
68
+input[type="text"], input[type="password"], select.input-md {
60 69
   font-size: 14px;
61 70
   padding: 10px 10px 10px 5px;
62 71
   display: block;
@@ -64,9 +73,13 @@ input[type="text"], input[type="password"] {
64 73
   border: none;
65 74
   border-bottom: 1px solid #757575; }
66 75
 
67
-input:focus {
76
+input:focus, select.input-md:focus {
68 77
   outline: none; }
69 78
 
79
+select.input-md {
80
+  background-color: #fff;
81
+  cursor: pointer; }
82
+
70 83
 /* LABEL ======================================= */
71 84
 .group label {
72 85
   color: #999;
@@ -81,7 +94,9 @@ input:focus {
81 94
   -webkit-transition: 0.2s ease all; }
82 95
 
83 96
 /* active state */
84
-input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
97
+input[type="text"]:focus ~ label, input[type="password"]:focus ~ label,
98
+input[type="text"].ng-valid:not(.ng-empty) ~ label, input[type="password"].ng-valid:not(.ng-empty) ~ label,
99
+select.ng-valid:not(.ng-empty) ~ label {
85 100
   top: -20px;
86 101
   font-size: 14px;
87 102
   color: #1565c0; }
@@ -156,7 +171,7 @@ input:focus ~ .bar:before, input:focus ~ .bar:after {
156 171
   width: calc(100% - 32px); }
157 172
 
158 173
 /* active state */
159
-input:focus ~ .highlight {
174
+input:focus ~ .highlight, select.input-md ~ .highlight {
160 175
   -webkit-animation: inputHighlighter 0.3s ease;
161 176
   -moz-animation: inputHighlighter 0.3s ease;
162 177
   animation: inputHighlighter 0.3s ease; }
@@ -180,6 +195,179 @@ input:focus ~ .highlight {
180 195
   to {
181 196
     width: 0;
182 197
     background: transparent; } }
198
+/**
199
+  Source: https://codepen.io/guuslieben/pen/YyPRVP
200
+ */
201
+.switch-input {
202
+  display: none; }
203
+
204
+.switch-label {
205
+  position: relative;
206
+  display: inline-block;
207
+  min-width: 112px;
208
+  cursor: pointer;
209
+  font-weight: 500;
210
+  text-align: left;
211
+  padding: 16px 0 16px 44px; }
212
+
213
+.switch-label:before, .switch-label:after {
214
+  content: "";
215
+  position: absolute;
216
+  margin: 0;
217
+  outline: 0;
218
+  top: 50%;
219
+  -ms-transform: translate(0, -50%);
220
+  -webkit-transform: translate(0, -50%);
221
+  transform: translate(0, -50%);
222
+  -webkit-transition: all 0.3s ease;
223
+  transition: all 0.3s ease; }
224
+
225
+.switch-label:before {
226
+  left: 1px;
227
+  width: 34px;
228
+  height: 14px;
229
+  background-color: #9E9E9E;
230
+  border-radius: 8px; }
231
+
232
+.switch-label:after {
233
+  left: 0;
234
+  width: 20px;
235
+  height: 20px;
236
+  background-color: #FAFAFA;
237
+  border-radius: 50%;
238
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084); }
239
+
240
+.switch-label .toggle--on {
241
+  display: none; }
242
+
243
+.switch-label .toggle--off {
244
+  display: inline-block; }
245
+
246
+.switch-input:checked + .switch-label:before {
247
+  background-color: #4f98ec; }
248
+
249
+.switch-input:checked + .switch-label:after {
250
+  background-color: #1565c0;
251
+  -ms-transform: translate(80%, -50%);
252
+  -webkit-transform: translate(80%, -50%);
253
+  transform: translate(80%, -50%); }
254
+
255
+.switch-input:checked + .switch-label .toggle--on {
256
+  display: inline-block; }
257
+
258
+.switch-input:checked + .switch-label .toggle--off {
259
+  display: none; }
260
+
261
+/**
262
+  Source: https://codepen.io/anon/pen/PmEeyo
263
+ */
264
+.md-checkbox {
265
+  color: #818181;
266
+  font-size: 15px;
267
+  font-weight: bold;
268
+  font-family: 'Roboto', sans-serif;
269
+  letter-spacing: .5px; }
270
+  .md-checkbox .input-checkbox {
271
+    position: relative;
272
+    display: inline-block;
273
+    width: 32px;
274
+    text-align: center;
275
+    vertical-align: -9px; }
276
+    .md-checkbox .input-checkbox input[type="checkbox"] {
277
+      visibility: hidden;
278
+      position: absolute;
279
+      left: 7px;
280
+      bottom: 7px;
281
+      margin: 0;
282
+      padding: 0;
283
+      outline: none;
284
+      cursor: pointer;
285
+      opacity: 0; }
286
+      .md-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
287
+        position: absolute;
288
+        left: 4px;
289
+        bottom: 8px;
290
+        width: 18px;
291
+        height: 18px;
292
+        font-family: 'Material Icons';
293
+        font-weight: normal;
294
+        font-style: normal;
295
+        font-size: 24px;
296
+        line-height: 1;
297
+        text-transform: none;
298
+        letter-spacing: normal;
299
+        word-wrap: normal;
300
+        white-space: nowrap;
301
+        direction: ltr;
302
+        vertical-align: -6px;
303
+        /* Support for all WebKit browsers. */
304
+        -webkit-font-smoothing: antialiased;
305
+        /* Support for Safari and Chrome. */
306
+        text-rendering: optimizeLegibility;
307
+        /* Support for Firefox. */
308
+        -moz-osx-font-smoothing: grayscale;
309
+        /* Support for IE. */
310
+        font-feature-settings: 'liga';
311
+        transition: all .2s ease;
312
+        z-index: 1; }
313
+      .md-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
314
+        content: "\e835";
315
+        color: #717171; }
316
+      .md-checkbox .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
317
+        content: "\e834"; }
318
+      .md-checkbox .input-checkbox input[type="checkbox"]:active:not(:disabled) + .checkbox:before {
319
+        transform: scale3d(0.88, 0.88, 1); }
320
+      .md-checkbox .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
321
+        color: rgba(0, 0, 0, 0.157) !important; }
322
+  .md-checkbox.checkbox-light label, .md-checkbox.checkbox-light .label {
323
+    color: #FFF; }
324
+  .md-checkbox.checkbox-light input[type="checkbox"] + .checkbox:before {
325
+    color: #FFF; }
326
+  .md-checkbox.checkbox-light input[type="checkbox"]:disabled + .checkbox:before {
327
+    color: #5d5d5d !important; }
328
+  .md-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"] + .checkbox:before {
329
+    border-color: #FFF; }
330
+  .md-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"]:disabled + .checkbox:before {
331
+    border-color: #5d5d5d !important; }
332
+  .md-checkbox label, .md-checkbox .label {
333
+    cursor: pointer;
334
+    color: #797979; }
335
+
336
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox {
337
+  cursor: pointer; }
338
+  .md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox:before {
339
+    content: "";
340
+    position: absolute;
341
+    left: 7px;
342
+    bottom: 7px;
343
+    width: 18px;
344
+    height: 18px;
345
+    border: 2px solid #717171;
346
+    border-radius: 2px;
347
+    transition: all .2s ease;
348
+    z-index: 1; }
349
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
350
+  left: 11px;
351
+  width: 12px;
352
+  height: 20px;
353
+  border-width: 2px;
354
+  border-style: solid;
355
+  border-top: transparent;
356
+  border-left: transparent;
357
+  transform: rotate(40deg);
358
+  border-radius: 1px; }
359
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
360
+  border-color: rgba(0, 0, 0, 0.157) !important; }
361
+
362
+.md-checkbox:not(.checkbox-rotate) .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
363
+  color: #03a9f4; }
364
+
365
+.md-checkbox.checkbox-rotate .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
366
+  border-color: #03a9f4; }
367
+
368
+/**
369
+ Source: https://codepen.io/sebj54/pen/oxluI
370
+ */
183 371
 .md-btn {
184 372
   position: relative;
185 373
   margin: 0 15px 15px 15px;
@@ -369,3 +557,53 @@ body.toggled {
369 557
   float: left;
370 558
   color: #fff;
371 559
   cursor: pointer; }
560
+
561
+label, .switch-label, label:not(.input-checkbox):not(.label) {
562
+  font-weight: normal; }
563
+
564
+.ignored_sites {
565
+  padding: 0; }
566
+  .ignored_sites label {
567
+    font-size: 14px;
568
+    color: #1565c0; }
569
+  .ignored_sites li {
570
+    list-style-type: none;
571
+    height: 25px;
572
+    padding: 5px 0; }
573
+    .ignored_sites li .mdi {
574
+      margin-top: 2px;
575
+      cursor: pointer; }
576
+    .ignored_sites li .mdi:hover {
577
+      color: #a94442; }
578
+  .ignored_sites .group {
579
+    margin-bottom: 45px; }
580
+
581
+.invisible {
582
+  visibility: hidden; }
583
+
584
+.master_pw_warning {
585
+  padding-left: 6px;
586
+  font-size: 10px;
587
+  color: #a94442;
588
+  margin-bottom: 15px; }
589
+
590
+.master_pw_warning.big {
591
+  font-size: 14px;
592
+  text-align: center; }
593
+
594
+.unlock {
595
+  width: 350px;
596
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
597
+  margin: -20px auto 10px;
598
+  padding: 20px; }
599
+  .unlock .group {
600
+    margin-bottom: 25px; }
601
+  .unlock img {
602
+    height: 50px;
603
+    margin: 15px auto;
604
+    display: block; }
605
+  .unlock .md-checkbox {
606
+    margin: 15px 0; }
607
+  .unlock .md-btn {
608
+    margin: 5px auto;
609
+    display: block; }

+ 2
- 2
css/vendor/bootstrap.css View File

@@ -2505,7 +2505,7 @@ legend {
2505 2505
   border: 0;
2506 2506
   border-bottom: 1px solid #e5e5e5;
2507 2507
 }
2508
-label {
2508
+label:not(.input-checkbox):not(.label) {
2509 2509
   display: inline-block;
2510 2510
   max-width: 100%;
2511 2511
   margin-bottom: 5px;
@@ -4842,7 +4842,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
4842 4842
   cursor: not-allowed;
4843 4843
   background-color: #fff;
4844 4844
 }
4845
-.label {
4845
+.label:not(.input-checkbox):not(.label) {
4846 4846
   display: inline;
4847 4847
   padding: .2em .6em .3em;
4848 4848
   font-size: 75%;

+ 4
- 1
html/browser_action/browser_action.html View File

@@ -85,10 +85,13 @@
85 85
         </div>
86 86
         <!-- /#sidebar-wrapper -->
87 87
 
88
-        <header class="header" ng-class="{'toggled': menuIsOpen}">
88
+        <header class="header" ng-class="{'toggled': menuIsOpen}" ng-show="showHeader">
89 89
             <div class="menu-icon" ng-click="toggleMenu()">
90 90
                 <i class="mdi mdi-menu"></i>
91 91
             </div>
92
+            <div class="menu-icon pull-right" ng-click="lockExtension()">
93
+                <i class="mdi mdi-lock"></i>
94
+            </div>
92 95
         </header>
93 96
         <!-- Page Content -->
94 97
         <div id="page-content-wrapper" ng-view>

+ 3
- 21
html/browser_action/views/list.html View File

@@ -1,8 +1,8 @@
1 1
 <div class="list">
2
-    <!-- <div ng-show="found_credentials.length === 0">
2
+    <div class="list-item no-hover"  ng-show="found_credentials.length === 0">
3 3
         {{ 'no_credentials_found_for_site' | translate}}
4 4
     </div>
5
-    <div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div> -->
5
+   <!-- <div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div> -->
6 6
     <div class="list-item" ng-repeat="credential in found_credentials">
7 7
         <div class="title">
8 8
             {{credential.label}}
@@ -18,22 +18,4 @@
18 18
         </div>
19 19
 
20 20
     </div>
21
-</div>
22
-<!--
23
-<div class="footer">
24
-    <div style="position: absolute; left: 50%; margin-top: -7px; width: 110px;">
25
-        <div style="position: relative; left: -50%; margin-top: 1.3em;">
26
-            <small>{{'credentials_in_db' | translate:credential_amount}}</small>
27
-        </div>
28
-    </div>
29
-    <div class="bottomBtn" ng-click="goto_settings()" title="{{'settings' | translate}}"><i class="fa fa-gears"></i></div>
30
-    <div class="bottomBtn" ng-click="goto_search()" title="{{'search' | translate}}"><i class="fa fa-search"></i></div>
31
-    <div class="bottomBtn" ng-click="refresh()" title="{{'refresh_credential_list' | translate}}"><i class="fa fa-refresh" ng-class="{'fa-spin': refreshing_credentials}"></i></div>
32
-    <div class="bottomBtn pull-right"> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank"
33
-       title="{{'donate_button_title' | translate}}"
34
-       rel="nofollow noopener noreferrer"
35
-    ><i class="fa fa-paypal"></i> </a>
36
-    </div>
37
-    <div class="bottomBtn pull-right" ng-click="lockExtension()" title="{{'lock_extension' | translate}}"><i class="fa fa-lock"></i></div>
38
-
39
-</div> -->
21
+</div>

+ 32
- 12
html/browser_action/views/password_prompt.html View File

@@ -1,15 +1,35 @@
1
-<div class="content unlock" style="max-height: 160px; overflow: auto">
2
-    <div>
3
-       <i class="fa fa-lock fa-5x"></i>
4
-        <div>{{'extension_locked'| translate}}:</div>
5
-        <input class="form-control" type="password" ng-enter="apply_settings()" ng-model="master_password" />
6
-        <label><input type="checkbox" ng-model="master_password_remember">Remember master password</label>
7
-    </div>
1
+<div style="height: 400px">
2
+    <div class="content unlock">
3
+        <div>
4
+            <img src="/icons/passman_logo.png" height="80"/>
5
+            <div>{{'extension_locked'| translate}}:</div>
6
+            <div class="group">
7
+                <input type="password" ng-enter="apply_settings()" placeholder="{{'password' | translate}}"
8
+                       ng-model="master_password">
9
+                <span class="highlight"></span>
10
+                <span class="bar"></span>
11
+            </div>
8 12
 
9
-    <div ng-show="inValidPassword" class="error">
10
-       {{'invalid_master_password' | translate}}
11
-    </div>
12
-    <button class="btn btn-default stepNext" ng-click="apply_settings()" ng-disabled="saving"><i ng-show="saving" ng-class="{'fa-spinner fa-spin': saving}" class="fa"></i><i  ng-show="!saving" class="fa fa-unlock"></i> {{'unlock' | translate}}</button>
13
-</div>
13
+        </div>
14 14
 
15
+        <div class="md-checkbox checkbox-rotate">
16
+            <label class="input-checkbox checkbox-lightBlue">
17
+                <input type="checkbox" id="master_password_remember" ng-model="master_password_remember">
18
+                <span class="checkbox"></span>
19
+            </label>
20
+            <label for="master_password_remember" class="label">{{'remember_master_password' | translate}}</label>
21
+            <div class="master_pw_warning" ng-class="{'invisible': !master_password_remember }">
22
+                {{'master_pw_warning' | translate}}
23
+            </div>
24
+        </div>
25
+        <div class="master_pw_warning big" ng-class="{'invisible': !inValidPassword }">
26
+            {{'invalid_master_password' | translate}}
27
+        </div>
28
+        <button class="md-btn default" ng-click="apply_settings()" ng-disabled="saving">
29
+        <span><i ng-show="saving" ng-class="{'fa-spinner fa-spin': saving}" class="fa"></i><i ng-show="!saving"
30
+                                                                                              class="fa fa-unlock"></i> {{'unlock' | translate}}</span>
31
+        </button>
32
+
33
+    </div>
15 34
 
35
+</div>

+ 21
- 27
html/browser_action/views/search.html View File

@@ -1,38 +1,32 @@
1
-<div class="col-xs-12 nopadding pwcontainer">
1
+<div class="edit_credential">
2 2
     <div class="searchContainer">
3
-        <input type="text" ng-model="searchText" placeholder="{{'search_for' | translate }}..." class="form-control" ng-enter="search()"/>
3
+        <div class="group">
4
+            <input type="text" ng-enter="search()" ng-model="searchText">
5
+            <span class="highlight"></span>
6
+            <span class="bar"></span>
7
+            <label>{{'search_for' | translate }}</label>
8
+        </div>
9
+
4 10
     </div>
5
-    <div ng-show="found_credentials.length === 0">
11
+</div>
12
+<div class="list">
13
+    <div class="list-item no-hover"  ng-show="found_credentials.length === 0">
6 14
         {{'no_credentials_found' | translate}}
7 15
     </div>
8 16
 
9
-
10
-    <div class="credential" ng-repeat="credential in found_credentials">
11
-        <div class="col-xs-7 nopadding">{{credential.label}}<br/>
12
-            <small>{{credential.username}}</small>
13
-            <small>{{credential.email}}</small>
17
+    <div class="list-item" ng-repeat="credential in found_credentials">
18
+        <div class="title">
19
+            {{credential.label}}
20
+        </div>
21
+        <div class="info">
22
+            {{credential.username}}
14 23
         </div>
15
-        <div class="col-xs-5 OTP" ng-if="credential.otp.secret">
24
+        <div class="extra" ng-if="credential.otp.secret">
16 25
             {{'one_time_password' | translate}}: <div otp-generator secret="credential.otp.secret"></div>
17 26
         </div>
18
-    </div>
19
-</div>
20
-
21
-<div class="footer">
22
-    <div style="position: absolute; left: 50%; margin-top: -7px; width: 110px;">
23
-        <div style="position: relative; left: -50%; margin-top: 1.3em;">
24
-            <small>{{'credentials_in_db' | translate:credential_amount}}</small>
27
+        <div class="edit" ng-click="editCredential(credential)">
28
+            <div class="mdi mdi-pencil"></div>
25 29
         </div>
30
+
26 31
     </div>
27
-    <div class="bottomBtn" ng-click="goto_settings()" title="{{'settings' | translate}}"><i class="fa fa-gears"></i></div>
28
-    <div class="bottomBtn" ng-click="goto_search()" title="{{'search' | translate}}"><i class="fa fa-search"></i></div>
29
-    <div class="bottomBtn" ng-click="refresh()" title="{{'refresh_credential_list' | translate}}"><i class="fa fa-refresh" ng-class="{'fa-spin': refreshing_credentials}"></i></div>
30
-    <div class="bottomBtn pull-right"> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank"
31
-                                          title="{{'donate_button_title' | translate}}"
32
-                                          rel="nofollow noopener noreferrer"
33
-    ><i class="fa fa-paypal"></i> </a>
34
-    </div>
35
-    <div class="bottomBtn pull-right" ng-click="lockExtension()" title="{{'lock_extension' | translate}}"><i class="fa fa-lock"></i></div>
36
-    <!-- <a class="btn btn-success pull-right"
37
-       >Donate</a> -->
38 32
 </div>

+ 211
- 164
html/browser_action/views/settings.html View File

@@ -1,167 +1,214 @@
1 1
 <div class="edit_credential">
2
-	<div class="group">
3
-		<input type="text" ng-model="settings.nextcloud_host"
4
-			   required ng-debounce="1000">
5
-		<span class="highlight"></span>
6
-		<span class="bar"></span>
7
-		<label>{{'server_url' | translate}}</label>
8
-	</div>
9
-	<div class="group">
10
-		<input type="text" ng-model="settings.nextcloud_username"
11
-			   required ng-debounce="1000">
12
-		<span class="highlight"></span>
13
-		<span class="bar"></span>
14
-		<label>{{'username' | translate}}</label>
15
-	</div>
16
-	<div class="group">
17
-		<input type="password" ng-model="settings.nextcloud_password"
18
-			   required ng-debounce="1000">
19
-		<span class="highlight"></span>
20
-		<span class="bar"></span>
21
-		<label>{{'password' | translate}}</label>
22
-	</div>
23
-	<div class="group">
24
-		<select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required
25
-				ng-options="vault.name for vault in vaults track by vault.guid"></select>
26
-		<span class="highlight"></span>
27
-		<span class="bar"></span>
28
-		<label>{{'select_default_vault' | translate}}</label>
29
-	</div>
30
-	<div class="group" ng-show="settings.default_vault != ''">
31
-		<input type="password" ng-model="settings.vault_password"
32
-			   required ng-debounce="1000">
33
-		<span class="highlight"></span>
34
-		<span class="bar"></span>
35
-		<label>{{'vault_password' | translate}}</label>
36
-	</div>
37
-	<!-- Ignored sites-->
2
+    <div class="group">
3
+        <input type="text" ng-model="settings.nextcloud_host"
4
+               required ng-debounce="1000">
5
+        <span class="highlight"></span>
6
+        <span class="bar"></span>
7
+        <label>{{'server_url' | translate}}</label>
8
+    </div>
9
+    <div class="group">
10
+        <input type="text" ng-model="settings.nextcloud_username"
11
+               required ng-debounce="1000">
12
+        <span class="highlight"></span>
13
+        <span class="bar"></span>
14
+        <label>{{'username' | translate}}</label>
15
+    </div>
16
+    <div class="group">
17
+        <input type="password" ng-model="settings.nextcloud_password"
18
+               required ng-debounce="1000">
19
+        <span class="highlight"></span>
20
+        <span class="bar"></span>
21
+        <label>{{'password' | translate}}</label>
22
+    </div>
23
+    <div class="group">
24
+        <select id="defaultVault" class="input-md" ng-model="settings.default_vault" required
25
+                ng-options="vault.name for vault in vaults track by vault.guid"></select>
26
+        <span class="highlight"></span>
27
+        <span class="bar"></span>
28
+        <label>{{'select_default_vault' | translate}}</label>
29
+    </div>
30
+    <div class="group" ng-show="settings.default_vault != ''">
31
+        <input type="password" ng-model="settings.vault_password"
32
+               required ng-debounce="1000">
33
+        <span class="highlight"></span>
34
+        <span class="bar"></span>
35
+        <label>{{'vault_password' | translate}}</label>
36
+    </div>
37
+    <div class="ignored_sites">
38
+        <label>{{'ignored_sites' | translate}}</label>
39
+        <ul class="ignored_sites">
40
+            <li ng-repeat="site in settings.ignored_sites">{{site}} <i class="mdi mdi-delete pull-right"
41
+                                                                       ng-click="removeSite(site)"></i></li>
42
+            <li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
43
+        </ul>
44
+        <div class="group" ng-show="settings.default_vault != ''">
45
+            <input type="text"
46
+                   ng-model="ignoreSite" ng-enter="addSite(ignoreSite)" placeholder="{{'ignore_site_placeholder' | translate}}">
47
+            <span class="highlight"></span>
48
+            <span class="bar"></span>
49
+        </div>
50
+    </div>
51
+    <div class="switch-row">
52
+        <input type="checkbox" id="ignore_protocol" ng-model="settings.ignoreProtocol" class="switch-input">
53
+        <label for="ignore_protocol" class="switch-label">{{'ignore_protocol' | translate}}</label>
54
+    </div>
55
+    <div class="switch-row">
56
+        <input type="checkbox" id="ignore_subdomain" ng-model="settings.ignoreSubdomain" class="switch-input">
57
+        <label for="ignore_subdomain" class="switch-label">{{'ignore_subdomain' | translate}}</label>
58
+    </div>
59
+    <div class="switch-row">
60
+        <input type="checkbox" id="ignore_port" ng-model="settings.ignorePort" class="switch-input">
61
+        <label for="ignore_port" class="switch-label">{{'ignore_port' | translate}}</label>
62
+    </div>
63
+    <div class="switch-row">
64
+        <input type="checkbox" id="disable_autofill" ng-model="settings.disableAutoFill" class="switch-input">
65
+        <label for="disable_autofill" class="switch-label">{{'disable_autofill' | translate}}</label>
66
+    </div>
67
+    <div class="switch-row">
68
+        <input type="checkbox" id="disable_browser_autofill" ng-model="settings.disable_browser_autofill" class="switch-input">
69
+        <label for="disable_browser_autofill" class="switch-label">{{'disable_browser_autofill' | translate}}</label>
70
+    </div>
71
+    <div class="switch-row">
72
+        <input type="checkbox" id="disable_password_picker" ng-model="settings.disablePasswordPicker" class="switch-input">
73
+        <label for="disable_password_picker" class="switch-label">{{'disable_password_picker' | translate}}</label>
74
+    </div>
75
+    <div class="switch-row">
76
+        <input type="checkbox" id="enable_debug" ng-model="settings.debug" class="switch-input">
77
+        <label for="enable_debug" class="switch-label">{{'enable_debug' | translate}}</label>
78
+    </div>
79
+    <div class="clearfix"></div>
80
+    <button class="md-btn default" ng-click="saveSettings()" ng-disabled="saving">
81
+        <span>
82
+            <i ng-show="saving"
83
+               ng-class="{'fa-spinner fa-spin': saving}"
84
+               class="fa"></i>
85
+            {{'save' | translate}}
86
+        </span>
87
+    </button>
88
+    <button class="md-btn" ng-click="cancel()">
89
+        <span>{{'cancel' | translate}}</span>
90
+    </button>
91
+    <!--
92
+    <h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
93
+    <div class="alerts alert alert-warning" ng-if="errors.length > 0">
94
+        <li ng-repeat="error in errors">{{error}}</li>
95
+    </div>
96
+    <div>
97
+        <table class="table">
98
+            <tr>
99
+                <td>
100
+                    <small>{{'server_url' | translate}}:</small>
101
+                </td>
102
+                <td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host"
103
+                           required ng-debounce="1000">
104
+                </td>
105
+            </tr>
106
+            <tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
107
+                <td colspan=2>
108
+                    <div class="alert alert-warning">Warning: This connection is insecure!</div>
109
+                </td>
110
+            </tr>
111
+            <tr>
112
+                <td>
113
+                    <small>{{'username' | translate}}:</small>
114
+                </td>
115
+                <td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username"
116
+                           required ng-debounce="1000"></td>
117
+            </tr>
118
+            <tr>
119
+                <td>
120
+                    <small>{{'password' | translate}}:</small>
121
+                </td>
122
+                <td><input type="password" class="form-control input-sm" id="password"
123
+                           ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
124
+            </tr>
125
+            <tr class="login-req" ng-if="vaults">
126
+                <td>
127
+                    <small>{{'select_default_vault' | translate}}:</small>
128
+                </td>
129
+                <td><select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required
130
+                            ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
131
+            </tr>
132
+            <tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
133
+                <td valign="top">
134
+                    <small>{{'vault_password' | translate}}</small>
135
+                </td>
136
+                <td>
137
+                    <input type="password" class="form-control input-sm" id="vaultPassword"
138
+                           ng-model="settings.vault_password">
139
+                </td>
140
+            </tr>
141
+            <tr class="login-req">
142
+                <td valign="top">
143
+                    <small>{{'ignored_sites' | translate}}</small>
144
+                </td>
145
+                <td>
38 146
 
39
-	<label class="label--checkbox">
40
-		<input type="checkbox" class="checkbox" checked>
41
-		Item 1
42
-	</label>
43
-
44
-	<!--
45
-	<h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
46
-	<div class="alerts alert alert-warning" ng-if="errors.length > 0">
47
-		<li ng-repeat="error in errors">{{error}}</li>
48
-	</div>
49
-	<div>
50
-		<table class="table">
51
-			<tr>
52
-				<td>
53
-					<small>{{'server_url' | translate}}:</small>
54
-				</td>
55
-				<td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host"
56
-						   required ng-debounce="1000">
57
-				</td>
58
-			</tr>
59
-			<tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
60
-				<td colspan=2>
61
-					<div class="alert alert-warning">Warning: This connection is insecure!</div>
62
-				</td>
63
-			</tr>
64
-			<tr>
65
-				<td>
66
-					<small>{{'username' | translate}}:</small>
67
-				</td>
68
-				<td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username"
69
-						   required ng-debounce="1000"></td>
70
-			</tr>
71
-			<tr>
72
-				<td>
73
-					<small>{{'password' | translate}}:</small>
74
-				</td>
75
-				<td><input type="password" class="form-control input-sm" id="password"
76
-						   ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
77
-			</tr>
78
-			<tr class="login-req" ng-if="vaults">
79
-				<td>
80
-					<small>{{'select_default_vault' | translate}}:</small>
81
-				</td>
82
-				<td><select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required
83
-							ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
84
-			</tr>
85
-			<tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
86
-				<td valign="top">
87
-					<small>{{'vault_password' | translate}}</small>
88
-				</td>
89
-				<td>
90
-					<input type="password" class="form-control input-sm" id="vaultPassword"
91
-						   ng-model="settings.vault_password">
92
-				</td>
93
-			</tr>
94
-			<tr class="login-req">
95
-				<td valign="top">
96
-					<small>{{'ignored_sites' | translate}}</small>
97
-				</td>
98
-				<td>
99
-
100
-					<ul class="ignored_sites">
101
-						<li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right"
102
-																				   ng-click="removeSite(site)"></i></li>
103
-						<li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
104
-						<li><input type="text" class="form-control" placeholder="Enter a domain or tld"
105
-								   ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"></li>
106
-					</ul>
107
-				</td>
108
-			</tr>
109
-			<tr>
110
-				<td>
111
-					<small>{{'refresh_timer' | translate}}:</small>
112
-				</td>
113
-				<td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
114
-			</tr>
115
-			<tr>
116
-				<td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol">
117
-					<small>{{'ignore_protocol' | translate}}</small>
118
-				</td>
119
-			</tr>
120
-			<tr>
121
-				<td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain">
122
-					<small>{{'ignore_subdomain' | translate}}</small>
123
-				</td>
124
-			</tr>
125
-			<tr>
126
-				<td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort">
127
-					<small>{{'ignore_port' | translate}}</small>
128
-				</td>
129
-			</tr>
130
-			<tr>
131
-				<td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill">
132
-					<small>{{'disable_autofill' | translate}}</small>
133
-				</td>
134
-			</tr>
135
-			<tr>
136
-				<td colspan=2><input type="checkbox" id="disableBrowserAutoFill"
137
-									 ng-model="settings.disable_browser_autofill">
138
-					<small>{{'disable_browser_autofill' | translate}}</small>
139
-				</td>
140
-			</tr>
141
-			<tr>
142
-				<td colspan=2><input type="checkbox" id="disablePasswordPicker"
143
-									 ng-model="settings.disablePasswordPicker">
144
-					<small>{{'disable_password_picker' | translate}}</small>
145
-				</td>
146
-			</tr>
147
-			<tr>
148
-				<td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug">
149
-					<small>{{'enable_debug' | translate}}</small>
150
-				</td>
151
-			</tr>
152
-			<tr>
153
-				<td colspan=2 align="center">
154
-					<button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving"
155
-																									  ng-class="{'fa-spinner fa-spin': saving}"
156
-																									  class="fa"></i>
157
-						{{'save' | translate}}
158
-					</button>
159
-					<button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
160
-				</td>
161
-			</tr>
162
-		</table>
163
-		<div class="version">
164
-			{{extension}}
165
-		</div>
166
-	</div>-->
147
+                    <ul class="ignored_sites">
148
+                        <li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right"
149
+                                                                                   ng-click="removeSite(site)"></i></li>
150
+                        <li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
151
+                        <li><input type="text" class="form-control" placeholder="Enter a domain or tld"
152
+                                   ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"></li>
153
+                    </ul>
154
+                </td>
155
+            </tr>
156
+            <tr>
157
+                <td>
158
+                    <small>{{'refresh_timer' | translate}}:</small>
159
+                </td>
160
+                <td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
161
+            </tr>
162
+            <tr>
163
+                <td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol">
164
+                    <small>{{'ignore_protocol' | translate}}</small>
165
+                </td>
166
+            </tr>
167
+            <tr>
168
+                <td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain">
169
+                    <small>{{'ignore_subdomain' | translate}}</small>
170
+                </td>
171
+            </tr>
172
+            <tr>
173
+                <td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort">
174
+                    <small>{{'ignore_port' | translate}}</small>
175
+                </td>
176
+            </tr>
177
+            <tr>
178
+                <td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill">
179
+                    <small>{{'disable_autofill' | translate}}</small>
180
+                </td>
181
+            </tr>
182
+            <tr>
183
+                <td colspan=2><input type="checkbox" id="disableBrowserAutoFill"
184
+                                     ng-model="settings.disable_browser_autofill">
185
+                    <small>{{'disable_browser_autofill' | translate}}</small>
186
+                </td>
187
+            </tr>
188
+            <tr>
189
+                <td colspan=2><input type="checkbox" id="disablePasswordPicker"
190
+                                     ng-model="settings.disablePasswordPicker">
191
+                    <small>{{'disable_password_picker' | translate}}</small>
192
+                </td>
193
+            </tr>
194
+            <tr>
195
+                <td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug">
196
+                    <small>{{'enable_debug' | translate}}</small>
197
+                </td>
198
+            </tr>
199
+            <tr>
200
+                <td colspan=2 align="center">
201
+                    <button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving"
202
+                                                                                                      ng-class="{'fa-spinner fa-spin': saving}"
203
+                                                                                                      class="fa"></i>
204
+                        {{'save' | translate}}
205
+                    </button>
206
+                    <button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
207
+                </td>
208
+            </tr>
209
+        </table>
210
+        <div class="version">
211
+            {{extension}}
212
+        </div>
213
+    </div>-->
167 214
 </div>

BIN
icons/passman_logo.png View File


+ 2
- 25
js/ui/popup/controllers/list.js View File

@@ -57,14 +57,8 @@
57 57
             var initApp = function () {
58 58
                 port.onMessage.addListener(messageParser);
59 59
                 API.runtime.sendMessage(API.runtime.id, {method: "getMasterPasswordSet"}).then(function (isPasswordSet) {
60
-                    function redirectToPrompt() {
61
-                        window.location = '#!/locked';
62
-                        return;
63
-                    }
64
-
65 60
                     //First check attributes
66 61
                     if (!isPasswordSet) {
67
-                        redirectToPrompt();
68 62
                         return;
69 63
                     }
70 64
 
@@ -86,7 +80,7 @@
86 80
                 });
87 81
             };
88 82
 
89
-            var getActiveTab = function (cb) {
83
+            var getActiveTab = function () {
90 84
                 API.tabs.query({currentWindow: true, active: true}).then(function (tab) {
91 85
                     API.runtime.sendMessage(API.runtime.id, {
92 86
                         method: "getCredentialsByUrl",
@@ -99,24 +93,7 @@
99 93
                 });
100 94
             };
101 95
 
102
-            $scope.lockExtension = function () {
103
-                API.runtime.sendMessage(API.runtime.id, {method: "setMasterPassword", args: {password: null}}).then(function () {
104
-                    window.location = '#!/locked';
105
-                });
106
-            };
107
-
108
-            API.runtime.sendMessage(API.runtime.id, {'method': 'getRuntimeSettings'}).then(function (settings) {
109
-
110
-                $rootScope.app_settings = settings;
111
-                if (!settings || Object.keys(settings).length === 0) {
112
-                    window.location = '#!/setup';
113
-                } else if (settings.hasOwnProperty('isInstalled')) {
114
-                    window.location = '#!/locked';
115
-                } else {
116
-                    initApp();
117
-                }
118
-            });
119
-
96
+            initApp();
120 97
 
121 98
             $scope.editCredential = function (credential) {
122 99
                 window.location = '#!/edit/' + credential.guid;

+ 33
- 1
js/ui/popup/controllers/main.js View File

@@ -38,6 +38,8 @@
38 38
 
39 39
             $scope.menuIsOpen = false;
40 40
             $scope.bodyOverflow = false;
41
+            $scope.showHeader = true;
42
+
41 43
             $scope.toggleMenu = function () {
42 44
                 console.log('click');
43 45
                 $scope.menuIsOpen = !$scope.menuIsOpen;
@@ -47,11 +49,41 @@
47 49
                 }, 1500);
48 50
             };
49 51
 
52
+            $rootScope.$on('hideHeader', function () {
53
+                $scope.showHeader = false;
54
+            });
55
+
56
+            $rootScope.$on('showHeader', function () {
57
+                $scope.showHeader = true;
58
+            });
59
+
60
+            API.runtime.sendMessage(API.runtime.id, {'method': 'getRuntimeSettings'}).then(function (settings) {
61
+
62
+                $rootScope.app_settings = settings;
63
+                if (!settings || Object.keys(settings).length === 0) {
64
+                    window.location = '#!/setup';
65
+                } else if (settings.hasOwnProperty('isInstalled')) {
66
+                    window.location = '#!/locked';
67
+                } else {
68
+                    //  initApp();
69
+                }
70
+            });
71
+
72
+
50 73
             $scope.goto = function (page) {
51
-                window.location = '#!/'+page;
74
+                window.location = '#!/' + page;
52 75
                 $scope.menuIsOpen = false;
53 76
             };
54 77
 
78
+
79
+            $scope.lockExtension = function () {
80
+                API.runtime.sendMessage(API.runtime.id, {
81
+                    method: "setMasterPassword",
82
+                    args: {password: null}
83
+                }).then(function () {
84
+                    window.location = '#!/locked';
85
+                });
86
+            };
55 87
         }]);
56 88
 }());
57 89
 

+ 5
- 2
js/ui/popup/controllers/password_prompt.js View File

@@ -42,6 +42,8 @@
42 42
             });
43 43
             API.runtime.sendMessage(API.runtime.id, {method: "getSettings"});
44 44
 
45
+            $rootScope.$broadcast('hideHeader');
46
+            $scope.master_password_remember = false;
45 47
             $scope.master_password = '';
46 48
             $scope.apply_settings = function() {
47 49
                 $scope.saving = true;
@@ -52,8 +54,9 @@
52 54
                             setTimeout(function () {
53 55
                                 window.location = '#!/';
54 56
                                 $scope.saving = false;
55
-                                $scope.saving = false;
56
-                            },1500);
57
+                                $rootScope.$broadcast('showHeader');
58
+
59
+                            },750);
57 60
                         });
58 61
                     } else {
59 62
                         $scope.saving = false;

+ 0
- 13
js/ui/popup/controllers/search.js View File

@@ -54,13 +54,6 @@
54 54
             port.onMessage.addListener(messageParser);
55 55
             port.postMessage("credential_amount");
56 56
 
57
-
58
-            $scope.lockExtension = function () {
59
-                API.runtime.sendMessage(API.runtime.id, {method: "setMasterPassword", args: {password: null}}).then(function () {
60
-                    window.location = '#!/locked';
61
-                });
62
-            };
63
-
64 57
             $scope.found_credentials = false;
65 58
             $scope.searchText = '';
66 59
             $scope.search = function () {
@@ -71,13 +64,7 @@
71 64
             };
72 65
 
73 66
 
74
-            $scope.goto_settings = function () {
75
-                window.location = '#!/settings';
76
-            };
77 67
 
78
-            $scope.goto_search = function () {
79
-                window.location = '#!/search';
80
-            };
81 68
 
82 69
 
83 70
         }]);

+ 75
- 6
style/browser_action.scss View File

@@ -2,7 +2,10 @@
2 2
 @import "partials/cicle";
3 3
 @import "partials/list";
4 4
 @import "partials/material-input";
5
-@import "partials/buttons";
5
+@import "partials/material-switch";
6
+@import "partials/material-checkbox";
7
+@import "partials/material-buttons";
8
+
6 9
 $sidebarWidth: 250px;
7 10
 body {
8 11
   width: 450px;
@@ -72,9 +75,11 @@ body.toggled {
72 75
   margin-right: -$sidebarWidth;
73 76
   /*  width: calc(100% - 250px);*/
74 77
 }
75
-.ng-hide{
78
+
79
+.ng-hide {
76 80
   display: none;
77 81
 }
82
+
78 83
 /* Sidebar Styles */
79 84
 
80 85
 .sidebar-nav {
@@ -91,7 +96,7 @@ body.toggled {
91 96
       display: block;
92 97
       text-decoration: none;
93 98
       color: #000;
94
-      .mdi{
99
+      .mdi {
95 100
         padding-left: 15px;
96 101
         padding-right: 15px;
97 102
         color: $linkColor;
@@ -124,7 +129,7 @@ body.toggled {
124 129
         color: #fff;
125 130
         background: none;
126 131
       }
127
-      .mdi{
132
+      .mdi {
128 133
         padding-left: 15px;
129 134
         padding-right: 15px;
130 135
         float: right;
@@ -134,7 +139,8 @@ body.toggled {
134 139
     }
135 140
   }
136 141
 }
137
-.menuToggler{
142
+
143
+.menuToggler {
138 144
   position: absolute;
139 145
   background-color: transparent;
140 146
   width: calc(100% - 250px);
@@ -142,7 +148,8 @@ body.toggled {
142 148
   z-index: 9999999;
143 149
   right: 0;
144 150
 }
145
-.edit_credential{
151
+
152
+.edit_credential {
146 153
   padding-top: 30px;
147 154
   padding-left: 15px;
148 155
   padding-right: 15px;
@@ -154,4 +161,66 @@ body.toggled {
154 161
   float: left;
155 162
   color: #fff;
156 163
   cursor: pointer;
164
+}
165
+
166
+label, .switch-label, label:not(.input-checkbox):not(.label) {
167
+  font-weight: normal;
168
+}
169
+
170
+.ignored_sites {
171
+  label {
172
+    font-size: 14px;
173
+    color: #1565c0;
174
+  }
175
+  padding: 0;
176
+  li {
177
+    list-style-type: none;
178
+    height: 25px;
179
+    padding: 5px 0;
180
+    .mdi {
181
+      margin-top: 2px;
182
+      cursor: pointer;
183
+    }
184
+    .mdi:hover {
185
+      color: #a94442;
186
+    }
187
+  }
188
+  .group {
189
+    margin-bottom: 45px;
190
+  }
191
+}
192
+.invisible{
193
+  visibility: hidden;
194
+}
195
+.master_pw_warning{
196
+  padding-left: 6px;
197
+  font-size: 10px;
198
+  color: #a94442;
199
+  margin-bottom: 15px;
200
+}
201
+.master_pw_warning.big{
202
+  font-size: 14px;
203
+  text-align: center;
204
+
205
+}
206
+.unlock {
207
+  width: 350px;
208
+  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
209
+  margin: -20px auto 10px;
210
+  padding: 20px;
211
+  .group{
212
+    margin-bottom: 25px;
213
+  }
214
+  img {
215
+    height: 50px;
216
+    margin: 15px auto;
217
+    display: block;
218
+  }
219
+  .md-checkbox {
220
+    margin: 15px 0;
221
+  }
222
+  .md-btn {
223
+    margin: 5px auto;
224
+    display: block;
225
+  }
157 226
 }

+ 62
- 0
style/css/material-buttons.css View File

@@ -0,0 +1,62 @@
1
+.md-btn {
2
+  position: relative;
3
+  margin: 0 15px 15px 15px;
4
+  padding: 0;
5
+  overflow: hidden;
6
+  border-width: 0;
7
+  outline: none;
8
+  border-radius: 2px;
9
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
10
+  color: #212121;
11
+  background-color: #fafafa;
12
+  cursor: pointer;
13
+  display: inline-block;
14
+  transition: background-color .3s; }
15
+
16
+.md-btn.default, .btn:focus {
17
+  background-color: #106cc8;
18
+  color: rgba(255, 255, 255, 0.87); }
19
+
20
+.md-btn.default:hover, .btn:focus {
21
+  background-color: #0159a2; }
22
+
23
+.md-btn > * {
24
+  position: relative; }
25
+
26
+.md-btn span {
27
+  display: inline-block;
28
+  padding: 12px 24px; }
29
+
30
+.md-btn:before {
31
+  content: "";
32
+  position: absolute;
33
+  top: 50%;
34
+  left: 50%;
35
+  display: block;
36
+  width: 0;
37
+  padding-top: 0;
38
+  border-radius: 100%;
39
+  background-color: rgba(236, 240, 241, 0.3);
40
+  -webkit-transform: translate(-50%, -50%);
41
+  -moz-transform: translate(-50%, -50%);
42
+  -ms-transform: translate(-50%, -50%);
43
+  -o-transform: translate(-50%, -50%);
44
+  transform: translate(-50%, -50%); }
45
+
46
+.md-btn:active:before {
47
+  width: 120%;
48
+  padding-top: 120%;
49
+  transition: width .2s ease-out, padding-top .2s ease-out; }
50
+
51
+.md-btn.orange {
52
+  background-color: #e67e22; }
53
+
54
+.md-btn.orange:hover, .btn.orange:focus {
55
+  background-color: #d35400; }
56
+
57
+.md-btn.red {
58
+  background-color: #ff5722;
59
+  color: rgba(255, 255, 255, 0.87); }
60
+
61
+.md-btn.red:hover, .btn.red:focus {
62
+  background-color: #f4511e; }

+ 115
- 0
style/css/material-checkbox.css View File

@@ -0,0 +1,115 @@
1
+/* ----------------------------------------------------------------------
2
+  Material Design Checkbox - by Ravikumar Chauhan
3
+------------------------------------------------------------------------- */
4
+.md-checkbox {
5
+  color: #818181;
6
+  font-size: 15px;
7
+  font-weight: bold;
8
+  font-family: 'Roboto', sans-serif;
9
+  letter-spacing: .5px; }
10
+  .md-checkbox .input-checkbox {
11
+    position: relative;
12
+    display: inline-block;
13
+    width: 32px;
14
+    height: 32px;
15
+    text-align: center;
16
+    vertical-align: -9px; }
17
+    .md-checkbox .input-checkbox input[type="checkbox"] {
18
+      visibility: hidden;
19
+      position: absolute;
20
+      left: 7px;
21
+      bottom: 7px;
22
+      margin: 0;
23
+      padding: 0;
24
+      outline: none;
25
+      cursor: pointer;
26
+      opacity: 0; }
27
+      .md-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
28
+        position: absolute;
29
+        left: 4px;
30
+        bottom: 8px;
31
+        width: 18px;
32
+        height: 18px;
33
+        font-family: 'Material Icons';
34
+        font-weight: normal;
35
+        font-style: normal;
36
+        font-size: 24px;
37
+        line-height: 1;
38
+        text-transform: none;
39
+        letter-spacing: normal;
40
+        word-wrap: normal;
41
+        white-space: nowrap;
42
+        direction: ltr;
43
+        vertical-align: -6px;
44
+        /* Support for all WebKit browsers. */
45
+        -webkit-font-smoothing: antialiased;
46
+        /* Support for Safari and Chrome. */
47
+        text-rendering: optimizeLegibility;
48
+        /* Support for Firefox. */
49
+        -moz-osx-font-smoothing: grayscale;
50
+        /* Support for IE. */
51
+        font-feature-settings: 'liga';
52
+        transition: all .2s ease;
53
+        z-index: 1; }
54
+      .md-checkbox .input-checkbox input[type="checkbox"] + .checkbox:before {
55
+        content: "\e835";
56
+        color: #717171; }
57
+      .md-checkbox .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
58
+        content: "\e834"; }
59
+      .md-checkbox .input-checkbox input[type="checkbox"]:active:not(:disabled) + .checkbox:before {
60
+        transform: scale3d(0.88, 0.88, 1); }
61
+      .md-checkbox .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
62
+        color: rgba(0, 0, 0, 0.157) !important; }
63
+  .md-checkbox.checkbox-light label, .md-checkbox.checkbox-light .label {
64
+    color: #FFF; }
65
+  .md-checkbox.checkbox-light input[type="checkbox"] + .checkbox:before {
66
+    color: #FFF; }
67
+  .md-checkbox.checkbox-light input[type="checkbox"]:disabled + .checkbox:before {
68
+    color: #5d5d5d !important; }
69
+  .md-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"] + .checkbox:before {
70
+    border-color: #FFF; }
71
+  .md-checkbox.checkbox-light.checkbox-rotate input[type="checkbox"]:disabled + .checkbox:before {
72
+    border-color: #5d5d5d !important; }
73
+  .md-checkbox label, .md-checkbox .label {
74
+    cursor: pointer; }
75
+
76
+/* ----------------------------------------------------------------------
77
+  Rotate Checkbox - by Ravikumar Chauhan
78
+------------------------------------------------------------------------- */
79
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox {
80
+  cursor: pointer; }
81
+  .md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"] + .checkbox:before {
82
+    content: "";
83
+    position: absolute;
84
+    left: 7px;
85
+    bottom: 7px;
86
+    width: 18px;
87
+    height: 18px;
88
+    border: 2px solid #717171;
89
+    border-radius: 2px;
90
+    transition: all .2s ease;
91
+    z-index: 1; }
92
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:checked + .checkbox:before {
93
+  left: 11px;
94
+  width: 12px;
95
+  height: 20px;
96
+  border-width: 2px;
97
+  border-style: solid;
98
+  border-top: transparent;
99
+  border-left: transparent;
100
+  transform: rotate(40deg);
101
+  border-radius: 1px; }
102
+.md-checkbox.checkbox-rotate .input-checkbox input[type="checkbox"]:disabled + .checkbox:before {
103
+  border-color: rgba(0, 0, 0, 0.157) !important; }
104
+
105
+/* ----------------------------------------------------------------------
106
+  Normal Checkbox Color - by Ravikumar Chauhan
107
+------------------------------------------------------------------------- */
108
+.md-checkbox:not(.checkbox-rotate) .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
109
+  color: #03a9f4; }
110
+
111
+/* ----------------------------------------------------------------------
112
+  Rotate Checkbox Color - by Ravikumar Chauhan
113
+------------------------------------------------------------------------- */
114
+.md-checkbox.checkbox-rotate .checkbox-lightBlue input[type="checkbox"]:checked + .checkbox:before {
115
+  border-color: #03a9f4; }

+ 60
- 0
style/css/material-switch.css View File

@@ -0,0 +1,60 @@
1
+.switch-input {
2
+  display: none; }
3
+
4
+.switch-label {
5
+  position: relative;
6
+  display: inline-block;
7
+  min-width: 112px;
8
+  cursor: pointer;
9
+  font-weight: 500;
10
+  text-align: left;
11
+  margin: 16px;
12
+  padding: 16px 0 16px 44px; }
13
+
14
+.switch-label:before, .switch-label:after {
15
+  content: "";
16
+  position: absolute;
17
+  margin: 0;
18
+  outline: 0;
19
+  top: 50%;
20
+  -ms-transform: translate(0, -50%);
21
+  -webkit-transform: translate(0, -50%);
22
+  transform: translate(0, -50%);
23
+  -webkit-transition: all 0.3s ease;
24
+  transition: all 0.3s ease; }
25
+
26
+.switch-label:before {
27
+  left: 1px;
28
+  width: 34px;
29
+  height: 14px;
30
+  background-color: #9E9E9E;
31
+  border-radius: 8px; }
32
+
33
+.switch-label:after {
34
+  left: 0;
35
+  width: 20px;
36
+  height: 20px;
37
+  background-color: #FAFAFA;
38
+  border-radius: 50%;
39
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084); }
40
+
41
+.switch-label .toggle--on {
42
+  display: none; }
43
+
44
+.switch-label .toggle--off {
45
+  display: inline-block; }
46
+
47
+.switch-input:checked + .switch-label:before {
48
+  background-color: #4f98ec; }
49
+
50
+.switch-input:checked + .switch-label:after {
51
+  background-color: #1565c0;
52
+  -ms-transform: translate(80%, -50%);
53
+  -webkit-transform: translate(80%, -50%);
54
+  transform: translate(80%, -50%); }
55
+
56
+.switch-input:checked + .switch-label .toggle--on {
57
+  display: inline-block; }
58
+
59
+.switch-input:checked + .switch-label .toggle--off {
60
+  display: none; }

+ 3
- 0
style/partials/list.scss View File

@@ -37,4 +37,7 @@ $linkColor: #737373;
37 37
       cursor: pointer;
38 38
     }
39 39
   }
40
+  .list-item.no-hover:hover{
41
+    background-color: transparent;
42
+  }
40 43
 }

style/partials/buttons.scss → style/partials/material-buttons.scss View File

@@ -1,3 +1,6 @@
1
+/**
2
+ Source: https://codepen.io/sebj54/pen/oxluI
3
+ */
1 4
 .md-btn {
2 5
   position: relative;
3 6
 

+ 149
- 38
style/partials/material-checkbox.scss View File

@@ -1,55 +1,166 @@
1
-.label--checkbox {
2
-	position: relative;
3
-	font-family: Arial, sans-serif;
4
-	line-height: 135%;
5
-	cursor: pointer;
1
+/**
2
+  Source: https://codepen.io/anon/pen/PmEeyo
3
+ */
4
+// Checkbox Color
5
+$btn_lightBlue: #03a9f4;
6
+
7
+
8
+// KEYFRAMES
9
+@mixin keyframes($animation-name) {
10
+  @-webkit-keyframes #{$animation-name} {
11
+    @content;
12
+  }
13
+  @-moz-keyframes #{$animation-name} {
14
+    @content;
15
+  }
16
+  @-ms-keyframes #{$animation-name} {
17
+    @content;
18
+  }
19
+  @-o-keyframes #{$animation-name} {
20
+    @content;
21
+  }
22
+  @keyframes #{$animation-name} {
23
+    @content;
24
+  }
6 25
 }
7 26
 
8
-.checkbox {
9
-	position: relative;
10
-	margin: 0 1rem 0 0 ;
11 27
 
12
-	cursor: pointer;
28
+.md-checkbox {
29
+  color: #818181;
30
+  font-size: 15px;
31
+  font-weight: bold;
32
+  font-family: 'Roboto', sans-serif;
33
+  letter-spacing: .5px;
34
+
35
+  .input-checkbox {
36
+    position: relative;
37
+    display: inline-block;
38
+    width: 32px;
39
+    text-align: center;
40
+    vertical-align: -9px;
41
+
42
+    input[type="checkbox"] {
43
+      visibility: hidden;
44
+      position: absolute;
45
+      left: 7px;
46
+      bottom: 7px;
47
+      margin: 0;
48
+      padding: 0;
49
+      outline: none;
50
+      cursor: pointer;
51
+      opacity: 0;
13 52
 
14
-	&:before {
15
-		@include transition(all .800s ease-in-out);
53
+      & + .checkbox:before {
54
+        position: absolute;
55
+        left: 4px;
56
+        bottom: 8px;
57
+        width: 18px;
58
+        height: 18px;
59
+        font-family: 'Material Icons';
60
+        font-weight: normal;
61
+        font-style: normal;
62
+        font-size: 24px;
63
+        line-height: 1;
64
+        text-transform: none;
65
+        letter-spacing: normal;
66
+        word-wrap: normal;
67
+        white-space: nowrap;
68
+        direction: ltr;
69
+        vertical-align: -6px;
16 70
 
17
-		content: "";
71
+        /* Support for all WebKit browsers. */
72
+        -webkit-font-smoothing: antialiased;
73
+        /* Support for Safari and Chrome. */
74
+        text-rendering: optimizeLegibility;
18 75
 
19
-		position: absolute;
20
-		left: 0;
21
-		z-index: 1;
76
+        /* Support for Firefox. */
77
+        -moz-osx-font-smoothing: grayscale;
22 78
 
23
-		width: 1rem;
24
-		height: 1rem;
79
+        /* Support for IE. */
80
+        font-feature-settings: 'liga';
25 81
 
26
-		border: 2px solid #f2f2f2;
27
-	}
82
+        transition: all .2s ease;
83
+        z-index: 1;
84
+      }
28 85
 
29
-	&:checked {
30
-		&:before {
31
-			@include transform(rotate(-45deg));
86
+      & + .checkbox:before { content: "\e835"; color: #717171; }
32 87
 
33
-			height: .5rem;
88
+      &:checked + .checkbox:before { content: "\e834"; }
34 89
 
35
-			border-color: $green;
36
-			border-top-style: none;
37
-			border-right-style: none;
38
-		}
39
-	}
90
+      &:active:not(:disabled) + .checkbox:before { transform: scale3d(0.88, 0.88, 1); }
40 91
 
41
-	&:after {
42
-		content: "";
92
+      &:disabled + .checkbox:before { color: rgba(0,0,0,0.157) !important; }
93
+    }
94
+  }
95
+
96
+  &.checkbox-light {
97
+    label, .label { color: #FFF; }
98
+    input[type="checkbox"] + .checkbox:before { color: #FFF; }
99
+    input[type="checkbox"]:disabled + .checkbox:before { color: #5d5d5d !important; }
100
+
101
+    &.checkbox-rotate {
102
+      input[type="checkbox"] + .checkbox:before { border-color: #FFF; }
103
+      input[type="checkbox"]:disabled + .checkbox:before { border-color: #5d5d5d !important; }
104
+    }
105
+  }
106
+
107
+  label, .label { cursor: pointer; color: #797979 }
108
+}
43 109
 
44
-		position: absolute;
45
-		top: rem(-2);
46
-		left: 0;
47 110
 
48
-		width: 1.1rem;
49
-		height: 1.1rem;
111
+.md-checkbox {
112
+  &.checkbox-rotate {
113
+    .input-checkbox {
114
+      input[type="checkbox"] {
115
+        & + .checkbox {
116
+          cursor: pointer;
117
+
118
+          &:before {
119
+            content: "";
120
+            position: absolute;
121
+            left: 7px;
122
+            bottom: 7px;
123
+            width: 18px;
124
+            height: 18px;
125
+            border: 2px solid #717171;
126
+            border-radius: 2px;
127
+            transition: all .2s ease;
128
+            z-index: 1;
129
+          }
130
+        }
131
+
132
+        &:checked + .checkbox:before {
133
+          left: 11px;
134
+          width: 12px;
135
+          height: 20px;
136
+          border-width: 2px;
137
+          border-style: solid;
138
+          border-top: transparent;
139
+          border-left: transparent;
140
+          transform: rotate(40deg);
141
+          border-radius: 1px;
142
+        }
143
+
144
+        &:disabled + .checkbox:before { border-color: rgba(0,0,0,0.157) !important; }
145
+      }
146
+    }
147
+  }
148
+}
149
+
150
+.md-checkbox {
151
+  &:not(.checkbox-rotate) {
152
+    .checkbox-lightBlue {
153
+      input[type="checkbox"]:checked + .checkbox:before { color: $btn_lightBlue; }
154
+    }
155
+  }
156
+}
157
+
158
+.md-checkbox {
159
+  &.checkbox-rotate {
50 160
 
51
-		background: #fff;
52 161
 
53
-		cursor: pointer;
54
-	}
162
+    .checkbox-lightBlue {
163
+      input[type="checkbox"]:checked + .checkbox:before { border-color: $btn_lightBlue; }
164
+    }
165
+  }
55 166
 }

+ 18
- 7
style/partials/material-input.scss View File

@@ -1,12 +1,18 @@
1 1
 @import "../bourbon/bourbon";
2
-
2
+/**
3
+  Source: https://codepen.io/sevilayha/pen/IdGKH
4
+  Edited to work with angular
5
+ */
3 6
 /* form starting stylings ------------------------------- */
4 7
 .group {
5 8
   position: relative;
6 9
   margin-bottom: 45px;
7 10
 }
11
+.group:last-child{
12
+  margin-bottom: 0;
13
+}
8 14
 
9
-input[type="text"], input[type="password"] {
15
+input[type="text"], input[type="password"], select.input-md {
10 16
   font-size: 14px;
11 17
   padding: 10px 10px 10px 5px;
12 18
   display: block;
@@ -15,10 +21,13 @@ input[type="text"], input[type="password"] {
15 21
   border-bottom: 1px solid #757575;
16 22
 }
17 23
 
18
-input:focus {
24
+input:focus, select.input-md:focus {
19 25
   outline: none;
20 26
 }
21
-
27
+select.input-md{
28
+  background-color: #fff;
29
+  cursor: pointer;
30
+}
22 31
 /* LABEL ======================================= */
23 32
 .group label {
24 33
   color: #999;
@@ -35,7 +44,9 @@ input:focus {
35 44
 }
36 45
 
37 46
 /* active state */
38
-input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
47
+input[type="text"]:focus ~ label,input[type="password"]:focus ~ label,
48
+input[type="text"].ng-valid:not(.ng-empty) ~ label,input[type="password"].ng-valid:not(.ng-empty) ~ label,
49
+select.ng-valid:not(.ng-empty) ~ label {
39 50
   top: -20px;
40 51
   font-size: 14px;
41 52
   color: #1565c0;
@@ -69,7 +80,7 @@ input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
69 80
 }
70 81
 
71 82
 /* active state */
72
-input:focus ~ .bar:before, input:focus ~ .bar:after {
83
+input:focus ~ .bar:before, input:focus ~ .bar:after  {
73 84
   width: 50%;
74 85
 }
75 86
 
@@ -121,7 +132,7 @@ input:focus ~ .bar:before, input:focus ~ .bar:after {
121 132
   width: calc(100% - 32px);
122 133
 }
123 134
 /* active state */
124
-input:focus ~ .highlight {
135
+input:focus ~ .highlight, select.input-md ~ .highlight {
125 136
   -webkit-animation: inputHighlighter 0.3s ease;
126 137
   -moz-animation: inputHighlighter 0.3s ease;
127 138
   animation: inputHighlighter 0.3s ease;

+ 63
- 0
style/partials/material-switch.scss View File

@@ -0,0 +1,63 @@
1
+/**
2
+  Source: https://codepen.io/guuslieben/pen/YyPRVP
3
+ */
4
+.switch-input {
5
+  display: none;
6
+}
7
+.switch-label {
8
+  position: relative;
9
+  display: inline-block;
10
+  min-width: 112px;
11
+  cursor: pointer;
12
+  font-weight: 500;
13
+  text-align: left;
14
+  padding: 16px 0 16px 44px;
15
+}
16
+.switch-label:before, .switch-label:after {
17
+  content: "";
18
+  position: absolute;
19
+  margin: 0;
20
+  outline: 0;
21
+  top: 50%;
22
+  -ms-transform: translate(0, -50%);
23
+  -webkit-transform: translate(0, -50%);
24
+  transform: translate(0, -50%);
25
+  -webkit-transition: all 0.3s ease;
26
+  transition: all 0.3s ease;
27
+}
28
+.switch-label:before {
29
+  left: 1px;
30
+  width: 34px;
31
+  height: 14px;
32
+  background-color: #9E9E9E;
33
+  border-radius: 8px;
34
+}
35
+.switch-label:after {
36
+  left: 0;
37
+  width: 20px;
38
+  height: 20px;
39
+  background-color: #FAFAFA;
40
+  border-radius: 50%;
41
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
42
+}
43
+.switch-label .toggle--on {
44
+  display: none;
45
+}
46
+.switch-label .toggle--off {
47
+  display: inline-block;
48
+}
49
+.switch-input:checked + .switch-label:before {
50
+  background-color:lighten(#1565c0, 20%);
51
+}
52
+.switch-input:checked + .switch-label:after {
53
+  background-color: #1565c0;
54
+  -ms-transform: translate(80%, -50%);
55
+  -webkit-transform: translate(80%, -50%);
56
+  transform: translate(80%, -50%);
57
+}
58
+.switch-input:checked + .switch-label .toggle--on {
59
+  display: inline-block;
60
+}
61
+.switch-input:checked + .switch-label .toggle--off {
62
+  display: none;
63
+}

Loading…
Cancel
Save