Merge pull request #19 from stefansl/dev

Merge Dev
stefansl · Feb 17, 2018 · d1b6f51 · d1b6f51
2 parents 113e7af + 78d4430
commit d1b6f51
Show file tree

Hide file tree

Showing 17 changed files with 4,667 additions and 7,546 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ dist/
 script.sh
 /Mac_Distribution_Provisioning_Profiles_.provisionprofile
 !/build/
+/electron-builder.yml
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Image Shrinker
 
 SVGO-GUI is not maintained anymore. So I decided to rebuild it with Electron.
-Image Shrinker (prev. SVG Shrinker) is a tool to minify images and graphics using [pngquant](https://pngquant.org/), [mozjpg](https://github.com/mozilla/mozjpeg) and [SVGgo](https://github.com/svg/svgo). 
+Image Shrinker (prev. SVG Shrinker) is a tool to minify images and graphics using [pngquant](https://pngquant.org/), [mozjpg](https://github.com/mozilla/mozjpeg) and [SVGO](https://github.com/svg/svgo). 
 
 ![Screenshot Imageshrinker](https://raw.githubusercontent.com/stefansl/image-shrinker/dev/assets/img/screen.min.png "Screenshot Image Shrinker")
 

diff --git a/assets/css/imageshrinker.css b/assets/css/imageshrinker.css
diff --git a/assets/css/imageshrinker.css.map b/assets/css/imageshrinker.css.map
diff --git a/assets/css/imageshrinker.scss b/assets/css/imageshrinker.scss
@@ -23,6 +23,7 @@
 $black: #111;
 $white: #fefefe;
 $primary-color: #46c2fe;
+$secondary-color: #d86550;
 
 :root {
   --main-bg-color: #111;
@@ -69,6 +70,7 @@ body {
 
 #dragzone {
   cursor: pointer;
+  position: relative;
   opacity: .5;
   border: 2px dashed var(--main-bg-color);
   padding: 1em;
@@ -79,6 +81,23 @@ body {
   &.drag-active {
     opacity: .9;
   }
+  &::after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    content: " ";
+    opacity: 0;
+    transition: all .4s ease-out;
+    background-color: transparent;
+    left: 0;
+    top: 0;
+  }
+  &.is--processing::after {
+    background: rgba($secondary-color,.5) url("../img/tail-spin.min.svg") no-repeat center center;
+    background-size: 15%;
+    opacity: 1;
+  }
   &:hover {
     opacity: .75;
   }
@@ -215,4 +234,14 @@ body {
 .btn.btn-sm {
   font-size: .5rem;
 
+}
+
+#overlay {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top:  0;
+  left: 0;
+  z-index: 10;
+  //background-color: rgba($white, .5);
 }
diff --git a/assets/css/spectre.scss b/assets/css/spectre.scss
@@ -47,4 +47,4 @@
 
 // Utility classes
 @import "../../node_modules/spectre.css/src/animations";
-@import "../../node_modules/spectre.css/src/utilities";
+@import "../../node_modules/spectre.css/src/utilities";
diff --git a/assets/img/rings.min.svg b/assets/img/rings.min.svg
diff --git a/assets/img/rings.svg b/assets/img/rings.svg
diff --git a/assets/img/tail-spin.min.svg b/assets/img/tail-spin.min.svg
diff --git a/assets/img/tail-spin.svg b/assets/img/tail-spin.svg
diff --git a/extend.plist b/extend.plist
@@ -0,0 +1,18 @@
+<key>CFBundleDocumentTypes</key>
+<array>
+  <dict>
+    <key>CFBundleTypeExtensions</key>
+    <array>
+      <string>png</string>
+      <string>jpg</string>
+      <string>jpeg</string>
+      <string>svg</string>
+    </array>
+    <key>CFBundleTypeName</key>
+    <string>png</string>
+    <key>CFBundleTypeRole</key>
+    <string>Editor</string>
+    <key>CFBundleTypeIconFile</key>
+    <string>Image Shrinker.icns</string>
+  </dict>
+</array>
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="assets/css/imageshrinker.css">
 </head>
 <body>
+
 <div class="wrapper">
 
     <i class="icon icon-more-horiz icon-2x float-right d-block" id="btnOpenSettings"></i>
@@ -57,6 +58,19 @@ <h3>Settings</h3>
                 </div>
             </div>
 
+            <div class="columns">
+                <div class="column col-9">
+                    Add .min suffix to shrinked files
+                </div>
+                <div class="column col-3 ">
+                    <label class="form-switch float-right">
+                        <input id="suffix" name="suffix" type="checkbox" checked="checked">
+                        <i class="form-icon"></i>
+                    </label>
+
+                </div>
+            </div>
+
             <div class="columns">
                 <div class="column col-9">
                     Clear result list, when shrinking new images
@@ -66,7 +80,6 @@ <h3>Settings</h3>
                         <input id="clearlist" name="clearlist" type="checkbox">
                         <i class="form-icon"></i>
                     </label>
-
                 </div>
             </div>
         </div>