set background preview

d0peCode · d0peCode · commit 81fc5c93a7b0 · 2019-09-16T00:24:39.000+02:00
diff --git a/public/css/css/output.css b/public/css/css/output.css
@@ -190,10 +190,31 @@ a {
     background-color: #f1f1f1; }
 
 .palette {
-  display: flex; }
+  display: flex;
+  flex-direction: column; }
+  .palette__container {
+    display: flex; }
   .palette__record {
+    height: 100px;
     flex: 1;
-    margin: 0 1rem; }
+    margin: 0 1rem;
+    border: 2px dashed black; }
+
+.bg {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0; }
+  .bg__entire {
+    height: 100vh;
+    z-index: -3; }
+  .bg__top {
+    height: 50vh;
+    z-index: -2; }
+  .bg__bottom {
+    top: 50%;
+    height: 50vh;
+    z-index: -2; }
 
 .landing__label {
   margin-top: 10px;
@@ -221,6 +242,11 @@ a {
       border: 2px dashed black; }
   .landing__colorsample-main {
     width: 70%; }
+  .landing__colorsample-heading {
+    position: absolute;
+    top: 50%;
+    left: 30%;
+    transform: translate(-50%, -50%); }
 
 .landing__buttons {
   display: flex;
@@ -229,30 +255,13 @@ a {
   .landing__buttons button {
     margin: 0 5px; }
 
-.landing__palette {
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 30px;
-  overflow: hidden;
-  height: 180px; }
-
-.landing__palette__record {
-  border: 2px dashed black;
-  height: 140px;
-  margin-bottom: 10px;
-  width: 23%;
-  margin-left: 1%;
-  margin-right: 1%;
-  position: relative; }
-
-.landing__palette__record__paragraph, .landing__colorsample__list {
+.landing__colorsample__list {
   width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); }
 
-.landing__palette__record__paragraph,
 .landing__colorsample__list li {
   font-size: 24px;
   color: white;
diff --git a/public/css/scss/components/_bg.scss b/public/css/scss/components/_bg.scss
@@ -0,0 +1,20 @@
+.bg {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    &__entire {
+        height: 100vh;
+        z-index: -3;
+    }
+    &__top {
+        height: 50vh;
+        z-index: -2;
+    }
+    &__bottom {
+        top: 50%;
+        height: 50vh;
+        z-index: -2;
+    }
+}
diff --git a/public/css/scss/components/_palette.scss b/public/css/scss/components/_palette.scss
@@ -1,8 +1,14 @@
 .palette {
     display: flex;
+    flex-direction: column;
 
+    &__container {
+        display: flex;
+    }
     &__record {
+        height: 100px;
         flex: 1;
         margin: 0 1rem;
+        border: 2px dashed black;
     }
 }
diff --git a/public/css/scss/main.scss b/public/css/scss/main.scss
@@ -10,6 +10,7 @@
 @import "components/modal";
 @import "components/tab";
 @import "components/palette";
+@import "components/bg";
 
 @import "views/landing";
 
diff --git a/public/css/scss/views/_landing.scss b/public/css/scss/views/_landing.scss
@@ -28,6 +28,13 @@
             width: 70%;
         }
 
+        &-heading {
+            position: absolute;
+            top: 50%;
+            left: 30%;
+            transform: translate(-50%, -50%);
+        }
+
         height: 159px;
         border: 3px dashed black;
         position: relative;
@@ -41,31 +48,13 @@
             margin: 0 5px;
         }
     }
-    &__palette {
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 30px;
-        overflow: hidden;
-        height: 180px;
-    }
-    &__palette__record {
-        border: 2px dashed black;
-        height: 140px;
-        margin-bottom: 10px;
-        width: 23%;
-        margin-left: 1%;
-        margin-right: 1%;
-        position: relative;
-    }
-    &__palette__record__paragraph,
     &__colorsample__list {
         width: 100%;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
-    &__palette__record__paragraph,
     &__colorsample__list li {
         font-size: 24px;
         color: white;
diff --git a/public/html/views/main.html b/public/html/views/main.html
@@ -1,31 +1,27 @@
 <div class="container text-center">
-    <form data-ng-submit="fireColorReader()" class="form-inline">
-        <div class="form-group">
-            <label for="colorField" class="landing__label">Below enter color in HEX format</label>
-            <input type="text" ng-model="selectedColor" class="form-control" id="colorField" required>
-        </div>
-    </form>
+    <div class="form-group">
+        <label for="colorField" class="landing__label">Below enter color in HEX format or chose new color</label>
+        <input type="text" ng-model="selectedColor" class="form-control" id="colorField" required>
+    </div>
 
     <div class="landing__colorsample-container">
         <div class="landing__colorsample-left">
-            <div class="landing__colorsample-left-box" style="background-color: #{{selectedColor}}; filter: brightness(80%);"></div>
-            <div class="landing__colorsample-left-box" style="background-color: #{{selectedColor}}; filter: brightness(60%);"></div>
-            <div class="landing__colorsample-left-box" style="background-color: #{{selectedColor}}; filter: brightness(40%);"></div>
+            <div class="landing__colorsample-left-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(80%);"></div>
+            <div class="landing__colorsample-left-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(60%);"></div>
+            <div class="landing__colorsample-left-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(40%);"></div>
         </div>
         <div class="landing__colorsample-main">
-            <div class="landing__colorsample" style="background-color: #{{selectedColor}}">
-                <ul class="list-unstyled landing__colorsample__list">
-                    <li data-ng-repeat="n in convertedColors | orderBy: reverse : true | limitTo: 1">
-                        {{n.colorInHEX}} <br> {{n.colorInHSL}} <br> {{n.colorInRGB}}
-                    <li>
-                </ul>
+            <div class="landing__colorsample" data-ng-style="{ 'background-color': '#' + selectedColor }">
+                <h3 class="landing__colorsample-heading">
+                    {{ selectedColor }}
+                </h3>
                 <color-picker ng-model="selectedColor" api="api" options="options"></color-picker>
             </div>
         </div>
         <div class="landing__colorsample-right">
-            <div class="landing__colorsample-right-box" style="background-color: #{{selectedColor}}; filter: brightness(120%);"></div>
-            <div class="landing__colorsample-right-box" style="background-color: #{{selectedColor}}; filter: brightness(140%);"></div>
-            <div class="landing__colorsample-right-box" style="background-color: #{{selectedColor}}; filter: brightness(160%);"></div>
+            <div class="landing__colorsample-right-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(120%);"></div>
+            <div class="landing__colorsample-right-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(140%);"></div>
+            <div class="landing__colorsample-right-box" data-ng-style="{ 'background-color': '#' + selectedColor }" style="filter: brightness(160%);"></div>
         </div>
     </div>
 
@@ -42,33 +38,25 @@
             </select>
         </button>
         <button class="btn btn-default" data-ng-click="saveToPalette(selectedColor)">Save to palette</button>
-        <button class="btn btn-default">Set as background</button>
-        <button class="btn btn-default">Set as background 50%</button>
+        <button class="btn btn-default" data-ng-click="setBackground('bgEntire')">Set as background</button>
+        <button class="btn btn-default" data-ng-click="setBackground('bgTop')">Set as background 50% top</button>
+        <button class="btn btn-default" data-ng-click="setBackground('bgBottom')">Set as background 50% bottom</button>
+        <button class="btn btn-default" data-ng-click="setBackground('clear')">Clear backgrounds</button>
     </div>
 </div>
 
-{{ palette }}
-
-<!--
-<div class="container landing__palette">
     <div class="palette">
-        <p class="help-block">Hey you! Your colors will stay in palette until you clear cache or click button below! {{ palette }}</p>
+        <p class="help-block">Hey you! Your colors will stay in palette until you clear cache or click button below!</p>
         <div class="palette__container">
             <div class="palette__record"
-                 data-ng-repeat="n in palette | orderBy: reverse : true | limitTo: 8"
-                 style="background-color: {{n.inHEX}}">
-                <p class="landing__palette__record__paragraph text-center">
-                    {{n.inHSL}} <br> {{n.inHEX}} <br>
-                </p>
+                 data-ng-repeat="n in palette track by $index"
+                 data-ng-style="{'background-color':'#'+n}">
             </div>
         </div>
     </div>
-</div>
--->
-
 
 <div class="landing__buttons">
-    <button class="btn btn-success landing__palette__button--success" data-ng-click="clearCache()">Clear Palette</button>
+    <button class="btn btn-success landing__palette__button--success" data-ng-click="clearEntirePalette()">Clear Palette</button>
     <button data-ng-if="logged" class="btn btn-success landing__palette__button--success" data-ng-click="savePalette()">Save Palette</button>
     <button data-ng-if="!logged" class="btn btn-success landing__palette__button--success" data-ng-click="openLogin()">Save Palette</button>
 </div>
diff --git a/public/index.html b/public/index.html
@@ -21,6 +21,11 @@
 </head>
 <body data-ng-app="app" data-ng-cloak="" data-ng-controller="external">
     <topbar></topbar>
+
+    <div class="bg bg__entire" data-ng-style="{'background-color': '#'+bgEntire}"></div>
+    <div class="bg bg__top" data-ng-style="{'background-color': '#'+bgTop}"></div>
+    <div class="bg bg__bottom" data-ng-style="{'background-color': '#'+bgBottom}"></div>
+
     <div data-ng-view=""></div>
     <div class="modal__overlay" data-ng-if="modalLogin || modalRegister"></div>
     <div class="modal__outer" data-ng-if="modalLogin || modalRegister">
diff --git a/public/js/controllers/externalCtrl.js b/public/js/controllers/externalCtrl.js
@@ -12,6 +12,9 @@
             $scope.modalLogin = stateService.get('modalLogin');
             $scope.modalRegister = stateService.get('modalRegister');
             $scope.logged = stateService.get('logged');
+            $scope.bgEntire = stateService.get('bgEntire');
+            $scope.bgTop = stateService.get('bgTop');
+            $scope.bgBottom = stateService.get('bgBottom');
         });
 
         $localForage.getItem('authorization')
diff --git a/public/js/controllers/mainCtrl.js b/public/js/controllers/mainCtrl.js
@@ -5,7 +5,6 @@
         .module('app')
         .controller('mainCtrl', Controller);
 
-    //$inject for minify issue
     Controller.$inject = ['$scope', '$rootScope', '$localForage', 'stateService'];
 
     function Controller($scope, $rootScope, $localForage, stateService) {
@@ -26,14 +25,38 @@
             }
         };
 
+        vm.$watch('palette', newVal => {
+            console.log('caught change');
+
+            if(newVal.length < 8) {
+                const fillArr =  new Array(8 - newVal.length);
+                fillArr.fill('');
+                vm.palette = vm.palette.concat(fillArr);
+                console.log(vm.palette);
+            }
+            if(newVal.length > 8 && newVal.includes("")) {
+                console.log('more than 8 and contain empty string');
+                for(let i = 0; i < newVal.length; i++) {
+                    if(newVal[i] === '') {
+                        vm.palette.splice(i, 1);
+                        return;
+                    }
+                }
+            }
+        });
+
+        vm.$watch('selectedColor', newVal => {
+            if(newVal.includes('#')) {
+                $scope.selectedColor = newVal.replace('#', '');
+            }
+        });
+
         window.onload = () => { if(vm.api.open) vm.api.open() };
         setTimeout(() => { if(vm.api.open) vm.api.open(); }, 1000);
 
         vm.openLogin = () => stateService.set('modalLogin', true);
 
         vm.saveToPalette = color => {
-            console.log(vm.palette, color);
-
             if(vm.palette.includes(color)) {
                 alert('this color is already within your palette');
             } else {
@@ -47,22 +70,37 @@
                 if(vm.palette[i] === color) {
                     vm.palette.splice(i, 1);
                     $localForage.setItem('palette', vm.palette);
-                    //$scope.$apply();
                 }
             }
         };
+
+        vm.setBackground = pos => {
+            if(pos === 'clear') {
+                stateService.set('bgEntire', 'edf2f0');
+                stateService.set('bgTop', 'edf2f0');
+                stateService.set('bgBottom', 'edf2f0');
+            } else {
+                stateService.set(pos, vm.selectedColor);
+            }
+        };
+
         vm.clearEntirePalette = () => {
-            $localForage.clear()
-                .then(() => { vm.colorsFromCache = []; });
+            $localForage.setItem('palette', [])
+                .then(() => {
+                    $localForage.getItem('palette')
+                        .then(colors => {
+                            if(colors) {
+                                vm.palette = colors;
+                            } else {
+                                vm.palette = [];
+                            }
+                        });
+                });
         };
 
         $localForage.getItem('palette')
             .then(colors => {
-                if(colors) vm.palette = colors;
+                if(colors) console.log('eee', colors); vm.palette = colors;
             });
-
-        $rootScope.$on('colorChanged', (e, data) => {
-
-        });
     }
 })();
diff --git a/public/js/services/stateService.js b/public/js/services/stateService.js
@@ -9,7 +9,10 @@
         this.state = {
             modalLogin: false,
             modalRegister: false,
-            logged: false
+            logged: false,
+            bgEntire: '',
+            bgTop: '',
+            bgBottom: ''
         };
         this.set = (property, value) => {
             this.state[property] = value;

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,14 @@`
`1`	`1`	`.palette {`
`2`	`2`	`display: flex;`
	`3`	`+ flex-direction: column;`
`3`	`4`
	`5`	`+ &__container {`
	`6`	`+ display: flex;`
	`7`	`+ }`
`4`	`8`	`&__record {`
	`9`	`+ height: 100px;`
`5`	`10`	`flex: 1;`
`6`	`11`	`margin: 0 1rem;`
	`12`	`+ border: 2px dashed black;`
`7`	`13`	`}`
`8`	`14`	`}`