New options layout, drag'n'drop improvements, new logo, few fixes

Author: krybc

README.md

@@ -15,15 +15,19 @@ Extension is available on [Chrome Web Store](https://chrome.google.com/webstore/
 
 ## Roadmap
 
-### 0.3.0
-[ ] Google search widget
+### 0.4.0
+[ ] Weather widget
 
-### 0.2.0
+### 0.3.0
 [ ] Most visited widget
 
-### 0.1.2
+### 0.2.0
+[x] New logo
+[x] New layout
 [x] Removing widgets
-[ ] Bugfix: Drag'n'drop improvements
+[x] Bugfix: Drag'n'drop improvements
+[x] Fix: Remove used categories from select when adding widget
+[x] Bugfix: Clear storage widgets when change background after added widget
 
 ### 0.1.1
 [x] Bugfix: Removing storage after Chrome updated

_locales/en/messages.json

@@ -2,15 +2,15 @@
   "chrome_extension_name": {
     "message": "Fast new tab"
   },
-  "chrome_extension_shortName": {
-    "message": "Fast new tab"
-  },
   "chrome_extension_description": {
     "message": "Personalize your new tab page with widgets and custom background"
   },
   "widget_saved": {
     "message": "Widget has been saved"
   },
+  "widget_saved_failed_dnd_bad_handler": {
+    "message": "You must use the drag icon to moving widgets"
+  },
   "settings_saved": {
     "message": "Settings has been saved"
   },
@@ -29,17 +29,23 @@
   "widget_settings_field_columns_label": {
     "message": "Number of clumns"
   },
-  "widget_settings_field_backgroundGallery_label": {
+  "widget_settings_submit": {
+    "message": "Save settings"
+  },
+  "widget_settings_background_title": {
+    "message": "Background"
+  },
+  "widget_settings_background_field_backgroundGallery_label": {
     "message": "Background from the gallery"
   },
-  "widget_settings_field_backgroundUrl_label": {
+  "widget_settings_background_field_backgroundUrl_label": {
     "message": "Background from URL"
   },
-  "widget_settings_field_backgroundUrl_help": {
+  "widget_settings_background_field_backgroundUrl_help": {
     "message": "Background file must be less than 5MB"
   },
-  "widget_settings_submit": {
-    "message": "Save settings"
+  "widget_settings_background_submit": {
+    "message": "Save background"
   },
   "widget_bookmarks_title": {
     "message": "Bookmarks widget"

_locales/pl/messages.json

@@ -2,15 +2,15 @@
   "chrome_extension_name": {
     "message": "Fast new tab"
   },
-  "chrome_extension_shortName": {
-    "message": "Fast new tab"
-  },
   "chrome_extension_description": {
     "message": "Personalizuj nową kartę chrome przy użyciu widgetów i własnego tła"
   },
   "widget_saved": {
     "message": "Widget został zapisany"
   },
+  "widget_saved_failed_dnd_bad_handler": {
+    "message": "Musisz przenosić widgety przy pomocy ikony"
+  },
   "settings_saved": {
     "message": "Ustawienia zostały zapisane"
   },
@@ -29,17 +29,23 @@
   "widget_settings_field_columns_label": {
     "message": "Ilość kolumn"
   },
-  "widget_settings_field_backgroundGallery_label": {
+  "widget_settings_submit": {
+    "message": "Zapisz ustawienia"
+  },
+  "widget_settings_background_title": {
+    "message": "Tło nowej karty"
+  },
+  "widget_settings_background_field_backgroundGallery_label": {
     "message": "Tło z galerii"
   },
-  "widget_settings_field_backgroundUrl_label": {
+  "widget_settings_background_field_backgroundUrl_label": {
     "message": "Tło z adresu URL"
   },
-  "widget_settings_field_backgroundUrl_help": {
+  "widget_settings_background_field_backgroundUrl_help": {
     "message": "Zdjęcie nie może mieć więcej niż 5MB"
   },
-  "widget_settings_submit": {
-    "message": "Zapisz ustawienia"
+  "widget_settings_background_submit": {
+    "message": "Zapisz tło"
   },
   "widget_bookmarks_title": {
     "message": "Widget zakładek"

css/common.css

@@ -1,3 +1,7 @@
+body {
+  height: 100vh;
+  overflow-y: hidden;
+}
 .container {
   width: 1100px;
   margin: 0 auto;
@@ -28,7 +32,7 @@ ul {
 }
 
 li {
-  line-height: 1.5rem;
+  line-height: 1.75rem;
 }
 
 #bookmarks {
@@ -40,7 +44,7 @@ li {
   position: relative;
   width: 310px;
   background: #ffffff;
-  border-radius: 2px;
+  border-radius: .5rem;
   padding: 1rem;
   margin-bottom: 1rem;
 }
@@ -53,9 +57,12 @@ li {
   padding: 0;
   margin: 0;
   font-size: 1.2rem;
-  color: #666666;
+  color: #999999;
   font-weight: normal;
 }
+.card .header h2 i {
+  font-size: 1rem;
+}
 .card .header .toolbar {
   font-size: 1rem;
   margin-left: auto;
@@ -85,8 +92,8 @@ body.dropdown .col:hover {
   right: 0;
   font-size: 1.5rem;
   background: #ffffff;
-  padding: .5rem 1rem;
-  border-bottom-left-radius: 2px;
+  padding: 1rem 1rem;
+  border-bottom-left-radius: .5rem;
   color: #666666;
 }
 #actions i {

css/newtab.css

@@ -1,17 +1,6 @@
-.container {
-  width: 100%;
-}
-.row {
-  display: flex;
-  flex-wrap: wrap;
-}
-.col {
-  flex-grow: 1;
-  flex-basis: 0;
-  max-width: 100%;
-  padding: .75rem;
+body {
+  background: #efefef;
 }
-
 a, a:active, a:link {
   color: #444444;
   text-decoration: none;
@@ -27,6 +16,24 @@ li {
   line-height: 1.5rem;
 }
 
+.container {
+  width: 100%;
+}
+.row {
+  display: flex;
+  flex-wrap: wrap;
+}
+.col {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
+  padding: 1rem;
+}
+
+#settings .card {
+  background: transparent;
+}
+
 #bookmarks {
   display: flex;
   justify-content: center;
@@ -35,100 +42,124 @@ li {
 .card {
   float: none;
   flex-direction: column;
-  background: #ffffff;
   padding: 0;
   margin-bottom: 1rem;
-  border-radius: .25rem;
-  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
 }
 .card .header {
   font-size: 1.2rem;
-  color: #666666;
+  color: #999999;
   display: flex;
   padding: .5rem 1rem;
-  border-bottom: 1px solid rgba(0,0,0,.05);
 }
 .card .header h2 {
   padding: 0;
   margin: 0;
-  font-size: 1.2rem;
-  color: #666666;
+  font-size: 1rem;
   font-weight: normal;
 }
+.card .header h2 i {
+  padding-right: .5rem;
+}
 .card .header .toolbar {
   margin-left: auto;
 }
 .card .body {
   flex-grow: 1;
-  padding: .5rem 1rem;
+  padding: 1rem;
+  background: #ffffff;
+  border-radius: .5rem;
+  box-shadow: 0 1px 16px 0 #dfdfdf;
 }
-.card .footer {
+.card .body .footer {
   flex-grow: 1;
-  border-top: 1px solid rgba(0,0,0,.05);
-  padding: .5rem 1rem;
+  padding-top: 2rem;
 }
 
 .form {
 
 }
-.form .field {
-  clear: both;
+.form .control {
   padding-bottom: 1rem;
 }
-.form .field:last-child {
+.form .control:last-child {
   padding-bottom: 0;
 }
-.form .field > label {
-  display: block;
-  margin: 0 0 .28571429rem 0;
-  color: rgba(0,0,0,.87);
-  font-size: .92857143rem;
+.form .control .field {
+  clear: both;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+
+}
+.form .control .field > label {
+  font-size: .8rem;
+  color: #666666;
   font-weight: 700;
+  flex-basis: auto;
+  line-height: 2rem;
 }
-.form .field > input {
-  width: 100%;
-  display: block;
+.form .control .field > input {
+  padding: 0 .5rem;
   height: 2rem;
-  padding: 0 .25rem;
   box-shadow: none;
   border: 1px solid rgba(34,36,38,.15);
-  border-radius: .25rem;
+  border-radius: .5rem;
   line-height: 1rem;
   transition: box-shadow .1s ease, width .1s ease, -webkit-box-shadow .1s ease;
 }
-.form .field > select {
-  width: 100%;
-  display: block;
+.form .control .field > select {
   white-space: normal;
   cursor: pointer;
   height: 2rem;
-  padding: 0 1rem;
   box-shadow: none;
   border: 1px solid rgba(34,36,38,.15);
-  border-radius: .25rem;
+  border-radius: .5rem;
   line-height: 1rem;
   transition: box-shadow .1s ease, width .1s ease, -webkit-box-shadow .1s ease;
 }
-.form .field span.help {
+.form .control span.help {
+  display: block;
   font-size: .7rem;
-  color: #666666;
+  color: #999999;
+  padding: .25rem 0 0 0;
 }
-.form .field .gallery {
-
+.form .gallery {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 1rem;
 }
-.form .field .gallery img.image {
-  height: 100px;
+.form .gallery .image {
   margin-right: .5rem;
   margin-bottom: .5rem;
+  flex-direction: column;
+  border-radius: .5rem;
+  height: 100px;
+  width: 160px;
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: contain;
+  cursor: pointer;
 }
-.form .field .gallery img.image.selected {
-  border: 2px solid #db2828;
-  box-sizing: border-box;
-}
-
-
+.form .gallery .image.selected {
 
+}
+.form .gallery .image.selected .check-icon {
+  color: #ffffff;
+  border-radius: 1rem;
+  display: block;
+  position: absolute;
+  top: calc(50% - 1rem);
+  left: calc(50% - 1rem);
+  background: #e94e49;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  font-size: 2rem;
+}
+.form .gallery .image.selected .check-icon .i {
 
+}