DukeInc/TimeChain
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed all the css in the controls and put them in there own file in the less directory. (https://lesscss.org/)

Browse Source 
Added sass  (css) to parcel transformers so I could modify the tagigy control style easy.
removed buttons from paste input.
Added keybinding for keyboard control.
Fixed bug with bad tags in paste list control.
Timestamp control can now show unix time by double clicking it.
Added sentry error reporter so errors can be recorded.
Added new font for minimalist style look.
This commit is contained in:
Jason Tudisco 2022-02-10 05:48:37 -06:00
parent 082736b09a
commit 80a596ea44
24 changed files with 13476 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.parcelrc
View File

@ -1,6 +1,6 @@
{ {
"extends": "@parcel/config-default", "extends": "@parcel/config-default",
"transformers": { "transformers": {
"*.riot": ["@riotjs/parcel-transformer-riot"] "*.riot": ["@riotjs/parcel-transformer-riot","@parcel/transformer-sass"]
} }
} }

9
index.html
View File

@ -4,18 +4,19 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="module" src="r.js"></script> <script type="module" src="r.js"></script>
<title>Time Chain</title> <title>Time Chain</title>
<link rel="stylesheet" href="src/css/main.css"> <link rel="stylesheet" href="src/dist/start.css">
<link rel="stylesheet" type="text/css" href="node_modules/@yaireo/tagify/dist/tagify.css"> <!-- link rel="stylesheet" type="text/css" href="node_modules/@yaireo/tagify/dist/tagify.css" -->
</head> </head>
<body> <body>
<div id="timechain"></div> <div id="timechain"></div>
<div class="loading" id="main-loading">
<!-- div class="loading" id="main-loading">
<h1>Time Chain!</h1> <h1>Time Chain!</h1>
<p>Time traveling your data! Comming soon...</p> <p>Time traveling your data! Comming soon...</p>
<p id="timestamp"></p> <p id="timestamp"></p>
<img src="src/img/chain2.svg" class="rotate"> <img src="src/img/chain2.svg" class="rotate">
</div> </div -->
<script type="module" src="src/dist/start.js"></script> <script type="module" src="src/dist/start.js"></script>
</body> </body>

2
main.js
View File

@ -12,7 +12,7 @@ function createWindow () {
icon: __dirname + '/src/img/chains.png', icon: __dirname + '/src/img/chains.png',
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false contextIsolation: false,
}, },
nodeIntegration: true nodeIntegration: true
}) })

12914
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -26,14 +26,19 @@
} }
}, },
"devDependencies": { "devDependencies": {
"@parcel/transformer-less": "^2.3.0",
"@parcel/transformer-sass": "^2.3.0",
"@riotjs/compiler": "^6.1.3", "@riotjs/compiler": "^6.1.3",
"@riotjs/parcel-transformer-riot": "^7.0.3", "@riotjs/parcel-transformer-riot": "^7.0.3",
"electron": "^16.0.7", "electron": "^16.0.7",
"electron-rebuild": "^3.2.7",
"jest": "^27.4.7", "jest": "^27.4.7",
"parcel": "^2", "less": "^4.1.2",
"electron-rebuild": "^3.2.7" "parcel": "^2"
}, },
"dependencies": { "dependencies": {
"@sentry/browser": "^6.17.6",
"@sentry/tracing": "^6.17.6",
"@yaireo/tagify": "^4.9.5", "@yaireo/tagify": "^4.9.5",
"better-sqlite3": "^7.5.0", "better-sqlite3": "^7.5.0",
"conf": "^10.1.1", "conf": "^10.1.1",
@ -41,6 +46,7 @@
"empty-lite": "^1.2.0", "empty-lite": "^1.2.0",
"es6-interface": "^3.2.1", "es6-interface": "^3.2.1",
"hash.js": "^1.1.7", "hash.js": "^1.1.7",
"keymage": "^1.1.3",
"nanoid": "^3.2.0", "nanoid": "^3.2.0",
"pubsub-js": "^1.9.4", "pubsub-js": "^1.9.4",
"riot": "^6.1.2", "riot": "^6.1.2",

55
src/css/main.css
View File

@ -1,55 +0,0 @@
body {
background-color: #333;
color: whitesmoke;
}
.loading {
text-align: center;
padding: 5em;
}
.loading img {
width: 30%;
}
.loading p {
font-weight: 700;
font-size: 1.2em;
}
.rotate {
animation: rotation 2s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.timestamp {
text-align: center;
font-size: 1.3em;
margin-top: 1em;
}
#pasteme {
border: 3px dashed #ccc;
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 2em;
color: whitesmoke;
text-align: center;
font-size: 2em;
}
.paste-html {
font-size: 1em !important;
}
.timestamp-puase {
color: yellow !important;
}

694
src/css/tagify.scss Normal file
View File

@ -0,0 +1,694 @@
@use "sass:math";
:root {
--tagify-dd-color-primary: rgb(53,149,246); // should be same as "$tags-focus-border-color"
--tagify-dd-bg-color: white;
}
.tagify{
// SCSS "default" allows overriding variables BEFORE they are set in the below lines of code
$self: &;
$tags-border-color : #CCC !default;
$tags-hover-border-color : #BBB !default;
$tags-focus-border-color : #3595f6 !default;
$tagMargin : 5px !default;
$tag-pad : .3em .5em !default;
$tag-min-width : 1ch !default;
$tag-max-width : auto !default;
$tag-text-color : black !default;
$tag-text-color--edit : black !default;
$tag-bg : #E5E5E5 !default;
$tag-hover : #D3E2E2 !default;
$tag-remove : #D39494 !default;
$tag-remove-btn-color : $tag-text-color !default;
$tag-remove-btn-bg : none !default;
$tag-remove-btn-bg--hover: darken($tag-remove, 8) !default;
$tag-invalid-color : $tag-remove !default;
$tag-invalid-bg : rgba($tag-remove, .5) !default;
$tag-inset-shadow-size : 1.1em !default;
$tag-hide-transition : .3s !default;
$placeholder-color : rgba($tag-text-color, .4) !default;
$placeholder-color-focus : rgba($tag-text-color, .25) !default;
$input-color : inherit !default;
$tagify-dd-bg-color : white !default;
$tagify-dd-color-primary : rgb(53,149,246) !default;
// CSS variables
--tags-disabled-bg : #F1F1F1;
--tags-border-color : #{$tags-border-color};
--tags-hover-border-color : #{$tags-hover-border-color};
--tags-focus-border-color : #{$tags-focus-border-color};
--tag-bg : #{$tag-bg};
--tag-hover : #{$tag-hover};
--tag-text-color : #{$tag-text-color};
--tag-text-color--edit : #{$tag-text-color--edit};
--tag-pad : #{$tag-pad};
--tag-inset-shadow-size : #{$tag-inset-shadow-size};
--tag-invalid-color : #{$tag-invalid-color};
--tag-invalid-bg : #{$tag-invalid-bg};
--tag-remove-bg : #{rgba($tag-remove, .3)};
--tag-remove-btn-color : #{$tag-remove-btn-color};
--tag-remove-btn-bg : #{$tag-remove-btn-bg};
--tag-remove-btn-bg--hover : #{$tag-remove-btn-bg--hover};
--input-color : #{$input-color};
--tag--min-width : #{$tag-min-width};
--tag--max-width : #{$tag-max-width};
--tag-hide-transition : #{$tag-hide-transition};
--placeholder-color : #{$placeholder-color};
--placeholder-color-focus : #{$placeholder-color-focus};
--loader-size : .8em;
@mixin firefox {
@at-root {
@-moz-document url-prefix() {
& { @content; }
}
}
}
@mixin placeholder( $show:true ){
transition: .2s ease-out;
@if $show == true {
opacity: 1;
transform: none;
}
@else {
opacity: 0;
transform: translatex(6px);
}
}
@mixin loader(){
content: '';
vertical-align: middle;
opacity: 1;
width: .7em;
height: .7em;
width: var(--loader-size);
height: var(--loader-size);
border: 3px solid;
border-color: #EEE #BBB #888 transparent;
border-radius: 50%;
animation: rotateLoader .4s infinite linear;
}
@mixin tagReadonlyBG($size:5px){
background: linear-gradient(45deg, var(--tag-bg) 25%,
transparent 25%,
transparent 50%,
var(--tag-bg) 50%,
var(--tag-bg) 75%,
transparent 75%,
transparent) 0/#{$size} #{$size};
box-shadow: none;
filter: brightness(.95);
}
@keyframes tags--bump{
30% { transform: scale(1.2); }
}
@keyframes rotateLoader {
to{ transform: rotate(1turn) }
}
display : flex;
align-items : flex-start;
flex-wrap : wrap;
border : 1px solid $tags-border-color;
border : 1px solid var(--tags-border-color);
padding : 0;
line-height : 0;
cursor : text;
outline : none;
position : relative;
box-sizing : border-box;
transition : .1s;
&:hover{
border-color: $tags-hover-border-color;
border-color: var(--tags-hover-border-color);
}
&.tagify--focus{
transition: 0s;
border-color: $tags-focus-border-color;
border-color: var(--tags-focus-border-color);
}
&[disabled]{
background: var(--tags-disabled-bg);
filter: saturate(0);
opacity: .5;
pointer-events: none;
}
// Global "read-only" mode (no input button)
&[readonly]{
&#{$self}--select{
pointer-events: none;
}
&:not(#{$self}--mix):not(#{$self}--select){
cursor: default;
> #{$self}__input{
visibility: hidden;
width: 0;
margin: $tagMargin 0;
}
#{$self}__tag > div{
padding: $tag-pad;
padding: var(--tag-pad);
&::before{
@include tagReadonlyBG;
}
}
}
#{ $self }__tag__removeBtn{ display:none; }
}
&--loading{
#{ $self }__input{
> br:last-child{ display:none; }
&::before{ content:none; }
&::after{
@include loader;
content: '' !important;
margin: -2px 0 -2px .5em;
}
&:empty{
&::after{
margin-left:0;
}
}
}
}
///////////////////////////////////////////
// Hides originals
+ input,
+ textarea{
position: absolute !important;
left: -9999em !important;
transform: scale(0) !important;
}
&__tag{
display : inline-flex;
align-items: center;
margin : $tagMargin 0 $tagMargin $tagMargin;
position : relative;
z-index : 1;
outline : none;
line-height: normal;
cursor : default;
transition : .13s ease-out;
> div{ // :not([contenteditable])
vertical-align : top;
box-sizing : border-box;
max-width : 100%;
padding : $tag-pad;
padding : var(--tag-pad, $tag-pad);
color : $tag-text-color;
color : var(--tag-text-color, $tag-text-color);
line-height : inherit;
border-radius : 3px;
// user-select : none; // should allow selecting text if the user wishes to copy something
white-space : nowrap;
transition : .13s ease-out;
> *{
white-space : pre-wrap;
overflow : hidden;
text-overflow : ellipsis;
display : inline-block;
vertical-align : top;
min-width : $tag-min-width;
max-width : $tag-max-width;
min-width : var(--tag--min-width, $tag-min-width);
max-width : var(--tag--max-width, $tag-max-width);
transition : .8s ease, .1s color;
&[contenteditable]{
outline: none;
user-select: text;
cursor: text;
// fix: sometimes the caret after the last character wasn't visible (when setting {backspace:"edit"})
margin: -2px;
padding: 2px;
max-width: 350px;
}
}
&::before{
content: '';
position: absolute;
border-radius: inherit;
left:0; top:0; right:0; bottom:0;
z-index: -1;
pointer-events:none;
transition: 120ms ease;
animation : tags--bump .3s ease-out 1;
box-shadow: 0 0 0 $tag-inset-shadow-size $tag-bg inset;
box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-bg, $tag-bg) inset;
}
}
&:hover:not([readonly]),
&:focus{
div{ // :not([contenteditable])
&::before{
$size: math.div(-$tagMargin, 2);
$size: -2px;
top:$size; right:$size; bottom:$size; left:$size;
box-shadow: 0 0 0 $tag-inset-shadow-size $tag-hover inset;
box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-hover, $tag-hover) inset;
// box-shadow: 0 0 0 0 $tag-remove inset
}
// background:nth($tagColor,2);
//background:none;
// box-shadow: 0 0 0 2px $tag-hover inset;
// transition:50ms;
}
}
&--loading{
pointer-events: none;
.tagify__tag__removeBtn{
display: none;
}
&::after{
--loader-size: .4em;
@include loader;
margin: 0 .5em 0 -.1em;
}
}
&--flash{
div::before{ animation:none; }
}
&--hide{
width : 0 !important;
padding-left : 0;
padding-right : 0;
margin-left : 0;
margin-right : 0;
opacity : 0;
transform : scale(0);
transition : $tag-hide-transition;
transition : var(--tag-hide-transition, $tag-hide-transition);
pointer-events : none;
> div > *{
white-space: nowrap;
}
}
&#{ $self }{
&--noAnim{
> div::before{
animation:none;
}
}
&--notAllowed:not(.tagify__tag--editable){
div{
> span{ opacity:.5; } // filter:blur(.2px);
&::before{
box-shadow: 0 0 0 $tag-inset-shadow-size $tag-invalid-bg inset !important;
box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-invalid-bg, $tag-invalid-bg) inset !important;
transition: .2s;
}
}
}
}
&[readonly]{
#{ $self }__tag__removeBtn{ display:none; }
> div{// padding: $tag-pad;
&::before{
@include tagReadonlyBG;
}
}
}
&--editable{
> div{
color : $tag-text-color--edit;
color : var(--tag-text-color--edit, $tag-text-color--edit);
&::before{
box-shadow: 0 0 0 2px $tag-hover inset !important;
box-shadow: 0 0 0 2px var(--tag-hover, $tag-hover) inset !important;
}
}
> #{$self}__tag__removeBtn{
pointer-events: none;
&::after{
opacity: 0;
transform: translateX(100%) translateX(5px);
}
}
&.tagify--invalid{
> div{
&::before{
box-shadow: 0 0 0 2px $tag-invalid-color inset !important;
box-shadow: 0 0 0 2px var(--tag-invalid-color, $tag-invalid-color) inset !important;
}
}
}
}
&__removeBtn{
$size: 14px;
order : 5;
display : inline-flex;
align-items : center;
justify-content: center;
border-radius : 50px;
cursor : pointer;
font : #{$size}/1 Arial;
background : $tag-remove-btn-bg;
background : var(--tag-remove-btn-bg, $tag-remove-btn-bg);
color : $tag-remove-btn-color;
color : var(--tag-remove-btn-color, $tag-remove-btn-color);
width : $size;
height : $size;
margin-right : math.div($size,3);
margin-left : auto;
overflow : hidden;
transition : .2s ease-out;
&::after{
content: "\00D7";
transition: .3s, color 0s;
}
&:hover{
color: white;
background: $tag-remove-btn-bg--hover;
background: var(--tag-remove-btn-bg--hover, $tag-remove-btn-bg--hover);
// + span{ box-shadow: 0 0 0 2px $tag-remove inset; transition:.2s; }
+ div{
> span{ opacity:.5; } // filter:blur(.2px);
&::before{
box-shadow: 0 0 0 $tag-inset-shadow-size rgba($tag-remove, .3) inset !important;
box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-remove-bg, rgba($tag-remove, .3)) inset !important;
transition: box-shadow .2s;
}
}
}
}
}
&:not(#{$self}--mix){
#{ $self }__input{
// https://stackoverflow.com/a/13470210/104380
br { display:none; }
* { display:inline; white-space:nowrap; }
}
}
///////////////////////////////////////////
// Holds the placeholder & the tags input
&__input{
$placeholder-width : 110px;
flex-grow: 1;
display: inline-block;
min-width: $placeholder-width;
margin: $tagMargin;
padding: $tag-pad;
padding: var(--tag-pad, $tag-pad);
line-height: normal;
position: relative;
white-space: pre-wrap; // #160 Line break (\n) as delimeter
color: $input-color;
color: var(--input-color, $input-color);
box-sizing: inherit;
&:empty{
@include firefox {
// clicking twice on the input (not fast) disallows typing (bug) only when the input has "display:flex".
// disabled the below rule for the above reason:
// display: flex; // https://bugzilla.mozilla.org/show_bug.cgi?id=904846#c45
}
}
&:focus{
outline:none;
&::before{
@include placeholder(false);
/* ALL MS BROWSERS: hide placeholder (on focus) otherwise the caret is placed after it, which is weird */
/* IE Edge 12+ CSS styles go here */
@supports ( -ms-ime-align:auto ) {
display: none;
}
}
&:empty{
&::before{
@include placeholder(true);
// Seems to be fixed! no need for the below hack
// @include firefox {
// // remove ":after" pseudo element: https://bugzilla.mozilla.org/show_bug.cgi?id=904846#c45
// content: unset;
// // display:inline-block;
// }
color: $placeholder-color-focus;
color: var(--placeholder-color-focus);
}
&::after{
@include firefox {
display: none;
}
}
}
}
&::before{
content: attr(data-placeholder);
height: 1em;
line-height: 1em;
margin: auto 0;
z-index: 1;
color: $placeholder-color;
color: var(--placeholder-color);
white-space: nowrap;
pointer-events: none;
opacity: 0;
position: absolute;
}
/* Seems firefox newer versions don't need this any more
@supports ( -moz-appearance:none ){
&::before{
line-height: inherit;
position:relative;
}
}
*/
// tries to suggest the rest of the value from the first item in the whitelist which matches it
&::after{
content: attr(data-suggest);
display: inline-block;
white-space: pre; /* allows spaces at the beginning */
color: $tag-text-color;
opacity: .3;
pointer-events:none;
max-width: 100px;
}
// &--invalid{
// // color: $invalid-input-color;
// }
/*
in "mix mode" the tags are inside the "input" element
*/
#{ $self }__tag{
margin: 0 1px;
// line-height: 1.1;
> div{
padding-top:0; padding-bottom:0;
}
}
}
&--mix {
display: block; // display:flex makes Chrome generates <div><br></div> when pressing ENTER key
#{ $self }__input{
padding: $tagMargin;
margin: 0;
width: 100%;
height: 100%;
line-height: 1.5;
display: block; // needed to resolve this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1182621
&::before{
height:auto;
display: none;
line-height: inherit;
}
// no suggested-complete are shown in mix-mode while higilighting dropdown options
&::after{ content:none; }
}
}
&--select{
&::after{
$size: 16px;
content: '>';
opacity: .5;
position: absolute;
top: 50%;
right: 0;
bottom: 0;
font: $size monospace;
line-height: math.div($size,2);
height: math.div($size,2);
pointer-events: none;
transform: translate(-150%, -50%) scaleX(1.2) rotate(90deg);
transition: .2s ease-in-out;
}
&[aria-expanded=true]{
&::after{
transform: translate(-150%, -50%) rotate(270deg) scaleY(1.2);
}
}
#{$self}__tag{
position: absolute;
top: 0;
right: 1.8em;
bottom: 0;
div{
display: none;
}
}
#{$self}__input{
width: 100%;
}
}
&--empty{
#{ $self }__input{
&::before{
@include placeholder;
display: inline-block;
width: auto;
#{ $self }--mix &{
display: inline-block;
}
}
}
}
&--invalid{
--tags-border-color : #{$tag-invalid-color};
}
// Since the dropdown is an external element, which is positioned directly on the body element
// it cannot ingerit the CSS variables applied on the ".Tagify" element
&__dropdown{
$dropdown: &;
$trans: .25s cubic-bezier(0,1,.5,1);
position: absolute;
z-index: 9999;
transform: translateY(1px);
overflow: hidden;
&[placement="top"]{
margin-top: 0;
transform: translateY(-100%);
#{$dropdown}__wrapper{
border-top-width: 1.1px; // fixes - https://bugs.chromium.org/p/chromium/issues/detail?id=1147523
border-bottom-width: 0;
}
}
// when the dropdown shows next to the caret while typing
&[position="text"]{
box-shadow: 0 0 0 3px rgba(var(--tagify-dd-color-primary), .1);
font-size: .9em;
#{$dropdown}__wrapper{
border-width: 1px;
}
}
&__wrapper{
max-height: 300px;
overflow: auto;
background: $tagify-dd-bg-color;
background: var(--tagify-dd-bg-color);
border: 1px solid $tags-focus-border-color;
border-color: var(--tagify-dd-color-primary);
border-bottom-width: 1.33px; // fixes - https://bugs.chromium.org/p/chromium/issues/detail?id=1147523
border-top-width: 0;
box-shadow: 0 2px 4px -2px rgba(black,.2);
// box-sizing: border-box;
transition: $trans;
}
// intial state, pre-rendered
&--initial{
#{$dropdown}__wrapper{
max-height: 20px;
transform: translateY(-1em);
}
&[placement="top"]{
#{$dropdown}__wrapper{
transform: translateY(2em);
}
}
}
&__item{
box-sizing: inherit;
padding: $tag-pad;
margin: 1px;
cursor: pointer;
border-radius: 2px;
position: relative;
outline: none;
&--active{
background: $tagify-dd-color-primary;
background: var(--tagify-dd-color-primary);
color: white;
}
&:active{
filter: brightness(105%);
}
}
}
}

BIN
src/font/Montserrat-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/font/Montserrat-Thin.ttf Normal file
View File

Binary file not shown.

93
src/font/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

5
src/less/colors.less Normal file
View File

@ -0,0 +1,5 @@
@default_text_color: #333;
@default_text_color_light: #ccc;
/* DONT USE THIS ONE */
@default_text_color_shade: #ccc;
@default_text_color_medium: #888;

39
src/less/controls/app-divider.less Normal file
View File

@ -0,0 +1,39 @@
@divider-color: @default_text_color_medium;
app-divider {
.divider { /* minor cosmetics */
display: table;
font-size: 24px;
text-align: center;
width: 75%; /* divider width */
margin: 40px auto; /* spacing above/below */
}
.divider span { display: table-cell; position: relative; }
.divider span:first-child, .divider span:last-child {
width: 50%;
top: 13px; /* adjust vertical align */
-moz-background-size: 100% 2px; /* line width */
background-size: 100% 2px; /* line width */
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
}
.divider span:first-child { /* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(@divider-color));
background-image: -webkit-linear-gradient(180deg, transparent, @divider-color);
background-image: -moz-linear-gradient(180deg, transparent, @divider-color);
background-image: -o-linear-gradient(180deg, transparent, @divider-color);
background-image: linear-gradient(90deg, transparent, @divider-color);
}
.divider span:nth-child(2) {
color: @divider-color; padding: 0px 5px; width: auto; white-space: nowrap;
}
.divider span:last-child { /* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@divider-color), to(transparent));
background-image: -webkit-linear-gradient(180deg, @divider-color, transparent);
background-image: -moz-linear-gradient(180deg, @divider-color, transparent);
background-image: -o-linear-gradient(180deg, @divider-color, transparent);
background-image: linear-gradient(90deg, @divider-color, transparent);
}
}

35
src/less/controls/timechain-input.less Normal file
View File

@ -0,0 +1,35 @@
timechain-input {
#pasteme {
border: 3px dashed #ccc;
border-radius: 0.5em;
padding: 0.75em;
margin: 0.5em 1em;
color: @default_text_color_shade;
text-align: center;
font-size: 1em;
}
.paste-html {
font-size: 1em !important;
background: white !important;
color: black !important;
text-align: left !important;
}
.timechain-input-tempate {
display: flex;
flex-direction: row;
padding: 0 3em;
}
.timechain-input-tempate timechain-tag {
flex-grow: 1;
}
/* Buttons were removed */
.timechain-input-tempate button {
height: 3em;
line-height: 3em;
}
}

29
src/less/controls/timechain-list.less Normal file
View File

@ -0,0 +1,29 @@
timechain-list {
.top-gradient {
height: 0.5em;
background-color: #bbb;
/*background-image: linear-gradient(#ccc, #aaa);*/
}
.timechain-list {
background-color: #aaa !important;
padding: 1.2em 3em;
.timechange-item {
border: 1px dashed whitesmoke;
padding: 0 1em 1em 1em;
margin: 1em 0;
background-color: white;
color: #333;
border-radius: 0.3em;
max-width: 100%;
max-height: 25em;
overflow: auto;
}
}
}

10
src/less/controls/timechain-tag.less Normal file
View File

@ -0,0 +1,10 @@
timechain-tag {
.tagify--focus {
border-color: cornflowerblue !important;
}
.tagify--empty .tagify__input::before {
color: whitesmoke !important;
}
}

24
src/less/controls/timestamp.less Normal file
View File

@ -0,0 +1,24 @@
timestamp {
user-select:none;
pointer: cursor;
.timestamp {
text-align: center;
font-size: 1em;
margin: 1em 0 1em 0;
.timestamp-text {
text-align: center;
}
.icon {
width: 0.80em;
margin-right: 0.25em;
}
}
.timestamp-puase {
color: #cc3333 !important;
}
}

13
src/less/fonts.less Normal file
View File

@ -0,0 +1,13 @@
@font-face {
font-family: 'Montserrat';
src: url('../font/Montserrat-Regular.ttf') format('ttf');
}
@font-face {
font-family: 'Montserrat Light';
src: url('../font/Montserrat-Thin.ttf') format('ttf');
}
@default_font: 'Montserrat';
@default_font_light: 'Montserrat Light';

23
src/less/main.less Normal file
View File

@ -0,0 +1,23 @@
/* main.less */
@import "fonts.less";
@import "colors.less";
/* Main App Colors */
body {
background-color: whitesmoke;
color: #333;
font-family: @default_font_light, Helvetica Neue, Arial, sans-serif;
}
/* Controls */
@import 'controls/timestamp.less';
@import "controls/timechain-input.less";
@import "controls/timechain-tag.less";
@import "controls/app-divider.less";
@import "controls/timechain-list.less";

43
src/ui/app-divider.riot
View File

@ -2,47 +2,4 @@
<div class="divider"><span></span><span>{props.label}</span><span></span></div> <div class="divider"><span></span><span>{props.label}</span><span></span></div>
<style>
.divider { /* minor cosmetics */
display: table;
font-size: 24px;
text-align: center;
width: 75%; /* divider width */
margin: 40px auto; /* spacing above/below */
}
.divider span { display: table-cell; position: relative; }
.divider span:first-child, .divider span:last-child {
width: 50%;
top: 13px; /* adjust vertical align */
-moz-background-size: 100% 2px; /* line width */
background-size: 100% 2px; /* line width */
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
}
.divider span:first-child { /* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
background-image: -webkit-linear-gradient(180deg, transparent, #000);
background-image: -moz-linear-gradient(180deg, transparent, #000);
background-image: -o-linear-gradient(180deg, transparent, #000);
background-image: linear-gradient(90deg, transparent, #000);
}
.divider span:nth-child(2) {
color: #000; padding: 0px 5px; width: auto; white-space: nowrap;
}
.divider span:last-child { /* color changes in here */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(180deg, #000, transparent);
background-image: -moz-linear-gradient(180deg, #000, transparent);
background-image: -o-linear-gradient(180deg, #000, transparent);
background-image: linear-gradient(90deg, #000, transparent);
}
</style>
<script>
</script>
</app-divider> </app-divider>

66
src/ui/timechain-input.riot
View File

@ -2,7 +2,7 @@
<div class="timechain-input-tempate" if={state.show_tagging}> <div class="timechain-input-tempate" if={state.show_tagging}>
<timechain-tag if={state.show_tagging} ontag="{onTags}" /> <timechain-tag if={state.show_tagging} ontag="{onTags}" />
<timechain-input-buttons if={state.show_tagging} onsave="{onSave}" oncancel={onCancel} /> <!-- timechain-input-buttons if={state.show_tagging} onsave="{onSave}" oncancel={onCancel} / -->
</div> </div>
<div id="pasteme" ondblclick="{onSwap}" > <div id="pasteme" ondblclick="{onSwap}" >
@ -13,40 +13,10 @@
{state.message} {state.message}
</textarea --> </textarea -->
<style>
textarea#pasteme {
width:100%;
color:black;
}
.paste-html {
background: white !important;
color: black !important;
text-align: left !important;
}
.timechain-input-tempate {
display: flex;
flex-direction: row;
padding: 0 3em;
}
.timechain-input-tempate timechain-tag {
flex-grow: 1;
}
.timechain-input-tempate button {
height: 3em;
line-height: 3em;
}
</style>
<script> <script>
//If tagging should be one all the time. False if show only after pasting. //If tagging should be one all the time. False if show only after pasting.
const tagging_always_on = true; const tagging_always_on = false;
const debugging = window.debugging; const debugging = window.debugging;
// Include // Include
@ -60,6 +30,7 @@
import TimechainTag from './timechain-tag.riot' import TimechainTag from './timechain-tag.riot'
import TimechainInputButtons from './timechain-input-buttons.riot'; import TimechainInputButtons from './timechain-input-buttons.riot';
import {blobToDataURL} from '../lib/blobconvert'; import {blobToDataURL} from '../lib/blobconvert';
import keymage from 'keymage';
const { const {
TimeChainDataSqliteRecord, TimeChainDataSqliteRecord,
@ -82,6 +53,8 @@
}, },
onMounted(){ onMounted(){
document.addEventListener('paste', this.pasteEvent.bind(this)); document.addEventListener('paste', this.pasteEvent.bind(this));
this.setupKeyEvents();
}, },
/** /**
* CLeans up the paste input and get it ready for a new paste * CLeans up the paste input and get it ready for a new paste
@ -97,6 +70,23 @@
this.update({show_tagging:tagging_always_on}); this.update({show_tagging:tagging_always_on});
pubsub.publish('timestamp-resume',true); pubsub.publish('timestamp-resume',true);
}, },
setupKeyEvents(){
//keymage.pushScope('input');
const kevents = [];
kevents.push( keymage('ctrl-s', this.onSave.bind(this)) );
kevents.push( keymage('enter', this.onSave.bind(this)) );
kevents.push( keymage('esc', this.onCancel.bind(this)) );
this._keyevents = kevents;
},
onUnmounted(){
this._keyevents.forEach(f=>{
f();
});
},
/** /**
* Window paste event has been fire. * Window paste event has been fire.
*/ */
@ -147,6 +137,7 @@
console.log(known_type,this.content,isFile || empty(this.content)); console.log(known_type,this.content,isFile || empty(this.content));
if(known_type && (isFile || !empty(this.content)) ){ if(known_type && (isFile || !empty(this.content)) ){
this.update({show_tagging:true}); this.update({show_tagging:true});
this.$('.tagify__input').focus();
}else{ }else{
console.log("No reason to show tagging"); console.log("No reason to show tagging");
} }
@ -203,9 +194,6 @@
this.content = data; this.content = data;
el.innerHTML = "<img src='" + data + "' style='max-width:100%'>"; el.innerHTML = "<img src='" + data + "' style='max-width:100%'>";
}); });
}, },
pauseTime(){ pauseTime(){
pubsub.publish('timestamp-puase',true); pubsub.publish('timestamp-puase',true);
@ -252,13 +240,19 @@
}, },
onSave(){ onSave(){
debugging && console.log("Save button pressed"); debugging && console.log("Save button pressed");
if(!this.content) return;
const TR = new TimeChainDataSqliteRecord(); const TR = new TimeChainDataSqliteRecord();
const ts = Math.floor(new Date().getTime()); const ts = Math.floor(new Date().getTime());
const id = nanoid(); const id = nanoid();
const hs = hash.sha256().update(this.content).digest('hex'); const hs = hash.sha256().update(this.content).digest('hex');
const tags = JSON.parse(this.content_tags); const tags = JSON.parse(this.content_tags);
console.log("tags",tags,this.content_tags);
debugging && console.log("tags:",tags); debugging && console.log("tags:",tags);
TR.add(id,ts,this.content,this.content_mime,hs).then(res=>{ TR.add(id,ts,this.content,this.content_mime,hs).then(res=>{
@ -292,7 +286,7 @@
setTimeout(()=>{ setTimeout(()=>{
pubsub.publish('timechain-list-update', true); pubsub.publish('timechain-list-update', true);
},100); },10);
}).catch(err => { }).catch(err => {
alert("Error saving data!"); alert("Error saving data!");

21
src/ui/timechain-list.riot
View File

@ -1,9 +1,9 @@
<timechain-list> <timechain-list>
<div class="top-gradient"></div>
<div class="timechain-list"> <div class="timechain-list">
<div class="timechange-item" each="{r in state.records}"> <div class="timechange-item" each="{r in state.records}" key="{r.uuid}" if="{!state.loading}">
<div class="timechain-timestamp"> <div class="timechain-timestamp">
<timestamp-static time={r.timestamp} /> <timestamp-static time={r.timestamp} />
@ -30,18 +30,7 @@
<style> <style>
.timechain-list {
padding: 0 3em;
}
.timechain-list .timechange-item {
border: 1px dashed whitesmoke;
padding: 0 1em 1em 1em;
margin: 1em 0;
background-color: whitesmoke;
color: #333;
border-radius: 0.3em;
}
</style> </style>
@ -59,7 +48,8 @@
export default { export default {
state: { state: {
records: [] records: [],
loading: false
}, },
components: { components: {
Raw, Raw,
@ -78,11 +68,12 @@
}, },
loadRecords(){ loadRecords(){
this.update({loading:true});
const TR = new TimeChainDataSqliteRecord(); const TR = new TimeChainDataSqliteRecord();
TR.find({},null,100,0).then(records=>{ TR.find({},null,100,0).then(records=>{
console.log("Records", records); console.log("Records", records);
this.update({records:records.data}); this.update({records:records.data,loading:false});
}).then(()=>{ }).then(()=>{
this.processImages(); this.processImages();
}) })

12
src/ui/timechain-tag.riot
View File

@ -3,18 +3,6 @@
<input id="tagging" placeholder="tag your paste"> <input id="tagging" placeholder="tag your paste">
</div> </div>
<style>
.tagify--focus {
border-color: yellow !important;
}
.tagify--empty .tagify__input::before {
color: whitesmoke !important;
}
</style>
<script> <script>
import Tagify from '@yaireo/tagify' import Tagify from '@yaireo/tagify'
const pubsub = require('pubsub-js'); const pubsub = require('pubsub-js');

20
src/ui/timestamp.riot
View File

@ -1,9 +1,10 @@
<timestamp> <timestamp>
<div class="timestamp"> <div class="timestamp" ondblclick="{onDoubleClick}">
<div class="timestamp-text"> <div class="timestamp-text">
<img src="src/img/clock1-white.svg" align="absmiddle" style="width:1em;margin-right:0.3em;"> <img src="src/img/clock1.svg" align="absmiddle" style="width:0.80em;margin-right:0.25em;" class="icon">
{ state.time_text } <span if="{state.pretty}">{ state.time_text }</span>
<span if="{!state.pretty}">{ state.time_stamp }</span>
</div> </div>
</div> </div>
@ -15,7 +16,8 @@
export default { export default {
state: { state: {
time_text: "Comming Soon", time_text: "Comming Soon",
format: "long" format: "long",
pretty: true
}, },
onMounted(){ onMounted(){
this.start(); this.start();
@ -42,9 +44,17 @@
}, },
makeString(){ makeString(){
if(this.state.format=="long"){ if(this.state.format=="long"){
this.update({time_text:dayjs().format("MMMM D, YYYY h:mm:ss A")}); this.update({
time_text:dayjs().format("MMMM D, YYYY h:mm:ss A"),
time_stamp:Math.floor(new Date().getTime()).toString()
});
} }
},
onDoubleClick(){
console.log("Click Click");
this.update({pretty:!this.state.pretty});
} }
}; };
</script> </script>
</timestamp> </timestamp>

24
start.js
View File

@ -1,3 +1,24 @@
import './src/less/main.less';
import './src/css/tagify.scss';
import * as Sentry from "@sentry/browser";
import { BrowserTracing } from "@sentry/tracing";
Sentry.init({
dsn: "http://a12d5c5f800b406f8d1c0c5d2ed63a78@216.128.138.128:8000/1",
// Alternatively, use `process.env.npm_package_version` for a dynamic release version
// if your build tool supports it.
release: "timechain@1.0.0",
integrations: [new BrowserTracing()],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
});
import App from './src/ui/app.riot' import App from './src/ui/app.riot'
import { component } from 'riot' import { component } from 'riot'
@ -5,8 +26,9 @@ import { component } from 'riot'
window.debugging = true; window.debugging = true;
setTimeout(()=>{ setTimeout(()=>{
document.getElementById('main-loading').remove(); document.getElementById('main-loading')?.remove();
component(App)(document.getElementById('timechain')); component(App)(document.getElementById('timechain'));
Sentry.captureMessage('Application Started');
},0) },0)