Skip to content

Commit

Permalink
Merge pull request #13 from fgkolf/v1.2.3
Browse files Browse the repository at this point in the history 
V1.2.3
  • Loading branch information
@fgkolf
fgkolf authored Nov 2, 2022
2 parents 828799a + 81d9c16 commit bdfb338
Show file tree
Hide file tree
Showing 19 changed files with 229 additions and 89 deletions.
Binary file removed images/checkbox.png
View file
Binary file not shown.
Binary file removed images/checkedbox.png
View file
Binary file not shown.
Binary file removed images/checkwhite.png
View file
Binary file not shown.
Binary file removed images/close.png
View file
Binary file not shown.
13 changes: 13 additions & 0 deletions images/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/closeorange.png
View file
Binary file not shown.
Binary file removed images/file.png
View file
Binary file not shown.
14 changes: 14 additions & 0 deletions images/file.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed images/menuclose.png
View file
Binary file not shown.
Binary file removed images/menufile.png
View file
Binary file not shown.
Binary file removed images/menustar.png
View file
Binary file not shown.
Binary file removed images/star-full.png
View file
Binary file not shown.
Binary file removed images/star.png
View file
Binary file not shown.
17 changes: 17 additions & 0 deletions images/star.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Tabzie",
"version": "1.2.2",
"version": "1.2.3",
"description": "A minimal tab organizer",
"homepage_url": "https://github.com/fgkolf/tabzie",
"icons": {
Expand Down
9 changes: 7 additions & 2 deletions popup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400" rel="stylesheet">
<body>
<div class="menu" id="menu">
<span class="checkbox" id="menuCheckbox"></span>
<label class="checkbox-wrap" for="menuCheckbox">
<input type="checkbox" id="menuCheckbox" name="menuCheckbox">
</label>
<button class="btn menustar visible" id="menuStar"></button>
<button class="btn menufile visible" id="menuFile"></button>
<button class="btn menux visible" id="menuX"></button>
</div>
<div id="container" class="grid-container"></div>
<div id="container" class="grid-container hidden"></div>
<div id="loading" class="loading">
<span class="loader"></span>
</div>
<div class="curtain" id="curtain">
<input
id="search"
Expand Down
140 changes: 117 additions & 23 deletions popup/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ body {
-moz-user-select: none;
background-color: #404040;
font-family: 'Ubuntu', sans-serif;
position: relative;
}

/* disables outline on buttons when clicked */
Expand All @@ -18,17 +19,21 @@ body {

.grid-container {
display: grid;
grid-gap: 8px;
grid-gap: 12px;
grid-template-columns: auto auto;
}

.grid-list {
display: grid;
grid-gap: 8px;
grid-gap: 12px;
grid-auto-columns: 320px;
grid-auto-rows: 180px;
}

.hidden {
display: none;
}

.grid-item {
position: relative;
}
Expand All @@ -39,11 +44,6 @@ body {
border-radius: 1%;
}

.grid-item.empty {
color: var(--color-orange);
padding: 16px;
}

.grid-item h2 {
display: none;
position: absolute;
Expand Down Expand Up @@ -85,27 +85,39 @@ body {
}

.star {
background: url("../images/star.png") no-repeat center;
background-color: black;
-webkit-mask-image: url("../images/star.svg");
mask-image: url("../images/star.svg");
}

.star.full {
background-color: royalblue;
}

.file {
background: url("../images/file.png") no-repeat center;
background: url("../images/file.svg") no-repeat center;
}

.x {
background: url("../images/close.png") no-repeat center;
background: url("../images/close.svg") no-repeat center;
}

.menustar {
background: url("../images/menustar.png") no-repeat center;
background-color: var(--color-orange);
-webkit-mask-image: url("../images/star.svg");
mask-image: url("../images/star.svg");
}

.menufile {
background: url("../images/menufile.png") no-repeat center;
background-color: var(--color-orange);
-webkit-mask-image: url("../images/file.svg");
mask-image: url("../images/file.svg");
}

.menux {
background: url("../images/menuclose.png") no-repeat center;
background-color: var(--color-orange);
-webkit-mask-image: url("../images/close.svg");
mask-image: url("../images/close.svg");
}

.plus {
Expand All @@ -117,7 +129,9 @@ body {
position: absolute;
top:1%;
right: 1%;
background: url("../images/closeorange.png") no-repeat center;
background-color: var(--color-orange);
-webkit-mask-image: url("../images/close.svg");
mask-image: url("../images/close.svg");
}

.curtain {
Expand Down Expand Up @@ -200,30 +214,110 @@ body {
}

.menu {
margin: 5px;
display: none;
position: sticky;
top:0;
left:0;
background-color: #404040;
display: grid;
visibility: hidden;
height: 0;
grid-template-columns: auto auto auto;
grid-template-rows: 48px;
grid-column-gap: 5%;
align-content: center;
justify-content: center;
transition: .3s height ease;
z-index: 999;
overflow: hidden;
}

.menu .btn {
transform: translateY(-100px);
}

.menu.open {
padding: 5px;
visibility: visible;
height: 60px;
}

.menu.open .btn {
transform: translateY(0);
}

.visible {
display: block;
}

.checkbox {
background: url("../images/checkbox.png") no-repeat center;
display: none;
.checkbox-wrap {
position: absolute;
width: 25px;
height: 25px;
top:1%;
left: 1%;
display: grid;
grid-template-columns: 1em auto;
}

input[type="checkbox"] {
display: none;
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 1px solid currentColor;
transform: translateY(-0.075em);
place-content: center;
cursor: pointer;
}

.checked {
background: url("../images/checkedbox.png") no-repeat center;
.menu input[type="checkbox"] {
margin-top: 2px;
display: grid;
}

input[type="checkbox"]::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--color-orange);
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
transform: scale(1);
}

.loading {
display: flex;
width: 320px;
height: 180px;
align-items: center;
justify-content: center;
color: var(--color-orange);
font-size: large;
}

.loader {
width: 42px;
height: 42px;
border: 4px solid;
border-color: var(--color-orange) transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Loading

0 comments on commit bdfb338

Please sign in to comment.