Add support page

This commit is contained in:
Martin Kleinschrodt 2021-10-14 15:58:24 +02:00
parent 4ef95a7592
commit 80ef149559
28 changed files with 24906 additions and 9527 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

After

Width:  |  Height:  |  Size: 110 KiB

View File

@ -2,7 +2,7 @@
<svg width="192px" height="192px" viewBox="0 0 192 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>app-icon</title>
<defs>
<filter x="-16.4%" y="-11.6%" width="132.8%" height="123.2%" filterUnits="objectBoundingBox" id="filter-1">
<filter x="-19.3%" y="-13.7%" width="138.6%" height="127.3%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.301764642 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
@ -11,8 +11,8 @@
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path d="M10.7368421,164 C13.9649123,164 16.5614035,162.990234 18.5263158,160.970701 C20.4912281,158.951168 21.4736842,156.409342 21.4736842,153.345223 L21.4736842,153.345223 L21.4736842,96.9375796 C26.3859649,102.787261 32.3157895,107.418259 39.2631579,110.830573 C46.2105263,114.242887 53.8245614,115.949045 62.1052632,115.949045 C72.3508772,115.949045 81.5438596,113.407219 89.6842105,108.323567 C97.8245614,103.239915 104.245614,96.3456476 108.947368,87.6407643 C113.649123,78.9358811 116,69.0819533 116,58.0789809 C116,47.0760085 113.438596,37.1872611 108.315789,28.4127389 C103.192982,19.6382166 96.2807018,12.7091295 87.5789474,7.62547771 C78.877193,2.5418259 68.9824561,0 57.8947368,0 C46.9473684,0 37.122807,2.5418259 28.4210526,7.62547771 C19.7192982,12.7091295 12.8421053,19.6382166 7.78947368,28.4127389 C2.73684211,37.1872611 0.140350877,47.0760085 0,58.0789809 L0,58.0789809 L0,153.345223 C0,156.409342 1.01754386,158.951168 3.05263158,160.970701 C5.0877193,162.990234 7.64912281,164 10.7368421,164 Z M57.8947368,97.1464968 C50.877193,97.1464968 44.5263158,95.4403397 38.8421053,92.0280255 C33.1578947,88.6157113 28.7017544,83.9498938 25.4736842,78.0305732 C22.245614,72.1112527 20.6315789,65.4607219 20.6315789,58.0789809 C20.6315789,50.5579618 22.245614,43.8377919 25.4736842,37.9184713 C28.7017544,31.9991507 33.1578947,27.3333333 38.8421053,23.9210191 C44.5263158,20.5087049 50.877193,18.8025478 57.8947368,18.8025478 C65.0526316,18.8025478 71.4385965,20.5087049 77.0526316,23.9210191 C82.6666667,27.3333333 87.122807,31.9991507 90.4210526,37.9184713 C93.7192982,43.8377919 95.3684211,50.5579618 95.3684211,58.0789809 C95.3684211,65.4607219 93.7192982,72.1112527 90.4210526,78.0305732 C87.122807,83.9498938 82.6666667,88.6157113 77.0526316,92.0280255 C71.4385965,95.4403397 65.0526316,97.1464968 57.8947368,97.1464968 Z" id="path-2"></path>
<linearGradient x1="1.56739876e-14%" y1="-3.00182584e-15%" x2="100%" y2="82.8321745%" id="linearGradient-4">
<path d="M13.345099,161 C22.1824395,161 26.6011097,157.513146 26.6011097,150.539438 L26.6011097,102.350055 C29.1926693,104.355713 34.543169,108.556895 41.5277007,110.934077 C48.4432156,113.287768 56.9857205,113.827504 61.0344828,113.827504 C71.1034483,113.827504 80.137931,111.332186 88.137931,106.341551 C96.137931,101.350916 102.448276,94.5827939 107.068966,86.0371855 C111.689655,77.4915771 114,67.8179484 114,57.0162993 C114,46.2146503 111.482759,36.5068391 106.448276,27.8928659 C101.413793,19.2788926 94.6206897,12.4765883 86.0689655,7.48595297 C77.5172414,2.49531766 67.7931034,0 56.8965517,0 C46.137931,0 36.4827586,2.49531766 27.9310345,7.48595297 C19.3793103,12.4765883 12.6206897,19.2788926 7.65517241,27.8928659 C2.68965517,36.5068391 0.137931034,46.2146503 0,57.0162993 L0,150.539438 C0,153.547492 0.0890882781,161 13.345099,161 Z M58.5690833,87.1777116 C53.0232464,87.1777116 48.0042641,85.8308153 43.5121362,83.1370228 C39.0200084,80.4432302 35.498402,76.7598813 32.9473171,72.0869758 C30.3962321,67.4140704 29.1206897,62.1639237 29.1206897,56.3365358 C29.1206897,50.3991971 30.3962321,45.0940751 32.9473171,40.4211697 C35.498402,35.7482642 39.0200084,32.0649153 43.5121362,29.3711227 C48.0042641,26.6773302 53.0232464,25.3304339 58.5690833,25.3304339 C64.2258368,25.3304339 69.2725484,26.6773302 73.7092178,29.3711227 C78.1458873,32.0649153 81.6674937,35.7482642 84.274037,40.4211697 C86.8805803,45.0940751 88.183852,50.3991971 88.183852,56.3365358 C88.183852,62.1639237 86.8805803,67.4140704 84.274037,72.0869758 C81.6674937,76.7598813 78.1458873,80.4432302 73.7092178,83.1370228 C69.2725484,85.8308153 64.2258368,87.1777116 58.5690833,87.1777116 Z" id="path-2"></path>
<linearGradient x1="26.3224223%" y1="16.6757557%" x2="74.4065658%" y2="65.393589%" id="linearGradient-4">
<stop stop-color="#F2711C" offset="0%"></stop>
<stop stop-color="#A333C8" offset="33.6009474%"></stop>
<stop stop-color="#2185D0" offset="64.4421984%"></stop>
@ -20,12 +20,12 @@
</linearGradient>
</defs>
<g id="app-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle" filter="url(#filter-1)" transform="translate(38.000000, 14.000000)">
<g id="Rectangle" filter="url(#filter-1)" transform="translate(39.000000, 16.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<path stroke="#FFFFFF" stroke-width="7" d="M57.8947368,-3.5 C69.6465467,-3.5 80.1251645,-0.782606402 89.3444723,4.60340527 C98.5730065,9.99480711 105.905263,17.3420697 111.338365,26.648076 C116.765897,35.9445409 119.5,46.4176838 119.5,58.0789809 C119.5,69.7052637 116.993176,80.1094182 112.026872,89.3040916 C107.026943,98.5610186 100.193636,105.886867 91.53814,111.292227 C82.8505733,116.717616 73.0433209,119.449045 62.1052632,119.449045 C53.2631503,119.449045 45.1368206,117.61491 37.7201503,113.97209 C33.3118332,111.806873 29.2890529,109.179952 25.6512591,106.09203 L24.9736842,105.507642 L24.9736842,153.387919 C24.8723682,157.721597 23.5079649,160.869587 21.0348805,163.411418 C18.4371772,166.081333 15.0299709,167.5 10.7368421,167.5 C6.64593675,167.5 3.27528481,166.12252 0.587270387,163.45505 C-2.01780238,160.869889 -3.40263949,157.649993 -3.4950479,153.764117 L-3.5,153.345223 L-3.5,58.047502 L-3.4854933,57.2410981 C-3.22371545,45.9212813 -0.464594133,35.7330859 4.75638984,26.6661987 C10.1193007,17.3528379 17.4195806,9.99913783 26.6555277,4.60340527 C35.8785323,-0.784766115 46.2876156,-3.5 57.8947368,-3.5 Z M57.8947368,22.3025478 C51.5436043,22.3025478 45.790302,23.8321484 40.6435344,26.9218279 C35.4982727,30.0106033 31.4680801,34.2368124 28.5464606,39.5941937 C25.5867045,45.021506 24.1315789,51.1875543 24.1315789,58.0789809 C24.1315789,64.8370743 25.5895141,70.9326905 28.5464606,76.3548509 C31.4680801,81.7122322 35.4982727,85.9384413 40.6435344,89.0272167 C45.790302,92.1168961 51.5436043,93.6464968 57.8947368,93.6464968 C64.3688355,93.6464968 70.1534147,92.1256844 75.2347319,89.0371659 C80.3310028,85.9395583 84.3702367,81.6992044 87.363639,76.3269823 C90.3802599,70.9130901 91.8684211,64.8267733 91.8684211,58.0789809 C91.8684211,51.1979834 90.3831783,45.0411921 87.363639,39.6220623 C84.3702367,34.2498402 80.3310028,30.0094862 75.2347319,26.9118786 C70.1534147,23.8233602 64.3688355,22.3025478 57.8947368,22.3025478 Z"></path>
<polygon fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(59.500000, 80.500000) rotate(360.000000) translate(-59.500000, -80.500000) " points="-62 -41 181 -41 181 202 -62 202"></polygon>
<path stroke="#FFFFFF" stroke-width="10" d="M56.8965517,-5 C68.7410507,-5 79.2986293,-2.25424161 88.589123,3.16752658 C97.8938086,8.59757692 105.287069,15.9970828 110.765061,25.3698978 C116.235682,34.7301011 119,45.2734411 119,57.0162993 C119,68.7091306 116.466527,79.169454 111.467188,88.4153449 C106.42027,97.7492282 99.5207587,105.133747 90.7843538,110.583773 C82.0032214,116.061702 72.0919033,118.827504 61.0344828,118.827504 C56.6494859,118.827504 47.4033473,118.215511 39.9167043,115.667436 C37.1140559,114.713556 34.5479097,113.496951 32.2812246,112.229755 L31.7208286,111.912025 L31.6011082,150.547675 C31.5991462,155.864475 29.697432,159.695632 26.3844694,162.309951 C23.4868315,164.596531 19.2159397,166 13.345099,166 C6.74532712,166 2.75706253,164.357742 0.216579142,162.422382 C-4.3244306,158.963004 -4.95808267,154.061842 -4.9975524,151.045601 L-4.9993398,150.847347 L-5.00000022,56.9849279 C-4.85523123,45.2625435 -2.06205862,34.7381881 3.32335605,25.3957942 C8.73236356,16.0124724 16.0955884,8.60376466 25.410877,3.16752658 C34.7066477,-2.25732113 45.196174,-5 56.8965517,-5 Z M58.5690833,30.3304339 C53.9745236,30.3304339 49.808532,31.4254677 46.0835732,33.6592123 C42.3618518,35.8910155 39.4489585,38.9465123 37.3359152,42.8170424 C35.1688664,46.7864964 34.1206897,51.2993579 34.1206897,56.3365358 C34.1206897,61.2722647 35.1728877,65.7290151 37.3359152,69.6911031 C39.4489585,73.5616332 42.3618518,76.61713 46.0835732,78.8489332 C49.808532,81.0826778 53.9745236,82.1777116 58.5690833,82.1777116 C63.2497419,82.1777116 67.4380153,81.0952149 71.1142565,78.8631281 C74.810806,76.6187108 77.7366164,73.5430002 79.9074164,69.6512779 C82.1108756,65.7010054 83.183852,61.2575458 83.183852,56.3365358 C83.183852,51.3142601 82.1150526,46.8146285 79.9074164,42.8568675 C77.7366164,38.9651453 74.810806,35.8894347 71.1142565,33.6450174 C67.4380153,31.4129306 63.2497419,30.3304339 58.5690833,30.3304339 Z"></path>
<polygon fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(58.500000, 79.500000) rotate(360.000000) translate(-58.500000, -79.500000) " points="-61 -40 178 -40 178 199 -61 199"></polygon>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

39
assets/support.md Normal file
View File

@ -0,0 +1,39 @@
<a href="#">
<button class="fill-horizontally">
<div class="horizontal spacing layout">
<i class="fa-user block"></i>
<div class="stretch">FAQs</div>
<i class="subtle block fa-external-link"></i>
</div>
</button>
</a>
<a href="#">
<button class="fill-horizontally">
<div class="horizontal spacing layout">
<i class="fa-lock lock block"></i>
<div class="stretch">Support Ticket</div>
<i class="subtle block fa-external-link"></i>
</div>
</button>
</a>
<a href="#">
<button class="fill-horizontally">
<div class="horizontal spacing layout">
<i class="fa-comments-alt block"></i>
<div class="stretch">Live Chat</div>
<i class="subtle block fa-external-link"></i>
</div>
</button>
</a>
<a href="#">
<button class="fill-horizontally">
<div class="horizontal spacing layout">
<i class="fa-tools block"></i>
<div class="stretch">Support Center</div>
<i class="subtle block fa-external-link"></i>
</div>
</button>
</a>

View File

@ -170,7 +170,7 @@ body {
/* START SCREEN */
--start-background: var(--color-background-dark);
--start-logo-height: 5em;
--start-logo-height: 4em;
--start-logo-width: auto;
--start-form-shadow: rgb(0 0 0 / 10%) 0px 0px 2em -0.5em;
--start-form-background: var(--color-background);
@ -216,6 +216,11 @@ body {
--icon-vaults: "\f5fd";
--icon-vault: "\f07b";
/* HEADERS */
--header-title-size: initial;
--header-title-weight: var(--font-weight-semibold);
}
body.theme-dark {

View File

@ -22,6 +22,7 @@ import "./org-view";
import "./settings";
import "./generator-view";
import "./invite-recipient";
import "./support";
import "./menu";
import { registerPlatformAuthenticator, supportsPlatformAuthenticator } from "@padloc/core/src/platform";
import { AuthPurpose } from "@padloc/core/src/auth";
@ -57,6 +58,7 @@ export class App extends ServiceWorker(StateMixin(AutoSync(ErrorHandling(AutoLoc
"orgs",
"invite",
"generator",
"support",
];
@state()
@ -319,6 +321,8 @@ export class App extends ServiceWorker(StateMixin(AutoSync(ErrorHandling(AutoLoc
<pl-generator-view ?hidden=${this._page !== "generator"}></pl-generator-view>
<pl-support ?hidden=${this._page !== "support"}></pl-support>
<div
class="menu-scrim"
@touchstart=${(e: MouseEvent) => this._closeMenu(e)}

View File

@ -37,7 +37,7 @@ export class Settings extends StateMixin(Routing(View)) {
<div class="fullbleed vertical layout">
<header class="padded spacing center-aligning horizontal layout">
<pl-button
class="transparent skinny"
class="transparent skinny menu-button header-title"
@click=${() =>
this.dispatchEvent(new CustomEvent("toggle-menu", { composed: true, bubbles: true }))}
>

View File

@ -524,6 +524,10 @@ export class PlIcon extends LitElement {
:host([icon="test"]) > div::before {
content: "\\f492";
}
:host([icon="support"]) > div::before {
content: "\\f82d";
}
`,
];

View File

@ -672,12 +672,12 @@ export class ItemsList extends StateMixin(LitElement) {
?hidden=${this.multiSelect || this._filterShowing}
>
<pl-button
class="transparent skinny stretch menu-button"
class="transparent skinny stretch menu-button header-title"
@click=${() =>
this.dispatchEvent(new CustomEvent("toggle-menu", { composed: true, bubbles: true }))}
>
<div
class="half-margined fill-horizontally horizontal spacing center-aligning layout text-left-aligning bold"
class="half-margined fill-horizontally horizontal spacing center-aligning layout text-left-aligning"
>
${heading.iconUrl
? html` <img .src=${heading.iconUrl} class="header-icon" cl /> `

View File

@ -1,7 +1,8 @@
import { css, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { mardownToHtml } from "../lib/markdown";
import { shared } from "../styles";
import { mixins, shared } from "../styles";
import { icons } from "../styles/icons";
@customElement("pl-markdown-content")
export class MarkdownContent extends LitElement {
@ -10,6 +11,7 @@ export class MarkdownContent extends LitElement {
static styles = [
shared,
icons,
css`
h1 {
font-size: var(--font-size-big);
@ -36,11 +38,34 @@ export class MarkdownContent extends LitElement {
margin-bottom: 0.5em;
}
button {
padding: 0.5em;
background: var(--shade-1);
border-radius: 0.5em;
ul.plain {
list-style: none;
padding: 0;
}
button {
position: relative;
box-sizing: border-box;
padding: var(--button-padding, 0.7em);
background: var(--button-background);
color: var(--button-color, currentColor);
border-width: var(--button-border-width);
border-style: var(--button-border-style);
border-color: var(--button-border-color);
border-radius: var(--button-border-radius, 0.5em);
font-weight: inherit;
text-align: inherit;
transition: transform 0.2s cubic-bezier(0.05, 0.7, 0.03, 3) 0s;
--focus-outline-color: var(--button-focus-outline-color);
box-shadow: var(--button-shadow);
}
a.plain {
text-decoration: none !important;
}
${mixins.click("button")};
${mixins.hover("button")};
`,
];

View File

@ -525,6 +525,16 @@ export class Menu extends Routing(StateMixin(LitElement)) {
<div class="small subtle section-header">${$l("More")}</div>
<div
class="menu-item"
@click=${() => this._goTo("settings")}
aria-selected=${this.selected === "settings"}
>
<pl-icon icon="settings"></pl-icon>
<div class="stretch">${$l("Settings")}</div>
</div>
<div
class="menu-item"
@click=${() => this._goTo("generator")}
@ -537,12 +547,12 @@ export class Menu extends Routing(StateMixin(LitElement)) {
<div
class="menu-item"
@click=${() => this._goTo("settings")}
aria-selected=${this.selected === "settings"}
@click=${() => this._goTo("support")}
aria-selected=${this.selected === "support"}
>
<pl-icon icon="settings"></pl-icon>
<pl-icon icon="support"></pl-icon>
<div class="stretch">${$l("Settings")}</div>
<div class="stretch">${$l("Support")}</div>
</div>
</pl-list>
</pl-scroller>

View File

@ -48,16 +48,16 @@ export class OrgNav extends Routing(LitElement) {
return html`
<pl-button
class="transparent skinny menu-button"
class="transparent skinny menu-button header-title"
@click=${() => this.dispatchEvent(new CustomEvent("toggle-menu", { composed: true, bubbles: true }))}
>
<div class="horizontally-half-margined horizontal spacing center-aligning layout text-left-aligning">
<pl-icon icon="${icon}"></pl-icon>
<div class="stretch">
<div class="highlight tiny center-aligning horizontal layout">
<div class="bold stretch ellipsis horizontally-half-margined">${this._org.name}</div>
<div class="stretch ellipsis horizontally-half-margined">${this._org.name}</div>
</div>
<div class="bold ellipsis">${label}</div>
<div class="ellipsis">${label}</div>
</div>
</div>
</pl-button>

View File

@ -65,7 +65,7 @@ export class Settings extends StateMixin(Routing(View)) {
<div class="vertical layout menu">
<header class="padded spacing center-aligning horizontal layout">
<pl-button
class="transparent skinny"
class="transparent skinny menu-button header-title"
@click=${() =>
this.dispatchEvent(new CustomEvent("toggle-menu", { composed: true, bubbles: true }))}
>

View File

@ -0,0 +1,48 @@
import { translate as $l } from "@padloc/locale/src/translate";
import { StateMixin } from "../mixins/state";
import { View } from "./view";
import { customElement } from "lit/decorators.js";
import { css, html } from "lit";
import { Routing } from "../mixins/routing";
import "./markdown-content";
import content from "assets/support.md";
@customElement("pl-support")
export class Support extends StateMixin(Routing(View)) {
readonly routePattern = /^support/;
static styles = [
...View.styles,
css`
pl-markdown-content {
display: block;
width: 100%;
max-width: 25em;
padding: 1em;
box-sizing: border-box;
}
`,
];
render() {
return html`
<div class="fullbleed vertical layout">
<header class="padded spacing center-aligning horizontal layout">
<pl-button
class="transparent skinny menu-button header-title"
@click=${() =>
this.dispatchEvent(new CustomEvent("toggle-menu", { composed: true, bubbles: true }))}
>
<div class="half-margined horizontal spacing center-aligning layout text-left-aligning">
<pl-icon icon="support"></pl-icon>
<div class="stretch ellipsis">${$l("Support")}</div>
</div>
</pl-button>
</header>
<pl-scroller class="stretch">
<pl-markdown-content .content=${content}></pl-markdown-content>
</pl-scroller>
</div>
`;
}
}

File diff suppressed because it is too large Load Diff

View File

@ -229,4 +229,9 @@ export const misc = css`
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
.header-title {
font-size: var(--header-title-size);
font-weight: var(--header-title-weight);
}
`;

View File

@ -17,3 +17,13 @@ declare module "*.json" {
const value: any;
export default value;
}
declare module "*.md" {
const value: string;
export default value;
}
declare module "*.text" {
const value: string;
export default value;
}

View File

@ -35,6 +35,7 @@
"css-loader": "^5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"raw-loader": "^4.0.2",
"sharp": "^0.29.1",
"style-loader": "^2.0.0",
"ts-loader": "^9.2.2",
@ -6041,6 +6042,26 @@
"node": ">= 0.8"
}
},
"node_modules/raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -12894,6 +12915,16 @@
}
}
},
"raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
}
},
"rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",

View File

@ -68,7 +68,8 @@
"ts-node": "^10.0.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0",
"sharp": "^0.29.1"
"sharp": "^0.29.1",
"raw-loader": "^4.0.2"
},
"scripts": {
"build": "webpack",

View File

@ -71,7 +71,7 @@ module.exports = {
{
apply(compiler) {
compiler.hooks.emit.tapPromise("Prepare App Icons", async (compilation) => {
const background = process.env.PL_ICON_BACKGROUND;
const background = process.env.PL_APP_ICON_BACKGROUND;
const iconPath = path.resolve(__dirname, assetsDir, "app-icon.png");
const { width } = await sharp(iconPath).metadata();
const iosPadding = Math.floor(width / 10);

View File

@ -20,6 +20,7 @@
"electron-notarize": "^1.1.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.4.3",
@ -4392,6 +4393,26 @@
"safe-buffer": "^5.1.0"
}
},
"node_modules/raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -9193,6 +9214,16 @@
"safe-buffer": "^5.1.0"
}
},
"raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
}
},
"rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",

View File

@ -32,7 +32,8 @@
"ts-loader": "^9.2.5",
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0",
"typescript": "^4.4.3"
"typescript": "^4.4.3",
"raw-loader": "^4.0.2"
},
"build": {
"appId": "app.padloc",

View File

@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
const { description, author, version } = require("./package.json");
const serverUrl = process.env.PL_SERVER_URL || `http://0.0.0.0:${process.env.PL_SERVER_PORT || 3000}`;
const assetsDir = process.env.PL_ASSETS_DIR || "../app/assets";
module.exports = [
{
@ -20,7 +21,10 @@ module.exports = [
devtool: "source-map",
stats: "minimal",
resolve: {
extensions: [".ts", ".js"],
extensions: [".ts", ".js", ".css", ".svg", ".png", ".jpg"],
alias: {
assets: path.resolve(__dirname, assetsDir),
},
},
module: {
rules: [

File diff suppressed because it is too large Load Diff

View File

@ -35,9 +35,10 @@
"ts-node": "^10.0.0",
"typescript": "^4.4.3",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
"webpack-cli": "^4.7.0",
"raw-loader": "^4.0.2"
},
"scripts": {
"build": "webpack"
}
}
}

View File

@ -8,8 +8,8 @@
body {
background: var(--app-backdrop-background);
color: var(--app-backdrop-color);
width: 350px;
height: 600px;
width: 360px;
height: 620px;
margin: 0;
overscroll-behavior: none;
}

View File

@ -14,6 +14,7 @@
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"http-server": "^0.12.3",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"ts-loader": "^9.2.2",
"ts-node": "^10.0.0",
@ -8833,6 +8834,26 @@
"node": ">= 0.8"
}
},
"node_modules/raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"engines": {
"node": ">= 10.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^4.0.0 || ^5.0.0"
}
},
"node_modules/rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -18944,6 +18965,16 @@
}
}
},
"raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
}
},
"rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",

View File

@ -33,7 +33,8 @@
"webpack-dev-server": "^4.2.1",
"webpack-pwa-manifest": "^4.3.0",
"workbox-cli": "^6.2.4",
"workbox-webpack-plugin": "^6.1.5"
"workbox-webpack-plugin": "^6.1.5",
"raw-loader": "^4.0.2"
},
"description": "Padloc Progressive Web App",
"scripts": {

View File

@ -11,6 +11,8 @@ const out = process.env.PL_PWA_DIR || path.resolve(__dirname, "dist");
const serverUrl = process.env.PL_SERVER_URL || `http://0.0.0.0:${process.env.PL_SERVER_PORT || 3000}`;
const assetsDir = process.env.PL_ASSETS_DIR || "../../assets";
const { name } = require(path.join(assetsDir, "manifest.json"));
module.exports = {
entry: path.resolve(__dirname, "src/index.ts"),
output: {
@ -42,10 +44,15 @@ module.exports = {
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: ["file-loader"],
},
{
test: /\.txt|md$/i,
use: "raw-loader",
},
],
},
plugins: [
new EnvironmentPlugin({
PL_APP_NAME: name,
PL_SERVER_URL: serverUrl,
PL_BILLING_ENABLED: null,
PL_BILLING_DISABLE_PAYMENT: null,
@ -57,7 +64,7 @@ module.exports = {
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Padloc",
title: name,
template: path.resolve(__dirname, "src/index.html"),
meta: {
"Content-Security-Policy": {
@ -68,10 +75,8 @@ module.exports = {
}),
// new FaviconsWebpackPlugin(path.resolve(__dirname, "assets/icon-512.png")),
new WebpackPwaManifest({
name: "Padloc Password Manager",
short_name: "Padloc",
background_color: "#59c6ff",
theme: "#59c6ff",
name: name,
short_name: name,
icons: [
{
src: path.resolve(__dirname, assetsDir, "app-icon.png"),