@loftyshaky/shared-app 0.0.1

package/js/webpack.config.js

@@ -0,0 +1,156 @@
+const path = require('path');
+
+const shared_config = ({
+    app_type,
+    app_root,
+    webpack,
+    argv,
+    env,
+    TerserPlugin,
+    MiniCssExtractPlugin,
+    CssMinimizerPlugin,
+    CopyWebpackPlugin,
+    copy_patters,
+    minimize = true,
+    enable_anouncement,
+    callback_begin = () => undefined,
+    callback_done = () => undefined,
+}) => {
+    const shared_path = path.join(
+        app_root,
+        'node_modules',
+        '@loftyshaky',
+        'shared',
+        'scss',
+        'shared',
+    );
+    const paths = {
+        ts: path.join(app_root, 'src', 'ts'),
+        embed: path.join(shared_path, 'embed'),
+        themes: path.join(shared_path, 'themes', 'general'),
+    };
+
+    const external_copy_patterns = copy_patters || [];
+    const copy_patterns_final = [
+        ...external_copy_patterns,
+        ...[
+            {
+                from: path.join(app_root, 'node_modules', '@loftyshaky', 'shared', 'html'),
+                noErrorOnMissing: true,
+                globOptions: {
+                    ignore: enable_anouncement ? [] : ['**/announcement.html'],
+                },
+            },
+            {
+                from: path.join(app_root, 'src', 'html'),
+            },
+        ],
+    ];
+
+    if (app_type === 'app') {
+        copy_patterns_final.push({
+            from: path.join(app_root, 'src', 'icons'),
+        });
+
+        copy_patterns_final.push({ from: path.join(app_root, 'package.json') });
+    }
+
+    if (app_type === 'ext') {
+        copy_patterns_final.push(
+            {
+                from: path.join(app_root, 'src', 'icons', 'all'),
+            },
+            {
+                from: path.join(app_root, 'src', 'icons', env.browser),
+            },
+        );
+    }
+
+    return {
+        entry: {
+            ...(enable_anouncement && {
+                announcement: path.join(paths.ts, 'announcement', 'announcement.ts'),
+            }),
+            font_face: path.join(paths.embed, 'font_face.scss'),
+            no_tr: path.join(paths.embed, 'no_tr.scss'),
+            error: path.join(paths.embed, 'error.scss'),
+            loading_screen: path.join(paths.embed, 'loading_screen.scss'),
+            ...(enable_anouncement && {
+                announcement_css: path.join(
+                    app_root,
+                    'node_modules',
+                    '@loftyshaky',
+                    'shared',
+                    'scss',
+                    'announcement',
+                    'index.scss',
+                ),
+            }),
+            light_theme: path.join(paths.themes, 'light_theme.scss'),
+            dark_theme: path.join(paths.themes, 'dark_theme.scss'),
+            very_dark_theme: path.join(paths.themes, 'very_dark_theme.scss'),
+        },
+        output: {
+            filename: '[name].js',
+            chunkFilename: 'chunks/[name].js',
+            path: path.join(app_root, 'dist'),
+            publicPath: '',
+        },
+        resolve: {
+            alias: {
+                shared: path.join(paths.ts, 'shared'),
+                ...(app_type === 'ext' && {
+                    background: path.join(paths.ts, 'background'),
+                    settings: path.join(paths.ts, 'settings'),
+                    content_script: path.join(paths.ts, 'content_script'),
+                }),
+                ...(enable_anouncement && {
+                    announcement: path.join(paths.ts, 'announcement'),
+                }),
+            },
+            extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(ts|tsx)$/,
+                    loader: 'ts-loader',
+                },
+                {
+                    test: /\.(scss|css)$/,
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+                },
+                {
+                    test: /\.svg$/,
+                    use: ['@svgr/webpack'],
+                },
+            ],
+        },
+        plugins: [
+            new webpack.ProgressPlugin(),
+            new MiniCssExtractPlugin(),
+            new CopyWebpackPlugin({
+                patterns: copy_patterns_final,
+            }),
+            {
+                apply: (compiler) => {
+                    compiler.hooks.initialize.tap('initialize', callback_begin);
+                    compiler.hooks.done.tap('done', callback_done);
+                },
+            },
+        ],
+        target: 'web',
+        devtool: false,
+        optimization: {
+            minimize: minimize && argv.mode === 'production',
+            minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+            sideEffects: argv.mode === 'production',
+        },
+        performance: {
+            maxEntrypointSize: 52428800,
+            maxAssetSize: 52428800,
+        },
+    };
+};
+
+module.exports = { shared_config };

package/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "@loftyshaky/shared-app",
+    "description": "-",
+    "version": "0.0.1",
+    "author": "loftyshaky",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/loftyshaky/shared.git"
+    },
+    "scripts": {
+        "pub": "npm publish --access public"
+    }
+}

package/scss/announcement/body.scss

@@ -0,0 +1,10 @@
+.header {
+    margin-top: 0;
+    margin-bottom: $gap;
+    font-size: $font_big;
+}
+
+.msg_to_user div * {
+    display: inline;
+    font-size: $font_main;
+}

package/scss/announcement/index.scss

@@ -0,0 +1,3 @@
+@import '../shared/index';
+@import 'body';
+@import 'main';

package/scss/announcement/main.scss

@@ -0,0 +1,8 @@
+.main {
+    padding: $main_margin_2;
+    display: block;
+}
+
+iframe {
+    margin-top: $gap;
+}

package/scss/settings/ext_version.scss

@@ -0,0 +1,7 @@
+.ext_version {
+    position: relative;
+    bottom: -$main_margin + 4px;
+    right: -$main_margin_2 + 6px;
+    float: right;
+    font-size: 14px;
+}

package/scss/settings/index.scss

@@ -0,0 +1,6 @@
+@import '../shared/index';
+@import 'ext_version';
+@import 'main';
+@import 'section_btns';
+@import 'sections';
+@import 'transitions';

package/scss/settings/main.scss

@@ -0,0 +1,17 @@
+html,
+.body {
+    height: 100%;
+}
+
+.main {
+    padding: $main_margin_2;
+    padding-left: $main_margin_2;
+    display: block;
+}
+
+.main_2 {
+    display: flex;
+    height: calc(100vh - #{$main_margin_4 + 2});
+    max-width: 1366px - $main_margin_2 + 2px;
+    margin: auto;
+}

package/scss/settings/section_btns.scss

@@ -0,0 +1,52 @@
+.section_btns {
+    flex-shrink: 0;
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    .filler {
+        position: relative;
+        height: 100%;
+    }
+
+    .section_btn {
+        @include input_basic;
+
+        position: relative;
+        text-align: left;
+        padding: 10px;
+        padding-right: 11px;
+        cursor: pointer;
+
+        &.selected {
+            cursor: default;
+        }
+
+        &.selected::before,
+        &:not(.selected):hover::before {
+            content: '';
+            height: 33px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 3px;
+            margin: auto;
+            width: 3px;
+        }
+
+        &:not(.selected):hover::before {
+            animation: var(--animation);
+            animation-name: fade_in;
+        }
+    }
+}
+
+@keyframes fade_in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/scss/settings/sections.scss

@@ -0,0 +1,22 @@
+.sections {
+    flex-grow: 1;
+    height: 100%;
+    overflow: auto;
+}
+
+.section {
+    margin: $main_margin;
+}
+
+.subsection {
+    .name {
+        margin: 0;
+        font-weight: bold;
+        font-size: unset;
+        text-decoration: underline;
+
+        &:not(:first-child) {
+            margin-top: $main_margin;
+        }
+    }
+}

package/scss/settings/transitions.scss

@@ -0,0 +1,21 @@
+.input_item,
+.input_w,
+.help, {
+    transition: var(--transition);
+    transition-property: opacity;
+}
+
+.section_btns .section_btn::before {
+    transition: var(--transition);
+    transition-property: background-color;
+}
+
+.link,
+.link_btn {
+    transition: var(--transition);
+    transition-property: color;
+}
+
+.link:active {
+    transition: none;
+}

package/scss/shared/all.scss

@@ -0,0 +1,3 @@
+.main {
+    all: initial;
+}

package/scss/shared/btns.scss

@@ -0,0 +1,39 @@
+$icon_btn_size: 20px;
+
+.btn {
+    @include btn;
+
+    border-radius: 0;
+    position: relative;
+    vertical-align: bottom;
+
+    &.text {
+        @include btn;
+        @include border_transparent;
+        @include outline_solid;
+
+        display: block;
+        height: $input_height + ($border_width * 2);
+        padding: 0 $input_inner_padding 0 $input_inner_padding;
+        outline-offset: -1px;
+
+        &:not(:first-child) {
+            margin-top: $gap;
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+
+    &.color_ok_btn {
+        margin-left: auto;
+    }
+
+    &.icon {
+        svg {
+            width: $icon_btn_size;
+            height: $icon_btn_size;
+        }
+    }
+}

package/scss/shared/checkboxes.scss

@@ -0,0 +1,38 @@
+$box_size: 20px;
+$checkmark_size: 16px;
+
+.input_item {
+    &.checkbox {
+        input {
+            display: none;
+        }
+
+        .wrap_label {
+            @include border_transparent;
+
+            margin-right: $input_content_gap;
+        }
+
+        .box {
+            @include center_flex;
+            @include outline_solid;
+
+            height: $box_size;
+            width: $box_size;
+            cursor: pointer;
+        }
+
+        .box svg {
+            width: $checkmark_size;
+            height: $checkmark_size;
+        }
+
+        input + .box svg {
+            opacity: 0;
+        }
+
+        input:checked + .box svg {
+            opacity: 1;
+        }
+    }
+}

package/scss/shared/color_pickers.scss

@@ -0,0 +1,93 @@
+/* stylelint-disable selector-class-pattern */
+
+$pcr_picker_size: 16px;
+$btn_padding: 6px;
+
+.input_item {
+    .pcr-app,
+    .pcr-last-color,
+    .pcr-palette,
+    .pcr-current-color,
+    .pcr-slider,
+    .color_picker_w input {
+        border-radius: 0 !important;
+    }
+
+    .pcr-palette,
+    .pcr-slider {
+        @include border;
+    }
+
+    .color_picker_w {
+        position: absolute;
+        z-index: 2;
+        top: $input_height + $input_content_gap;
+        left: 0;
+        user-select: none;
+
+        input {
+            @include outline_solid;
+
+            filter: initial !important;
+
+            &:not(.pcr-result) {
+                padding: $btn_padding $btn_padding 5px $btn_padding;
+            }
+        }
+    }
+
+    .color_picker {
+        position: fixed;
+    }
+
+    .pcr-app {
+        @include box_shadow_important;
+
+        position: relative !important;
+        left: initial !important;
+        top: initial !important;
+        width: fit-content !important;
+        padding: $gap !important;
+        transition: none !important;
+    }
+
+    .pcr-picker {
+        width: $pcr_picker_size !important;
+        height: $pcr_picker_size !important;
+        border-width: 1px !important;
+    }
+
+    .pcr-color-preview {
+        @include border;
+
+        margin-bottom: $gap !important;
+    }
+
+    .pcr-swatches {
+        margin-top: 2px !important;
+    }
+
+    .pcr-interaction {
+        margin-left: -2px !important;
+        margin-right: -1px !important;
+        margin-bottom: 1px !important;
+        white-space: nowrap;
+        display: unset !important;
+    }
+
+    .pcr-result {
+        width: calc(100% - 5px);
+        display: block;
+        margin-top: 9px !important;
+        padding-top: 6px !important;
+        margin-bottom: 2px !important;
+    }
+
+    .pcr-color-chooser {
+        margin-top: $gap !important;
+    }
+
+    .pcr-type {
+        margin-right: 5px !important;
+    }
+}

package/scss/shared/colors.scss

@@ -0,0 +1,84 @@
+.input_item {
+    &.color .label {
+        align-self: normal;
+    }
+
+    .inner_w {
+        position: absolute;
+        height: $color_input_height;
+        align-self: center;
+        order: -1;
+    }
+
+    .visualization_w {
+        display: flex;
+        align-items: center;
+    }
+
+    .visualization {
+        @include border;
+
+        outline: none;
+        margin-right: $input_content_gap;
+        min-width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .palette_visualization_w {
+        display: inline-flex;
+        padding: 0;
+        margin-right: $gap;
+        margin-bottom: $gap;
+        cursor: pointer;
+
+        &:nth-child(10),
+        &:nth-child(20),
+        &:nth-child(30) {
+            margin-right: 0;
+        }
+
+        &:nth-child(n + 21) {
+            margin-bottom: 0;
+        }
+    }
+
+    .palette_visualization {
+        @include border;
+
+        outline: none;
+        width: $color_input_height;
+        height: $color_input_height;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .fill_shadow_w {
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .fill_shadow {
+        position: fixed;
+        display: block;
+        visibility: hidden;
+    }
+
+    .palette_w {
+        z-index: 2;
+        position: absolute;
+        top: $input_content_gap + $input_content_gap;
+        left: 0;
+    }
+
+    .palette {
+        @include box_shadow;
+
+        position: fixed;
+        padding: 10px;
+        width: 410px;
+        line-height: 0;
+    }
+}

package/scss/shared/crash_handler.scss

@@ -0,0 +1,36 @@
+.reload_ui_btn_w {
+    @include full_spread;
+    @include center_flex;
+
+    position: fixed;
+    visibility: hidden;
+
+    .btn {
+        @include btn;
+        @include outline_solid;
+
+        outline-color: $black;
+        visibility: visible;
+        color: $black;
+        background-color: $light_orange;
+        padding: 6px 12px;
+        width: max-content;
+        font-size: 21px;
+
+        &:hover {
+            background-color: $blue;
+            color: white;
+        }
+
+        &:active {
+            background-color: $yellow;
+            color: $black;
+        }
+
+        &:focus {
+            @include outline_solid_thick;
+
+            outline-color: #293fe2;
+        }
+    }
+}

package/scss/shared/css_vars.scss

@@ -0,0 +1,4 @@
+:root {
+    --help_btn_size: 20px;
+    --help_btn_margin: 8px;
+}