Skip to content

Commit

Permalink
SweetAlert and some Design Changes. (#69)
Browse files Browse the repository at this point in the history 
* options page- grid view

* typo 'Scrolls'

* date added to op_pg. scrrolls

* date element added

* merged

* some style changes

* percentage box - fixed width

* delete all redesigned

* background cloth

* little size changes

* SweetAlert

* removed a stray log of mine

* file sizes reduced

* options page changes and animations
  • Loading branch information
@RohitKaushal7 @prateek3255
RohitKaushal7 authored and prateek3255 committed Nov 3, 2019
1 parent c6f6058 commit eedab0f
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 45 deletions.
Binary file added images/bg.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/bin.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 104 additions & 25 deletions options.css
View file
Expand Up @@ -10,9 +10,8 @@
}

body {
/* background: linear-gradient(hsl(271, 77%, 15%), #27012b); */
background: url("./images/bg.jpg");
background: #242a36;
background-size: cover;
min-height: 100vh;
color: #fff;
}
Expand All @@ -32,6 +31,7 @@ body {
.container {
text-align: center;
height: 90vh;
perspective: 20cm;
}
.side {
height: 8rem;
Expand All @@ -41,7 +41,8 @@ body {
color: #ffffff;
}
h1 {
font-size: 4rem;
font-size: 2.5rem;
cursor: default;
/* text-shadow: -5px 5px 5px #000000c9; */
}

Expand Down Expand Up @@ -94,40 +95,95 @@ h1 {
background-color: #d35400;
}

.btn.red {
background-color: #e74c3c;
.btn.del {
background-color: #fff;
}

.btn.red:hover,
.btn.red:focus {
background-color: #c0392b;
.btn.del:hover,
.btn.del:focus {
background-color: #fff;
}

#delete-button {
position: fixed;
bottom: 0px;
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
bottom: 1rem;
/* width: 100%; */
/* right: 2rem; */
right: 50%;
transform: translate(50%, 0) scale(0.98);
transition: all 0.3s;
filter: grayscale(20%);
}
#delete-button:hover {
transform: scale(1) translate(50%, 0);
filter: grayscale(0);
}

#delete-all {
display: block;
width: 110px;
height: 110px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 65px;
height: 65px;
padding: 25px 0px;
text-align: center;
text-shadow: 1px 1px 3px #555;
border-radius: 50%;
transform: translate(0, 70px);
border: 2px solid #ffffff99;
border-radius: 65px;
/* transform: translate(0, 70px); */
margin: 10px auto;
transition: all 0.3s;
box-shadow: 0 0 5px 3px #0005;
z-index: 4;
}

#delete-all:hover {
transform: translate(0, 60px);
border: 2px solid transparent;
transform: scale(0.9);
}

#delete-all img {
width: 45px;
/* filter: invert(100%); */
}

#delete-button::before,
#delete-button::after {
content: "Clear ";
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 1rem;
padding: 5px 15px 5px 10px;
border-radius: 20px 0px 0px 20px;
background: #da4332;
position: relative;
right: -50px;
transition: all 0.2s;
overflow: hidden;
opacity: 0;
z-index: 3;
}
#delete-button::after {
content: " All";
right: 0;
left: -50px;
padding: 5px 20px 5px 25px;
border-radius: 0px 20px 20px 0px;
}

#delete-button:hover::before {
right: -15px;
opacity: 1;
}
#delete-button:hover::after {
left: -15px;
opacity: 1;
}

#saved-urls {
max-width: 1200px;
max-width: 1024px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin: 0 auto;
Expand All @@ -143,23 +199,44 @@ h1 {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0px 5px 15px 15px;
border-radius: 0px 5px 10px 10px;
background: #fff;
background: linear-gradient(to right, #fff, #fff, #fdff74);
background-size: 150%;
box-shadow: -1px 2px 5px 3px #00000055;
cursor: pointer;
transition: all 250ms ease-out;
position: relative;
transform-origin: top;
animation: flip-in 0.3s forwards;
opacity: 0;
transform: rotateX(-15deg);
z-index: 2;
}

#saved-urls > div:hover {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 10px 25px 0 rgba(0, 0, 0, 0.2);
/* transform: translateY(-0.15em) scale(1.02); */
transform: rotateX(-15deg);
border-radius: 5px;
background-position: 100%;
}

@keyframes flip-in {
0% {
transform: rotateX(-15deg);
}
50% {
transform: rotateX(10deg);
}
70% {
transform: rotateX(-5deg);
}
100% {
transform: rotateX(0deg);
opacity: 1;
}
}

#saved-urls > div a {
max-width: 16rem;
color: #9e0bad;
Expand Down Expand Up @@ -225,14 +302,16 @@ h1 {
position: absolute;
top: 1px;
right: -2px;
z-index: 100;
z-index: 2;
}

.dropdown-content {
display: none;
position: absolute;
right: 0.9rem;
top: -1.1rem;
background-color: #e74c3c;
min-width: 80px;
min-width: 50px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border-radius: 5px;
Expand All @@ -243,7 +322,7 @@ h1 {
height: 100%;
padding: 5px;
border-radius: 5px;
font-size: 15px;
font-size: 12px;
font-family: "Roboto", sans-serif;
border-width: 0;
align-content: initial;
Expand All @@ -263,7 +342,7 @@ h1 {

.dropdown-content.show_dropdown {
display: block;
z-index: 10;
position: absolute;
transform: scale(1);
opacity: 1;
animation: anim 0.3s ease-in-out;
Expand Down
5 changes: 4 additions & 1 deletion options.html
View file
Expand Up @@ -4,12 +4,15 @@
<title>Scrroll In Options</title>
<link rel="shortcut icon" type="image/png" href="/images/icon-16.png" />
<link href="options.css" rel="stylesheet" />
<script src="./utils/sweetalert2.all.min.js"></script>
</head>

<body>
<div class="container">
<div class="side">
<h1 id="saved-scroll-heading">Fetching Saved Scrolls...</h1>
<h1 id="saved-scroll-heading">
Fetching Saved Scrolls...
</h1>
</div>
<div id="saved-urls"></div>
</div>
Expand Down
63 changes: 44 additions & 19 deletions options.js
View file
@@ -1,22 +1,23 @@
{
const list = document.getElementById("saved-urls");

chrome.storage.local.get("scroll-mark", function(result) {
chrome.storage.local.get("scroll-mark", function (result) {
const urls = result["scroll-mark"];

let delay = 0.3;
// if no saved scrolls are available
const heading = document.getElementById("saved-scroll-heading");
if (Object.entries(urls).length === 0 && urls.constructor === Object) {
heading.innerHTML =
"<h1 id='saved-scroll-heading'>You don't have any saved scrrolls yet!</h1>";
heading.parentElement.style.height = "100vh";
} else {
heading.innerHTML =
"<h1 id='saved-scroll-heading'>All Saved Scrolls</h1>";

const btn = document.createElement("div");
btn.innerHTML = `
<div id="delete-button">
<div class="btn red" id="delete-all">Delete All</div>
<div class="btn del" id="delete-all"> <img src='./images/bin.png'> </div>
</div>
`;
document.body.appendChild(btn);
Expand Down Expand Up @@ -64,19 +65,19 @@
0 +
"</div>" +
delete_html;

div.style.animationDelay = (delay += 0.1) + 's';
list.appendChild(div);
}
}

// function to open dropdown menu
const showDropdown = function(e) {
const showDropdown = function (e) {
const drop_id = this.id.substring(0, this.id.length - 1);
document.getElementById(drop_id).classList.toggle("show_dropdown");
};

// function to close dropdown menu
const closeDropdown = function(e) {
const closeDropdown = function (e) {
const dropdowns = document.getElementsByClassName("dropdown-content");
if (e.target.className !== "dropdown") {
for (let i = 0; i < dropdowns.length; i++) {
Expand All @@ -100,21 +101,45 @@

// TODO: use the delete.js script instead
// but that would require some modifications to the original delete functionality
const deleteScrollElement = function(element) {
if (confirm("Are you sure you want to remove this saved scroll?")) {
const { [this.id]: _, ...restData } = urls;
chrome.storage.local.set({ "scroll-mark": restData }, () => {
chrome.runtime.sendMessage("setInactive");
});
window.location.reload();
}
const deleteScrollElement = function (element) {
Swal.fire({
title: 'Are you sure?',
text: "Delete this Scrroll from your collection.",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
const { [this.id]: _, ...restData } = urls;
chrome.storage.local.set({ "scroll-mark": restData }, () => {
chrome.runtime.sendMessage("setInactive");
});
let x = document.querySelector(`a[href = "${this.id}"]`);
x.parentElement.parentElement.removeChild(x.parentElement);
// window.location.reload();
}
})

};

const deleteAllScrollElement = function(element) {
if (confirm("Are you sure you want to remove all saved scrolls?")) {
chrome.storage.local.set({ "scroll-mark": {} }, data => {});
window.location.reload();
}
const deleteAllScrollElement = function (element) {

Swal.fire({
title: 'Clear All?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Delete All'
}).then((result) => {
if (result.value) {
chrome.storage.local.set({ "scroll-mark": {} }, data => { });
window.location.reload();
}
})
};

for (let i = 0; i < scrollElements.length; i++) {
Expand Down
2 changes: 2 additions & 0 deletions utils/sweetalert2.all.min.js
View file

Large diffs are not rendered by default.

0 comments on commit eedab0f

Please sign in to comment.