Quellcode durchsuchen

Initial commit

dev
BuildTools vor 2 Jahren
Commit
c1d41af4fd
20 geänderte Dateien mit 491 neuen und 0 gelöschten Zeilen
  1. +21
    -0
      LICENSE
  2. +10
    -0
      README.md
  3. +7
    -0
      css/color-dark.css
  4. +14
    -0
      css/color.css
  5. +8
    -0
      css/home.css
  6. +17
    -0
      css/options.css
  7. +14
    -0
      css/style.css
  8. BIN
      fonts/icomoon.eot
  9. +14
    -0
      fonts/icomoon.svg
  10. BIN
      fonts/icomoon.ttf
  11. BIN
      fonts/icomoon.woff
  12. +22
    -0
      home.html
  13. +3
    -0
      icon.svg
  14. +48
    -0
      js/darkMode.js
  15. +47
    -0
      js/home.js
  16. +27
    -0
      js/load.js
  17. +90
    -0
      js/options.js
  18. +21
    -0
      manifest.json
  19. +116
    -0
      options.html
  20. +12
    -0
      temp.json

+ 21
- 0
LICENSE Datei anzeigen

@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2017 Kyle Mitchell

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

+ 10
- 0
README.md Datei anzeigen

@@ -0,0 +1,10 @@
placid-tab
==========

A minimal New Tab page for Firefox. **Still in development**

**Now with both dark _and_ light themes!**

![Dark theme | main screen](images/dark-main.png)
![Light theme | main screen](images/light-main.png)
![Dark theme | options screen](images/dark-options.png)

+ 7
- 0
css/color-dark.css Datei anzeigen

@@ -0,0 +1,7 @@
body{color:#bebebe;background-color:#0c0c0d}
button{color:#bebebe;background-color:#323234}
button:hover{color:#303030;background-color:#cfcfcf}
input[type="text"]{color:#bebebe;background-color:#323234}
input[type="text"]:hover{background-color:#474749}
polygon{fill:#323234}
polygon:hover{fill:#474749}

+ 14
- 0
css/color.css Datei anzeigen

@@ -0,0 +1,14 @@
body{color:#9f9f9f}
button{color:#303030;background-color:#cfcfcf}
button:hover{color:#bebebe;background-color:#323234}
input[type="text"]{color:#404040;background-color:#cfcfcf}
input[type="text"]:hover{background-color:#a6a6a6}
polygon{fill:#cfcfcf}
polygon:hover{fill:#a6a6a6}
body.dark{color:#bebebe;background-color:#0c0c0d}
body.dark button{color:#bebebe;background-color:#323234}
body.dark button:hover{color:#303030;background-color:#cfcfcf}
body.dark input[type="text"]{color:#bebebe;background-color:#323234}
body.dark input[type="text"]:hover{background-color:#474749}
body.dark polygon{fill:#323234}
body.dark polygon:hover{fill:#474749}

+ 8
- 0
css/home.css Datei anzeigen

@@ -0,0 +1,8 @@
.quadrant:nth-child(1):hover ~ svg polygon{fill:#cfcfcf}
.quadrant:nth-child(2):hover ~ svg polygon{fill:#cfcfcf}
.quadrant:nth-child(3):hover ~ svg polygon{fill:#cfcfcf}
.quadrant:nth-child(4):hover ~ svg polygon{fill:#cfcfcf}
body.dark .quadrant:nth-child(1):hover ~ svg polygon{fill:#323234}
body.dark .quadrant:nth-child(2):hover ~ svg polygon{fill:#323234}
body.dark .quadrant:nth-child(3):hover ~ svg polygon{fill:#323234}
body.dark .quadrant:nth-child(4):hover ~ svg polygon{fill:#323234}

+ 17
- 0
css/options.css Datei anzeigen

@@ -0,0 +1,17 @@
.group{position:absolute;width:100%}
.pad{padding:60px}
.row{padding:10px}
.label{display:inline-block;width:30px}
.field{display:inline}
.label span{display:table-cell;vertical-align:middle}
#mode{position:absolute;top:calc(50%+75px);left:0;right:0;margin:auto;z-index:9}
#quad1 .group{text-align:right;bottom:0}
#quad2 .group{bottom:0}
#quad3 .group{text-align:right}
button{top:calc(50% + 75px);height:60px;width:60px;border-radius:30px;outline:0;font-size:16px}
button:hover{cursor:pointer}
input[type="text"]{display:inline-block;height:48px;width:400px;padding:0;border:0;line-height:48px;text-align:center;font-size:18px}
.colorwrapper{height:70px;width:70px;display:inline-block;vertical-align:middle;overflow:hidden}
input[type="color"]{height:100px;width:100px;position:relative;top:-15px;left:-15px}
input[type="color"]:hover{cursor:pointer}
input:focus{outline:0}

+ 14
- 0
css/style.css Datei anzeigen

@@ -0,0 +1,14 @@
*{padding:0;margin:0;border:0;-webkit-transition:300ms;transition:300ms}
body,html,.content{width:100%;height:100%;-webkit-transition:none;transition:none}
.content{position:relative}
a,svg,rect{position:absolute}
svg{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;z-index:10}
polygon{transition:fill .2s}
@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?evxobq');src:url('../fonts/icomoon.eot?evxobq#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?evxobq') format('truetype'),url('../fonts/icomoon.woff?evxobq') format('woff'),url('../fonts/icomoon.svg?evxobq#icomoon') format('svg');font-weight:normal;font-style:normal}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased}
.icon-sun:before{content:"\e900"}
.icon-moon:before{content:"\e901"}
.icon-paint-format:before{content:"\e902"}
.icon-link:before{content:"\e904"}
.icon-sun,.icon-moon{font-size:36px}
.quadrant{position:relative;width:50%;height:50%;float:left}

BIN
fonts/icomoon.eot Datei anzeigen


+ 14
- 0
fonts/icomoon.svg Datei anzeigen

@@ -0,0 +1,14 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="sun" d="M512 672c-123.5 0-224-100.5-224-224s100.5-224 224-224 224 100.5 224 224c0 123.5-100.5 224-224 224zM512 288c-88.376 0-160 71.624-160 160s71.624 160 160 160 160-71.624 160-160-71.624-160-160-160zM512 736c17.666 0 32 14.334 32 32v64c0 17.666-14.334 32-32 32s-32-14.334-32-32v-64c0-17.666 14.334-32 32-32zM512 160c-17.666 0-32-14.334-32-32v-64c0-17.666 14.334-32 32-32s32 14.334 32 32v64c0 17.666-14.334 32-32 32zM760.876 651.666l45.25 45.25c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-45.25-45.25c-12.5-12.5-12.5-32.75 0-45.25 12.498-12.5 32.75-12.5 45.25 0zM263.124 244.332l-45.25-45.25c-12.5-12.498-12.5-32.748 0-45.248s32.75-12.5 45.25 0l45.25 45.248c12.5 12.542 12.5 32.752 0 45.25-12.498 12.502-32.75 12.544-45.25 0zM224 448c0 17.666-14.334 32-32 32h-64c-17.666 0-32-14.334-32-32s14.334-32 32-32h64c17.666 0 32 14.334 32 32zM896 480h-64c-17.666 0-32-14.334-32-32s14.334-32 32-32h64c17.666 0 32 14.334 32 32s-14.334 32-32 32zM263.082 651.666c12.502-12.5 32.752-12.5 45.25 0 12.502 12.5 12.502 32.75 0 45.25l-45.25 45.25c-12.5 12.5-32.748 12.5-45.25 0-12.5-12.5-12.5-32.75 0-45.25l45.25-45.25zM760.918 244.376c-12.542 12.5-32.752 12.5-45.25 0-12.502-12.5-12.542-32.75 0-45.25l45.25-45.25c12.498-12.5 32.748-12.5 45.248 0s12.5 32.748 0 45.25l-45.248 45.25z" />
<glyph unicode="&#xe901;" glyph-name="moon" d="M699.704 273.7c-99.752-99.832-262.166-99.832-362 0-99.832 99.834-99.832 262.25 0 362.042 26.418 26.374 58.624 46.5 95.664 59.624 11.668 4.084 24.586 1.124 33.25-7.584 8.752-8.75 11.71-21.666 7.586-33.25-25.084-70.75-8-147.332 44.498-199.834 52.418-52.456 129.002-69.5 199.834-44.5 11.584 4.124 24.542 1.166 33.25-7.584 8.752-8.666 11.668-21.624 7.542-33.25-13.042-37.040-33.208-69.246-59.624-95.664zM382.954 590.492c-74.876-74.876-74.876-196.708 0-271.542 80-80.042 216.25-72.834 286 16.334-71.918-4.5-142.75 21.458-195.5 74.168-52.75 52.708-78.666 123.542-74.168 195.458-5.748-4.502-11.208-9.294-16.332-14.418z" />
<glyph unicode="&#xe902;" glyph-name="paint-format" d="M1024 384v384h-192v64c0 35.2-28.8 64-64 64h-704c-35.2 0-64-28.8-64-64v-192c0-35.2 28.8-64 64-64h704c35.2 0 64 28.8 64 64v64h128v-256h-576v-128h-32c-17.674 0-32-14.326-32-32v-320c0-17.674 14.326-32 32-32h128c17.674 0 32 14.326 32 32v320c0 17.674-14.326 32-32 32h-32v64h576zM768 768h-704v64h704v-64z" />
<glyph unicode="&#xe904;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
</font></defs></svg>

BIN
fonts/icomoon.ttf Datei anzeigen


BIN
fonts/icomoon.woff Datei anzeigen


+ 22
- 0
home.html Datei anzeigen

@@ -0,0 +1,22 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Tab</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/color.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div class="content">
<a class="quadrant" href="options.html"></a>
<a class="quadrant" href="options.html"></a>
<a class="quadrant" href="options.html"></a>
<a class="quadrant" href="options.html"></a>
<svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
<a href="options.html"><polygon points="5,10 10,5 5,0 0,5" /></a>
</svg>
</div>
<script src="js/home.js"></script>
</body>
</html>

+ 3
- 0
icon.svg Datei anzeigen

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" viewBox="0 0 10 10" xml:space="preserve">
<a href="options.html"><polygon points="5,10 10,5 5,0 0,5" fill="#000000"/></a>
</svg>

+ 48
- 0
js/darkMode.js Datei anzeigen

@@ -0,0 +1,48 @@
// Returns the color at an index, based on the current theme
function color_at (i) {
return COLORS[isDark ? 'dark' : 'light'][i];
}

// Sets the page's color to match the current theme
function render () {
var savedColors = JSON.parse(localStorage.colors || '[]');
body.className = (isDark ? 'dark' : 'light') + '-mode';

if (isOptionsPage) {
toggle.className = 'icon-' + (isDark ? 'sun' : 'moon');
colorInputs.forEach(function (input, i) {
input.value = savedColors[i] || color_at(i);
});
}
}

// Toggles the theme between 'light-mode' and 'dark-mode'
function toggle_theme () {
localStorage.darkMode = isDark = !isDark;
render();
}

// Color sets for each theme
var COLORS = {
dark: ['#3f3027', '#30273f', '#27303f', '#3f2730'],
light: ['#efe0d7', '#e0d7ef', '#d7e0ef', '#efd7e0'],
};

// Pull the saved theme preference from localStorage
var isDark = JSON.parse(localStorage.darkMode || false);

// DOM
var body = document.body;
var colorInputs = [].slice.call(document.querySelectorAll('.colorwrapper input'));

var isOptionsPage = colorInputs.length;

if (isOptionsPage)
var toggle = document.getElementById('dark-mode').querySelector('span');

// Set the page's color
render();

// Exports
placid.color_at = color_at;
placid.toggle_theme = toggle_theme;

+ 47
- 0
js/home.js Datei anzeigen

@@ -0,0 +1,47 @@
function restore_options() {
browser.storage.sync.get("links", function(result){
var quads = document.querySelectorAll('a')
for (i = 0; i < quads.length; i++) {
if (result.links[i]) {
var link = result.links[i]
if (link.substring(0, 4) === 'http' ? link = 'options.html' : link = 'http://' + link)
quads[i].href = link
}
}
})
browser.storage.sync.get("colors", function(result){
var quads = document.querySelectorAll('a')
var style = document.createElement('style');
for (i = 0; i < quads.length; i++) {
if (result.colors[i]) {
style.appendChild(
document.createTextNode('.content a:nth-child(' + (i + 1) + '):hover ~ svg polygon { fill: ' + result.colors[i] + '}')
)
}
}
document.head.appendChild(style);
for (i = 0; i < input_colors.length; i++) {
if (result.links[i]) {
input_colors[i].value = result.colors[i]
}
}
})
browser.storage.sync.get("mode", function(result){
if (result.mode) {
switch(result.mode) {
case "light":
document.body.classList.remove('dark')
break
case "dark":
document.body.classList.add('dark')
break
default:
break
}
} else {
mode = "light"
browser.storage.sync.set({mode:"light"})
}
})
}
document.addEventListener('DOMContentLoaded', restore_options)

+ 27
- 0
js/load.js Datei anzeigen

@@ -0,0 +1,27 @@
function loadjscssfile(filename, filetype){
if (filetype=="js"){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
browser.storage.sync.get("mode", function(result){
switch(result.mode) {
case "light":
loadjscssfile("css/color.css", "css")
break
case "dark":
loadjscssfile("css/color-dark.css", "css")
break
default:
break
}
})

+ 90
- 0
js/options.js Datei anzeigen

@@ -0,0 +1,90 @@
function debounce(fn, delay) {
var timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(fn, delay || 500);
};
}
function save_options() {
var links = [], colors = []
var input_links = document.querySelectorAll('input[type="text"]')
var input_colors = document.querySelectorAll('input[type="color"]')
for (i = 0; i < input_links.length; i++) {
links.push(input_links[i].value)
colors.push(input_colors[i].value)
}
browser.storage.sync.set({links:links, colors:colors})
console.log("Settings Saved ")
}
function restore_options() {
var mode
browser.storage.sync.get("mode", function(result){
if (result.mode) {
switch(result.mode) {
case "light":
document.body.classList.remove('dark')
break
case "dark":
document.body.classList.add('dark')
break
default:
break
}
} else {
mode = "light"
browser.storage.sync.set({mode:"light"})
}
})
browser.storage.sync.get("links", function(result){
var input_links = document.querySelectorAll('input[type="text"]')
for (i = 0; i < input_links.length; i++) {
input_links[i].value = result.links[i]
}
})
browser.storage.sync.get("colors", function(result){
var input_colors = document.querySelectorAll('input[type="color"]')
for (i = 0; i < input_colors.length; i++) {
if (result.colors[i]) {
input_colors[i].value = result.colors[i]
}
}
})
}
function change_mode() {
browser.storage.sync.get("mode", function(result){
var input_colors = document.querySelectorAll('input[type="color"]')
switch(result.mode) {
case "light":
document.body.classList.add('dark')
mode = "dark"
browser.storage.sync.set({mode:"dark"})
for (i = 0; i < input_colors.length; i++) {
if (input_colors[i].value == "#cfcfcf") {
input_colors[i].value = "#323234"
}
}
break
case "dark":
document.body.classList.remove('dark')
mode = "light"
browser.storage.sync.set({mode:"light"})
for (i = 0; i < input_colors.length; i++) {
if (input_colors[i].value == "#323234") {
input_colors[i].value = "#cfcfcf"
}
}
break
default:
break
}
})
}
function load() {
var inputs = document.getElementsByTagName('input')
for (i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('input', debounce(save_options))
}
document.getElementById("mode").addEventListener("click", change_mode)
restore_options()
}
document.addEventListener('DOMContentLoaded', load)

+ 21
- 0
manifest.json Datei anzeigen

@@ -0,0 +1,21 @@
{
"name": "Placid Tab 2",
"short_name": "Placid Tab 2",
"version": "1.0.0",
"manifest_version": 2,
"description": "A minimal New Tab page",
"author": "Kyle Mitchell",
"applications": {
"gecko": {
"id": "placidtab2@kylemitchell.me",
"strict_min_version": "57.0"
}
},
"chrome_url_overrides" : {
"newtab": "home.html"
},
"icons": { "16": "icon.svg",
"48": "icon.svg",
"128": "icon.svg" },
"permissions": ["storage"]
}

+ 116
- 0
options.html Datei anzeigen

@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Options</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/color.css">
<link rel="stylesheet" href="css/options.css">
</head>

<body>
<div class="content">
<div class="quadrant" id="quad1">
<div class="group">
<div class="pad">
<div class="row">
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="label">
<label for="color1"><span class="icon-paint-format"></span></label>
</div>
</div>
<div class="row">
<div class="field">
<input type="text" spellcheck="false" />
</div>
<div class="label">
<label><span class="icon-link"></span></label>
</div>
</div>
</div>
</div>
</div>
<div class="quadrant" id="quad2">
<div class="group">
<div class="pad">
<div class="row">
<div class="label">
<label for="color1"><span class="icon-paint-format"></span></label>
</div>
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
</div>
<div class="row">
<div class="label">
<label><span class="icon-link"></span></label>
</div>
<div class="field">
<input type="text" spellcheck="false" />
</div>
</div>
</div>
</div>
</div>
<div class="quadrant" id="quad3">
<div class="group">
<div class="pad">
<div class="row">
<div class="field">
<input type="text" spellcheck="false" />
</div>
<div class="label">
<label><span class="icon-link"></span></label>
</div>
</div>
<div class="row">
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
<div class="label">
<label for="color1"><span class="icon-paint-format"></span></label>
</div>
</div>
</div>
</div>
</div>
<div class="quadrant" id="quad4">
<div class="group">
<div class="pad">
<div class="row">
<div class="label">
<label><span class="icon-link"></span></label>
</div>
<div class="field">
<input type="text" spellcheck="false" />
</div>
</div>
<div class="row">
<div class="label">
<label for="color1"><span class="icon-paint-format"></span></label>
</div>
<div class="field">
<div class="colorwrapper">
<input type="color" value="#cfcfcf" />
</div>
</div>
</div>
</div>
</div>
</div>
<svg id="logo" height="75px" width="75px" viewBox="0 0 10 10">
<a href="home.html"><polygon points="5,10 10,5 5,0 0,5" /></a>
</svg>
<button id="mode"><span class="icon-moon"></span></button>
</div>
<script src="js/options.js"></script>
</body>
</html>

+ 12
- 0
temp.json Datei anzeigen

@@ -0,0 +1,12 @@
{
"quad": [
{"address": "site", "color": "blue"},
{"address": "site", "color": "green"},
{"address": "site", "color": "yellow"},
{"address": "site", "color": "purple"}
],
"options": {
"nightmode": "false"
}
}

Laden…
Abbrechen
Speichern