Skip to content

Commit

Permalink
Minor updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@adokseo
adokseo committed Apr 25, 2020
1 parent abfd8f9 commit 5c60edb
Show file tree
Hide file tree
Showing 11 changed files with 242 additions and 73 deletions.
Binary file removed icons/128.png
View file
Binary file not shown.
Binary file removed icons/16.png
View file
Binary file not shown.
Binary file removed icons/32.png
View file
Binary file not shown.
Binary file removed icons/48.png
View file
Binary file not shown.
90 changes: 80 additions & 10 deletions popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,7 @@ body[data-appearance='home'] .satus-text--title
2.0 Section
3.0 Folder
4.0 Button
5.0 Switch
--------------------------------------------------------------*/

/*--------------------------------------------------------------
Expand Down Expand Up @@ -332,15 +333,92 @@ 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
{
position: fixed;
right: 16px;
bottom: 16px;

width: 48px;
height: 48px;
width: 56px;
height: 56px;
padding: 0;

transition: background 500ms 250ms, transform 500ms, box-shadow 525ms;
Expand All @@ -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;
Expand Down
17 changes: 15 additions & 2 deletions popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ function update(container) {
0: {
type: 'folder',
label: 'My Tasks',
before: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
appearanceKey: 'list',
storage_key: 0
}
Expand All @@ -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 = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
}
}
} 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 = {
Expand All @@ -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
};
Expand All @@ -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));
};
}
Expand Down Expand Up @@ -92,6 +94,7 @@ function create() {

data[key].appearanceKey = 'list';
data[key].storage_key = key;
data[key].before = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';

Satus.render(data[key], document.querySelector('.satus-main .satus-section'));
} else {
Expand All @@ -100,6 +103,7 @@ function create() {

data[folder_key][task_key] = {
type: 'switch',
class: 'satus-switch--checkbox',
label: value
};

Expand All @@ -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: {
Expand Down Expand Up @@ -186,6 +192,13 @@ Menu.create = {
if (event.keyCode === 13) {
create();
}
},
onrender: function() {
var self = this;

setTimeout(function() {
self.focus();
});
}
},
section: {
Expand Down
101 changes: 52 additions & 49 deletions satus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Storage
# Components
# Events
# Render
# Camelize
# Animation duration
Expand All @@ -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);
};


Expand Down Expand Up @@ -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();
}
Expand Down Expand Up @@ -193,6 +158,8 @@ Satus.getAnimationDuration = function(element) {
4.0 Clear
--------------------------------------------------------------*/

Satus.storage = {};

/*--------------------------------------------------------------
# GET
--------------------------------------------------------------*/
Expand Down Expand Up @@ -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
--------------------------------------------------------------*/
Expand Down Expand Up @@ -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
--------------------------------------------------------------*/
Expand Down
12 changes: 2 additions & 10 deletions src/css/footer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 5c60edb

Please sign in to comment.