Skip to content

Commit b9b1e08

Browse files
JumanaFMJumanaFM
authored
Merge pull request #15 from haystack/marginalia
Marginalia
2 parents 4efa4ad + 33069ba commit b9b1e08

File tree

18 files changed

+1204
-95
lines changed

18 files changed

+1204
-95
lines changed

‎package.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"main": "app.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",
8-
"start": "node app.js"
8+
"start": "node app.js",
9+
"dev": "webpack --watch --progress"
910
},
1011
"author": "",
1112
"license": "ISC",
@@ -25,7 +26,7 @@
2526
"jsdoc": "^3.6.2",
2627
"jsdoc-vuejs": "^3.0.0",
2728
"style-loader": "^0.23.1",
28-
"vue-loader": "^15.7.0",
29+
"vue-loader": "^15.9.6",
2930
"vue-style-loader": "^4.1.2",
3031
"vue-template-compiler": "^2.6.10",
3132
"webpack": "^4.43.0",
@@ -36,15 +37,19 @@
3637
"@fortawesome/free-regular-svg-icons": "^5.8.1",
3738
"@fortawesome/free-solid-svg-icons": "^5.8.1",
3839
"@fortawesome/vue-fontawesome": "^0.1.6",
40+
"@sentry/tracing": "^6.2.5",
41+
"@sentry/vue": "^6.2.5",
3942
"axios": "^0.18.0",
4043
"express": "^4.17.0",
4144
"html-to-text": "^5.1.1",
4245
"moment": "^2.24.0",
4346
"quill-mention": "^2.1.1",
4447
"v-tooltip": "^2.0.1",
4548
"vue": "^2.6.10",
49+
"vue-cli": "^2.9.6",
4650
"vue-jwt-decode": "^0.1.0",
4751
"vue-quill": "^1.5.1",
48-
"vue-spinners": "^1.0.2"
52+
"vue-spinners": "^1.0.2",
53+
"webpack-dev-server": "^3.11.2"
4954
}
5055
}

‎public/style/plugin.css‎

Lines changed: 240 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
3+
14
#nb-app {
25
position: absolute;
36
top: 0;
@@ -11,6 +14,12 @@
1114
font-style: italic;
1215
}
1316

17+
#ql-toolbar.ql-snow {
18+
border: 1px solid #ccc;
19+
box-sizing: border-box;
20+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
21+
padding: 2px;
22+
}
1423
/*
1524
Temporary workaround with plugin inheritting parent's style ...
1625
Would be nice to use Shadow DOM instead once it's supported by Quill.
@@ -102,7 +111,7 @@
102111
}
103112
#nb-app .nb-highlights .nb-highlight {
104113
fill: rgb(255, 204, 1);
105-
opacity: 0.2;
114+
fill-opacity: 0.2;
106115
}
107116

108117
#nb-app .nb-sidebar {
@@ -320,7 +329,7 @@
320329
background-color: #f0f0f0;
321330
}
322331
#nb-app .nb-sidebar .list-view .list-row .flags {
323-
min-width: 50px;
332+
/* width: 60px; */
324333
display: flex;
325334
align-items: center;
326335
justify-content: space-between;
@@ -358,6 +367,43 @@
358367
height: 16px;
359368
}
360369

370+
#nb-app .nb-sidebar .list-view .list-row .flags .icon-wrapper.inno {
371+
background-color: #4a2270;
372+
color: #fff;
373+
font-size: 14px;
374+
font-family: 'Verdana', 'Geneva', sans-serif;
375+
}
376+
#nb-app .nb-sidebar .list-view .list-row .flags .placeholder.inno {
377+
width: 16px;
378+
height: 16px;
379+
}
380+
381+
#nb-app .nb-spotlight-control {
382+
display: inline-flex;
383+
vertical-align: middle;
384+
}
385+
386+
387+
#nb-app .nb-spotlight-control span {
388+
background-color: #a67cce;
389+
color: #fff;
390+
font-size: 14px;
391+
font-family: 'Verdana', 'Geneva', sans-serif;
392+
display: flex;
393+
align-items: center;
394+
justify-content: center;
395+
width: 16px;
396+
height: 16px;
397+
border-radius: 3px;
398+
margin: 0 2px;
399+
cursor: pointer;
400+
}
401+
402+
#nb-app .nb-spotlight-control span.active {
403+
background-color: #4a2270;
404+
cursor: not-allowed;
405+
}
406+
361407
#nb-app .nb-sidebar .thread-view {
362408
min-height: 100px;
363409
margin-bottom: 10px;
@@ -387,7 +433,7 @@
387433
margin-bottom: 5px;
388434
}
389435
#nb-app .nb-sidebar .thread-view .thread-row .header .author {
390-
font-size: 15px;
436+
font-size: 12px;
391437
}
392438
#nb-app .nb-sidebar .thread-view .thread-row .header .author .instr-icon {
393439
display: inline-block;
@@ -479,7 +525,7 @@
479525
margin-top: auto;
480526
}
481527
#nb-app .editor-view .header {
482-
font-size: 14px;
528+
font-size: 10px;
483529
color: #444;
484530
padding-bottom: 5px;
485531
}
@@ -502,7 +548,7 @@
502548
width: 80px;
503549
padding: 6px;
504550
border-radius: 0px;
505-
font-size: 14px;
551+
font-size: 12px;
506552
color: #fff;
507553
cursor: pointer;
508554
}
@@ -736,11 +782,144 @@
736782
font-size: 11px;
737783
}
738784
nb-innotation {
739-
border: 2px limegreen solid;
740-
margin: 10px;
741-
padding: 10px;
785+
border-radius: 1px;
786+
border:none;
787+
margin: 2px;
742788
flex: 1;
789+
padding: 20px 10px 10px 20px;
790+
/* align-items: center; */
791+
display: flex;
792+
text-align: left;
793+
justify-content: left;
794+
background-color: #fff5a4;
795+
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
796+
box-sizing: border-box;
797+
font-size: 0.8rem;
798+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
799+
transition: 0.5s;
800+
-webkit-touch-callout: none;
801+
-webkit-user-select: none;
802+
-khtml-user-select: none;
803+
-moz-user-select: none;
804+
-ms-user-select: none;
805+
user-select: none;
806+
overflow: auto;
807+
808+
}
809+
nb-innotation:hover {
810+
box-shadow: 5px 7px 9px 0px rgb(0 0 0 / 20%), 2px 1px 2px 1px rgb(0 0 0 / 14%), 1px 1px 10px 0px rgb(0 0 0 / 12%);
811+
cursor: pointer;
812+
transition: 0.5s;
813+
background-color: #fff7b3;
814+
}
815+
816+
nb-innotation.active {
817+
box-shadow: 0px -1px 16px 5px rgb(0 0 0 / 20%), 2px 1px 2px 1px rgb(0 0 0 / 14%), 1px 1px 10px 0px rgb(0 0 0 / 12%);
818+
cursor: pointer;
819+
transition: 0.5s;
820+
background-color: #fff06e;
821+
}
822+
823+
nb-innotation-inline {
824+
background: white;
825+
margin: 0 5px;
826+
font-family: 'Handlee', cursive;
827+
color: blue;
828+
cursor: pointer;
829+
border: 3px white solid;
830+
-webkit-touch-callout: none;
831+
-webkit-user-select: none;
832+
-khtml-user-select: none;
833+
-moz-user-select: none;
834+
-ms-user-select: none;
835+
user-select: none;
836+
position: relative;
837+
z-index: 200;
838+
}
839+
840+
nb-innotation-collection {
841+
display: flex;
842+
}
843+
844+
nb-innotation-collection.nb-above,
845+
nb-innotation-collection.nb-bellow {
846+
flex-direction: row;
847+
width: 100%;
848+
}
849+
850+
nb-innotation-collection.nb-right,
851+
nb-innotation-collection.nb-left {
852+
flex-direction: column;
853+
/* height: 100%; */
854+
}
855+
856+
nb-innotation-collection.nb-above {
857+
height: 120px;
858+
position: absolute;
859+
top: 0;
860+
left: 0;
861+
}
862+
863+
nb-innotation-collection.nb-bellow {
864+
height: 120px;
865+
position: absolute;
866+
bottom: 0;
867+
left: 0;
868+
}
869+
870+
nb-innotation-collection.nb-right {
871+
width: 180px;
872+
position: absolute;
873+
top: 0;
874+
right: 0;
875+
}
876+
877+
nb-innotation-collection.nb-left {
878+
width: 180px;
879+
position: absolute;
880+
top: 0;
881+
left: 0;
882+
}
883+
884+
.nb-innotation-ancestor {
885+
position: relative;
886+
}
887+
888+
.nb-innotation-ancestor.nb-above {
889+
padding-top: 130px;
890+
}
891+
892+
.nb-innotation-ancestor.nb-bellow {
893+
padding-bottom: 130px;
894+
}
895+
896+
.nb-innotation-ancestor.nb-right {
897+
padding-right: 190px;
898+
}
899+
900+
.nb-innotation-ancestor.nb-left {
901+
padding-left: 190px;
902+
}
903+
904+
nb-innotation-controller {
905+
position: fixed;
906+
display: flex;
907+
height: 30px;
908+
width: 171px;
909+
background: #4a2270;
910+
z-index: 99999999;
911+
bottom: 0;
912+
left: 41px;
913+
color: white;
914+
border-top-left-radius: 10px;
915+
border-top-right-radius: 10px;
916+
padding: 10px;
917+
box-shadow: 0px -4px 11px 0px rgb(143 141 143 / 72%);
918+
font-size: 30px;
919+
justify-content: center;
920+
vertical-align: middle;
743921
}
922+
744923
.nb-innotation-wrapper {
745924
/* plan to make up and down part of this wrapper */
746925
}
@@ -756,4 +935,56 @@ nb-innotation {
756935
}
757936
.nb-innotation-wrapper .nb-common-ancestor {
758937
flex: 2;
759-
}
938+
}
939+
940+
#nb-app #nb-marginalias {
941+
display: flex;
942+
flex-direction: column;
943+
width: 200px;
944+
height: 100%;
945+
padding: 0 10px;
946+
top: 0;
947+
right: 395px;
948+
line-height: normal;
949+
font-size: 12px;
950+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
951+
background: #fff;
952+
z-index: 3000;
953+
overflow: hidden;
954+
position: absolute;
955+
}
956+
957+
#nb-app .nb-marginalia {
958+
/* border-radius: 1px;
959+
border:none;
960+
margin: 2px;
961+
padding: 20px 10px 10px 20px;
962+
display: flex;
963+
text-align: left;
964+
justify-content: left;
965+
background-color: #fff5a4;
966+
box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
967+
box-sizing: border-box;
968+
font-size: 0.8rem;
969+
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
970+
overflow: auto; */
971+
outline:none;
972+
position: absolute;
973+
font-family: 'Playfair Display', serif;
974+
font-size: 12px;
975+
padding: 10px;
976+
display: flex;
977+
-webkit-touch-callout: none;
978+
-webkit-user-select: none;
979+
-khtml-user-select: none;
980+
-moz-user-select: none;
981+
-ms-user-select: none;
982+
user-select: none;
983+
transition: 0.3s;
984+
cursor: pointer;
985+
width: 180px;
986+
-webkit-mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 30%, rgba(255,255,255,1) 100%);
987+
mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 30%, rgba(255,255,255,1) 100%);
988+
background-color: #ffffff;
989+
}
990+

0 commit comments

Comments
 (0)