diff --git a/icons/128.png b/icons/128.png
deleted file mode 100644
index 621e8b0..0000000
Binary files a/icons/128.png and /dev/null differ
diff --git a/icons/16.png b/icons/16.png
deleted file mode 100644
index 872723d..0000000
Binary files a/icons/16.png and /dev/null differ
diff --git a/icons/32.png b/icons/32.png
deleted file mode 100644
index b5432bb..0000000
Binary files a/icons/32.png and /dev/null differ
diff --git a/icons/48.png b/icons/48.png
deleted file mode 100644
index fca8aaf..0000000
Binary files a/icons/48.png and /dev/null differ
diff --git a/popup.css b/popup.css
index e3ebb1a..f396dcf 100644
--- a/popup.css
+++ b/popup.css
@@ -256,6 +256,7 @@ body[data-appearance='home'] .satus-text--title
2.0 Section
3.0 Folder
4.0 Button
+5.0 Switch
--------------------------------------------------------------*/
/*--------------------------------------------------------------
@@ -332,6 +333,83 @@ body[data-appearance='home'] .satus-text--title
height: 48px;
padding: 0 16px;
}
+
+
+/*--------------------------------------------------------------
+5.0 SWITCH
+--------------------------------------------------------------*/
+
+.satus-switch--checkbox
+{
+ flex-direction: row-reverse;
+}
+
+.satus-switch--checkbox .satus-switch__label
+{
+ margin: 0 0 0 16px;
+
+ flex: 1;
+}
+
+.satus-switch--checkbox .satus-switch__track
+{
+ width: 22px;
+ min-width: 22px;
+ max-width: 22px;
+ height: 22px;
+ min-height: 22px;
+ max-height: 22px;
+
+ border-radius: 50%;
+ background: transparent;
+ box-shadow: inset 0 0 0 1px #bdbdbd;
+}
+
+.satus-switch--checkbox .satus-switch__track::before
+{
+ position: absolute;
+ top: 7px;
+ left: 5px;
+
+ visibility: hidden;
+
+ width: 10px;
+ height: 5px;
+
+ transition: unset;
+ transform: rotate(-45deg);
+
+ opacity: 0;
+ border: 2px solid #fff;
+ border-top: none;
+ border-right: none;
+ border-radius: unset;
+ background-color: transparent;
+}
+
+.satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track::before
+{
+ top: 7px;
+ left: 5px;
+
+ visibility: visible;
+
+ transform: rotate(-45deg);
+
+ opacity: 1;
+ background-color: transparent;
+}
+
+.satus-switch--checkbox .satus-switch__track::after
+{
+ content: none;
+}
+
+.satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track
+{
+ background: linear-gradient(135deg, #f8d266, #f17953);
+ box-shadow: 0 1px 2px rgba(0,0,0,.35);
+}
.satus-button--create
{
@@ -339,8 +417,8 @@ body[data-appearance='home'] .satus-text--title
right: 16px;
bottom: 16px;
- width: 48px;
- height: 48px;
+ width: 56px;
+ height: 56px;
padding: 0;
transition: background 500ms 250ms, transform 500ms, box-shadow 525ms;
@@ -351,14 +429,6 @@ body[data-appearance='home'] .satus-text--title
box-shadow: 0 2px 1px 1px rgba(230, 109, 70, .7), 0 3px 5px rgba(0,0,0,.35);
}
-.satus-button--create:hover
-{
- transition: background 250ms 125ms, transform 250ms, box-shadow 275ms;
- transform: translateY(4px) scale(.975);
-
- box-shadow: 0 1px 1px 0 rgba(230, 109, 70, .7), 0 1px 2px rgba(0,0,0,.35);
-}
-
.satus-button--create::before
{
content: none;
diff --git a/popup.js b/popup.js
index 13dcce8..8828149 100644
--- a/popup.js
+++ b/popup.js
@@ -24,6 +24,7 @@ function update(container) {
0: {
type: 'folder',
label: 'My Tasks',
+ before: '',
appearanceKey: 'list',
storage_key: 0
}
@@ -40,10 +41,11 @@ function update(container) {
list.section[key] = data[key];
list.section[key].appearanceKey = 'list';
list.section[key].storage_key = key;
+ list.section[key].before = '';
}
}
} else if (item.appearanceKey === 'list') {
- if (Object.keys(item).length === 4) {
+ if (Object.keys(item).length === 5) {
list.section.class = 'satus-section--message';
list.section.message = {
@@ -54,6 +56,7 @@ function update(container) {
for (var key in data[item.storage_key]) {
if (typeof data[item.storage_key][key] === 'object') {
list.section[key] = data[item.storage_key][key];
+ list.section[key].class = 'satus-switch--checkbox';
list.section[key].dataset = {
key: key
};
@@ -63,7 +66,6 @@ function update(container) {
data = JSON.parse(Satus.storage.get('data') || '{}');
data[history_item.storage_key][this.dataset.key].value = this.querySelector('input').checked;
-
Satus.storage.set('data', JSON.stringify(data));
};
}
@@ -92,6 +94,7 @@ function create() {
data[key].appearanceKey = 'list';
data[key].storage_key = key;
+ data[key].before = '';
Satus.render(data[key], document.querySelector('.satus-main .satus-section'));
} else {
@@ -100,6 +103,7 @@ function create() {
data[folder_key][task_key] = {
type: 'switch',
+ class: 'satus-switch--checkbox',
label: value
};
@@ -113,6 +117,8 @@ function create() {
Satus.render(data[folder_key][task_key], document.querySelector('.satus-main .satus-section'));
}
+
+ document.querySelector('.satus-dialog__scrim').click();
}
var Menu = {
header: {
@@ -186,6 +192,13 @@ Menu.create = {
if (event.keyCode === 13) {
create();
}
+ },
+ onrender: function() {
+ var self = this;
+
+ setTimeout(function() {
+ self.focus();
+ });
}
},
section: {
diff --git a/satus.js b/satus.js
index 36e6a1c..1f0645b 100644
--- a/satus.js
+++ b/satus.js
@@ -2,8 +2,7 @@
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
-# Storage
-# Components
+# Events
# Render
# Camelize
# Animation duration
@@ -13,57 +12,17 @@ var Satus = {};
/*--------------------------------------------------------------
-# STORAGE
+# EVENTS
--------------------------------------------------------------*/
-Satus.storage = {};
-
-
-/*--------------------------------------------------------------
-# STORAGE [GET]
---------------------------------------------------------------*/
-
-Satus.storage.get = function(name) {
- return Satus.storage[name];
-};
-
-
-/*--------------------------------------------------------------
-# STORAGE [SET]
---------------------------------------------------------------*/
-
-Satus.storage.set = function(name, value) {};
-
-
-/*--------------------------------------------------------------
-# STORAGE [IMPORT]
---------------------------------------------------------------*/
-
-Satus.storage.import = function(callback) {};
-
-
-/*--------------------------------------------------------------
-# STORAGE [CLEAR]
---------------------------------------------------------------*/
-
-Satus.storage.clear = function(callback) {};
-
-
-/*--------------------------------------------------------------
-# LOCALE
---------------------------------------------------------------*/
-
-Satus.locale = {
- messages: {}
-};
+Satus.events = {};
+Satus.on = function(event, handler) {
+ if (!this.isset(this.events[event])) {
+ this.events[event] = [];
+ }
-/*--------------------------------------------------------------
-# GET MESSAGE
---------------------------------------------------------------*/
-
-Satus.locale.getMessage = function(string) {
- return this.messages[string] || string;
+ this.events[event].push(handler);
};
@@ -133,6 +92,12 @@ Satus.render = function(element, container, callback) {
});
}
+ if (Satus.isset(Satus.events.render)) {
+ for (var i = 0, l = Satus.events.render.length; i < l; i++) {
+ Satus.events.render[i](component, object);
+ }
+ }
+
if (typeof component.onrender === 'function') {
component.onrender();
}
@@ -193,6 +158,8 @@ Satus.getAnimationDuration = function(element) {
4.0 Clear
--------------------------------------------------------------*/
+Satus.storage = {};
+
/*--------------------------------------------------------------
# GET
--------------------------------------------------------------*/
@@ -251,6 +218,23 @@ Satus.storage.clear = function() {
}
}
};
+/*--------------------------------------------------------------
+# LOCALE
+--------------------------------------------------------------*/
+
+Satus.locale = {
+ messages: {}
+};
+
+
+/*--------------------------------------------------------------
+# GET MESSAGE
+--------------------------------------------------------------*/
+
+Satus.locale.getMessage = function(string) {
+ return this.messages[string] || string;
+};
+
/*--------------------------------------------------------------
# IMPORT LOCALE
--------------------------------------------------------------*/
@@ -721,6 +705,25 @@ Satus.modules.user = function() {
return data;
};
+Satus.on('render', function(component, data) {
+ if (data.perspective === true) {
+ component.style.willChange = 'transform';
+ component.style.transformStyle = 'preserve-3d';
+ component.style.transition = '.4s';
+
+ component.addEventListener('mousemove', function(event) {
+ var bounding = component.getBoundingClientRect(),
+ dx = event.clientX - bounding.left - bounding.width / 2,
+ dy = event.clientY - bounding.top - bounding.height / 2;
+
+ this.style.transform = 'perspective(440px) rotateX(' + dy * -1 + 'deg) rotateY(' + dx + 'deg) translateZ(0)';
+ });
+
+ component.addEventListener('mouseout', function(event) {
+ this.style.transform = 'perspective(440px) rotateX(0deg) rotateY(0deg) translateZ(0)';
+ });
+ }
+});
/*--------------------------------------------------------------
>>> BUTTON
--------------------------------------------------------------*/
diff --git a/src/css/footer.css b/src/css/footer.css
index 5fc4a40..209d40b 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -4,8 +4,8 @@
right: 16px;
bottom: 16px;
- width: 48px;
- height: 48px;
+ width: 56px;
+ height: 56px;
padding: 0;
transition: background 500ms 250ms, transform 500ms, box-shadow 525ms;
@@ -16,14 +16,6 @@
box-shadow: 0 2px 1px 1px rgba(230, 109, 70, .7), 0 3px 5px rgba(0,0,0,.35);
}
-.satus-button--create:hover
-{
- transition: background 250ms 125ms, transform 250ms, box-shadow 275ms;
- transform: translateY(4px) scale(.975);
-
- box-shadow: 0 1px 1px 0 rgba(230, 109, 70, .7), 0 1px 2px rgba(0,0,0,.35);
-}
-
.satus-button--create::before
{
content: none;
diff --git a/src/css/main.css b/src/css/main.css
index ddbd39a..17bb058 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -5,6 +5,7 @@
2.0 Section
3.0 Folder
4.0 Button
+5.0 Switch
--------------------------------------------------------------*/
/*--------------------------------------------------------------
@@ -81,3 +82,80 @@
height: 48px;
padding: 0 16px;
}
+
+
+/*--------------------------------------------------------------
+5.0 SWITCH
+--------------------------------------------------------------*/
+
+.satus-switch--checkbox
+{
+ flex-direction: row-reverse;
+}
+
+.satus-switch--checkbox .satus-switch__label
+{
+ margin: 0 0 0 16px;
+
+ flex: 1;
+}
+
+.satus-switch--checkbox .satus-switch__track
+{
+ width: 22px;
+ min-width: 22px;
+ max-width: 22px;
+ height: 22px;
+ min-height: 22px;
+ max-height: 22px;
+
+ border-radius: 50%;
+ background: transparent;
+ box-shadow: inset 0 0 0 1px #bdbdbd;
+}
+
+.satus-switch--checkbox .satus-switch__track::before
+{
+ position: absolute;
+ top: 7px;
+ left: 5px;
+
+ visibility: hidden;
+
+ width: 10px;
+ height: 5px;
+
+ transition: unset;
+ transform: rotate(-45deg);
+
+ opacity: 0;
+ border: 2px solid #fff;
+ border-top: none;
+ border-right: none;
+ border-radius: unset;
+ background-color: transparent;
+}
+
+.satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track::before
+{
+ top: 7px;
+ left: 5px;
+
+ visibility: visible;
+
+ transform: rotate(-45deg);
+
+ opacity: 1;
+ background-color: transparent;
+}
+
+.satus-switch--checkbox .satus-switch__track::after
+{
+ content: none;
+}
+
+.satus-switch--checkbox .satus-switch__input:checked + .satus-switch__track
+{
+ background: linear-gradient(135deg, #f8d266, #f17953);
+ box-shadow: 0 1px 2px rgba(0,0,0,.35);
+}
diff --git a/src/js/footer.js b/src/js/footer.js
index 93631d3..9e772a3 100644
--- a/src/js/footer.js
+++ b/src/js/footer.js
@@ -17,6 +17,13 @@ Menu.create = {
if (event.keyCode === 13) {
create();
}
+ },
+ onrender: function() {
+ var self = this;
+
+ setTimeout(function() {
+ self.focus();
+ });
}
},
section: {
diff --git a/src/js/functions.js b/src/js/functions.js
index 4f35ce9..44207c6 100644
--- a/src/js/functions.js
+++ b/src/js/functions.js
@@ -23,6 +23,7 @@ function update(container) {
0: {
type: 'folder',
label: 'My Tasks',
+ before: '',
appearanceKey: 'list',
storage_key: 0
}
@@ -39,10 +40,11 @@ function update(container) {
list.section[key] = data[key];
list.section[key].appearanceKey = 'list';
list.section[key].storage_key = key;
+ list.section[key].before = '';
}
}
} else if (item.appearanceKey === 'list') {
- if (Object.keys(item).length === 4) {
+ if (Object.keys(item).length === 5) {
list.section.class = 'satus-section--message';
list.section.message = {
@@ -53,6 +55,7 @@ function update(container) {
for (var key in data[item.storage_key]) {
if (typeof data[item.storage_key][key] === 'object') {
list.section[key] = data[item.storage_key][key];
+ list.section[key].class = 'satus-switch--checkbox';
list.section[key].dataset = {
key: key
};
@@ -62,7 +65,6 @@ function update(container) {
data = JSON.parse(Satus.storage.get('data') || '{}');
data[history_item.storage_key][this.dataset.key].value = this.querySelector('input').checked;
-
Satus.storage.set('data', JSON.stringify(data));
};
}
@@ -91,6 +93,7 @@ function create() {
data[key].appearanceKey = 'list';
data[key].storage_key = key;
+ data[key].before = '';
Satus.render(data[key], document.querySelector('.satus-main .satus-section'));
} else {
@@ -99,6 +102,7 @@ function create() {
data[folder_key][task_key] = {
type: 'switch',
+ class: 'satus-switch--checkbox',
label: value
};
@@ -112,4 +116,6 @@ function create() {
Satus.render(data[folder_key][task_key], document.querySelector('.satus-main .satus-section'));
}
+
+ document.querySelector('.satus-dialog__scrim').click();
}
\ No newline at end of file