FIX: conflicting class declaration with core (#4)

* DEV: Remove `fade-in` and use `jsuites.basic.css` instead

* FIX: Linting issues with jspreadsheet-theme

* WIP: Add bash script to handle vendor assets

* FIX: Ember Linting fixes

* DEV: Cleanup comments and commented code
This commit is contained in:
Keegan George 2022-07-28 07:33:25 -07:00 committed by GitHub
parent 12e09ebad6
commit 52710496ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 36054 additions and 33561 deletions

View File

@ -1,6 +1,6 @@
{ {
"extends": "eslint-config-discourse", "extends": "eslint-config-discourse",
"ignorePatterns": ["javascripts/vendor/*"], "ignorePatterns": ["javascripts/vendor/*", "assets/vendor/*"],
"globals": { "globals": {
"settings": "readonly", "settings": "readonly",
"themePrefix": "readonly" "themePrefix": "readonly"

View File

@ -9,8 +9,8 @@
"minimum_discourse_version": null, "minimum_discourse_version": null,
"maximum_discourse_version": null, "maximum_discourse_version": null,
"assets": { "assets": {
"jsuites": "assets/jsuites.js", "jsuites": "assets/vendor/jsuites.js",
"jspreadsheet": "assets/jspreadsheet.js" "jspreadsheet": "assets/vendor/jspreadsheet.js"
}, },
"modifiers": { "modifiers": {
"svg_icons": [ "svg_icons": [

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

14970
assets/vendor/jspreadsheet.js vendored Normal file

File diff suppressed because it is too large Load Diff

12268
assets/vendor/jsuites.js vendored Normal file

File diff suppressed because it is too large Load Diff

88
build.bash Normal file
View File

@ -0,0 +1,88 @@
#!/bin/bash
# Global Variables:
SCSS_VENDOR=scss/vendor/
JS_VENDOR=assets/vendor/
JSUITES_JS_URL="https://jsuites.net/v4/jsuites.js"
JSPREADSHEET_JS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.js"
JSUITES_CSS_URL="https://raw.githubusercontent.com/jsuites/jsuites/master/dist/jsuites.basic.css"
JSPREADSHEET_CSS_URL="https://bossanova.uk/jspreadsheet/v4/jexcel.css"
JSUITES_CSS_FILE=jsuites.basic.css
JSUITES_SCSS_FILE=jsuites.scss
JSUITES_SCSS_FILE_LOCATION=$SCSS_VENDOR$JSUITES_SCSS_FILE
JSUITES_JS_FILE=jsuites.js
JSUITES_NEW_JS_FILE=jsuites.js
JSUITES_JS_FILE_LOCATION=$JS_VENDOR$JSUITES_NEW_JS_FILE
JSPREADSHEET_CSS_FILE=jexcel.css
JSPREADSHEET_SCSS_FILE=jspreadsheet.scss
JSPREADSHEET_SCSS_FILE_LOCATION=$SCSS_VENDOR$JSPREADSHEET_SCSS_FILE
JSPREADSHEET_JS_FILE=jexcel.js
JSPREADSHEET_NEW_JS_FILE=jspreadsheet.js
JSPREADSHEET_JS_FILE_LOCATION=$JS_VENDOR$JSPREADSHEET_NEW_JS_FILE
# Remove all vendor related files:
rm -r ${SCSS_VENDOR}*
rm -r ${JS_VENDOR}
# Recreate vendor directory
mkdir $JS_VENDOR
echo "Old vendor assets have been removed."
# STYLESHEETS:
# Add JSuite vendor file
if test -f "$JSUITES_CSS_FILE"; then
echo "$JSUITES_CSS_FILE already exists."
else
# Fetch jsuite stylesheet
wget $JSUITES_CSS_URL
echo "$JSUITES_CSS_FILE has been created in $(pwd)"
# Move jsuite stylesheet to vendor as a scss file
mv $JSUITES_CSS_FILE $JSUITES_SCSS_FILE_LOCATION
echo "$JSUITES_SCSS_FILE has been placed in the scss vendor directory"
# Scope styles to jexcel_container class
sed -i '' '1s/^/.jexcel_container {\n/' $JSUITES_SCSS_FILE_LOCATION
sed -i '' '$a\
}' $JSUITES_SCSS_FILE_LOCATION
# Remove conflicting animation classes
# TODO: Improve below code to handle nested code blocks
fi
# Add JSpreadsheet vendor file
if test -f "$JSPREADSHEET_CSS_FILE"; then
echo "$JSPREADSHEET_CSS_FILE already exists."
else
# Fetch jspreadsheet stylesheet
wget $JSPREADSHEET_CSS_URL
echo "$JSPREADSHEET_CSS_FILE has been created in $(pwd)"
# Move jspreadsheet stylesheet to vendor as a scss file
mv $JSPREADSHEET_CSS_FILE $JSPREADSHEET_SCSS_FILE_LOCATION
fi
# Apply prettier to vendor files
yarn prettier --write $SCSS_VENDOR
# JAVASCRIPTS:
if test -f "$JSUITES_JS_FILE"; then
echo "$JSUITES_JS_FILE already exists."
else
wget $JSUITES_JS_URL
mv $JSUITES_JS_FILE $JSUITES_JS_FILE_LOCATION
fi
if test -f "$JSPREADSHEET_JS_FILE"; then
echo "$JSPREADSHEET_JS_FILE already exists."
else
wget $JSPREADSHEET_JS_URL
mv $JSPREADSHEET_JS_FILE $JSPREADSHEET_JS_FILE_LOCATION
fi

View File

@ -1,6 +1,5 @@
@import "vendor/jspreadsheet"; @import "vendor/jspreadsheet";
@import "vendor/jspreadsheet-datatables";
@import "vendor/jspreadsheet-theme";
@import "vendor/jsuites"; @import "vendor/jsuites";
@import "theme/jspreadsheet-theme";
@import "post/table-edit-decorator"; @import "post/table-edit-decorator";
@import "modal/insert-table-modal"; @import "modal/insert-table-modal";

View File

@ -6,6 +6,7 @@ import { iconNode } from "discourse-common/lib/icon-library";
import { create } from "virtual-dom"; import { create } from "virtual-dom";
import { ajax } from "discourse/lib/ajax"; import { ajax } from "discourse/lib/ajax";
import { popupAjaxError } from "discourse/lib/ajax-error"; import { popupAjaxError } from "discourse/lib/ajax-error";
export default apiInitializer("0.11.1", (api) => { export default apiInitializer("0.11.1", (api) => {
const site = api.container.lookup("site:main"); const site = api.container.lookup("site:main");
const currentUser = api.getCurrentUser(); const currentUser = api.getCurrentUser();

View File

@ -7,6 +7,7 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
import I18n from "I18n"; import I18n from "I18n";
import { schedule } from "@ember/runloop"; import { schedule } from "@ember/runloop";
import { tracked } from "@glimmer/tracking"; import { tracked } from "@glimmer/tracking";
export default class SpreadsheetEditor extends GlimmerComponent { export default class SpreadsheetEditor extends GlimmerComponent {
@tracked showEditReason = false; @tracked showEditReason = false;
spreadsheet = null; spreadsheet = null;

5966
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +1,13 @@
{ {
"name": "discourse-table-builder", "name": "discourse-table-builder",
"description": "Create and edit markdown tables using a spreadsheet editor.",
"version": "0.0.1", "version": "0.0.1",
"repository": "https://github.com/keegangeorge/discourse-table-builder", "repository": "https://github.com/keegangeorge/discourse-table-builder",
"author": "Keegan George", "author": "Keegan George",
"license": "GPL-2.0-or-later", "license": "GPL-2.0-or-later",
"scripts": {
"build": "bash ./build.bash"
},
"devDependencies": { "devDependencies": {
"eslint-config-discourse": "latest" "eslint-config-discourse": "latest"
} }

View File

@ -1,237 +1,252 @@
:root { :root {
--jexcel_header_color: var(--primary-high); --jexcel_header_color: var(--primary-high);
--jexcel_header_color_highlighted: var(--primary-high); --jexcel_header_color_highlighted: var(--primary-high);
--jexcel_header_background: var(--primary-very-low); --jexcel_header_background: var(--primary-very-low);
--jexcel_header_background_highlighted: var(--primary-low); --jexcel_header_background_highlighted: var(--primary-low);
--jexcel_content_color: var(--primary); --jexcel_content_color: var(--primary);
--jexcel_content_color_highlighted: var(--primary-high); --jexcel_content_color_highlighted: var(--primary-high);
--jexcel_content_background: var(--secondary); --jexcel_content_background: var(--secondary);
--jexcel_content_background_highlighted: var(--tertiary-very-low); --jexcel_content_background_highlighted: var(--tertiary-very-low);
--jexcel_menu_background: var(--secondary); --jexcel_menu_background: var(--secondary);
--jexcel_menu_background_highlighted: var(--secondary-very-high); --jexcel_menu_background_highlighted: var(--secondary-very-high);
--jexcel_menu_color: var(--primary-medium); --jexcel_menu_color: var(--primary-medium);
--jexcel_menu_color_highlighted: var(--primary); --jexcel_menu_color_highlighted: var(--primary);
--jexcel_border_color: var(--primary-low-mid); --jexcel_border_color: var(--primary-low-mid);
--jexcel_border_color_highlighted: var(--tertiary-high); --jexcel_border_color_highlighted: var(--tertiary-high);
--active_color: var(--primary-very-low); --active_color: var(--primary-very-low);
--active-color: var(--active_color); --active-color: var(--active_color);
} }
.jexcel { .jexcel {
border-bottom: 1px solid var(--jexcel_border_color); border-bottom: 1px solid var(--jexcel_border_color);
border-right: 1px solid var(--jexcel_border_color); border-right: 1px solid var(--jexcel_border_color);
background-color: transparent; background-color: transparent;
} }
table.jexcel { table.jexcel > thead > tr > td {
border-bottom: 1px solid var(--jexcel_border_color); border-top: 1px solid transparent;
} border-left: 1px solid transparent;
border-right: 1px solid transparent;
.jcontextmenu.jexcel_contextmenu hr { border-bottom: 1px solid #000;
border-color: var(--jexcel_border_color); background-color: #fff;
} padding: 10px;
font-weight: bold;
.jexcel_corner { }
background-color: var(--tertiary); table.jexcel > tbody > tr > td {
} padding: 8px;
border-right: 1px solid transparent;
.jexcel > tbody > tr > td, border-left: 1px solid transparent;
.jexcel > thead > tr > td { }
border-top: 1px solid var(--jexcel_border_color);
border-left: 1px solid var(--jexcel_border_color); table.jexcel {
background-color: var(--jexcel_content_background); border-bottom: 1px solid var(--jexcel_border_color);
color: var(--jexcel_content_color); }
}
.jcontextmenu.jexcel_contextmenu hr {
.jexcel > tbody > tr > td:first-child, border-color: var(--jexcel_border_color);
.jexcel > thead > tr > td { }
background-color: var(--jexcel_header_background);
color: var(--jexcel_header_color); .jexcel_corner {
} background-color: var(--tertiary);
}
.jexcel > thead > tr > td.selected,
.jexcel > tbody > tr.selected > td:first-child { .jexcel > tbody > tr > td,
background-color: var(--jexcel_header_background_highlighted); .jexcel > thead > tr > td {
color: var(--jexcel_header_color_highlighted); border-top: 1px solid var(--jexcel_border_color);
} border-left: 1px solid var(--jexcel_border_color);
background-color: var(--jexcel_content_background);
table.jexcel > tbody > tr > td:first-child { color: var(--jexcel_content_color);
background-color: var(--jexcel_header_background); }
}
.jexcel > tbody > tr > td:first-child,
table.jexcel > tbody > tr.selected > td:first-child { .jexcel > thead > tr > td {
background-color: var(--jexcel_header_background_highlighted); background-color: var(--jexcel_header_background);
} color: var(--jexcel_header_color);
}
.jexcel > tbody > tr > td.jexcel_cursor a {
color: var(--active-color); .jexcel > thead > tr > td.selected,
} .jexcel > tbody > tr.selected > td:first-child {
background-color: var(--jexcel_header_background_highlighted);
.jexcel_pagination > div > div { color: var(--jexcel_header_color_highlighted);
color: var(--jexcel_header_color); }
background: var(--jexcel_header_background);
border: 1px solid var(--jexcel_border_color); table.jexcel > tbody > tr > td:first-child {
} background-color: var(--jexcel_header_background);
}
.jexcel_page,
.jexcel_container input, table.jexcel > tbody > tr.selected > td:first-child {
.jexcel_container select { background-color: var(--jexcel_header_background_highlighted);
color: var(--jexcel_header_color); }
background: var(--jexcel_header_background);
border: 1px solid var(--jexcel_border_color); .jexcel > tbody > tr > td.jexcel_cursor a {
} color: var(--active-color);
}
.jexcel_contextmenu.jcontextmenu {
border: 1px solid var(--jexcel_border_color); .jexcel_pagination > div > div {
background: var(--jexcel_menu_background); color: var(--jexcel_header_color);
color: var(--jexcel_menu_color); background: var(--jexcel_header_background);
box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15); border: 1px solid var(--jexcel_border_color);
} }
.jcontextmenu > div a { .jexcel_page,
color: var(--jexcel_menu_color); .jexcel_container input,
} .jexcel_container select {
color: var(--jexcel_header_color);
.jcontextmenu > div:not(.contextmenu-line):hover a { background: var(--jexcel_header_background);
color: var(--jexcel_menu_color_highlighted); border: 1px solid var(--jexcel_border_color);
} }
.jcontextmenu > div:not(.contextmenu-line):hover { .jexcel_contextmenu.jcontextmenu {
background: var(--jexcel_menu_background_highlighted); border: 1px solid var(--jexcel_border_color);
} background: var(--jexcel_menu_background);
color: var(--jexcel_menu_color);
.jexcel_dropdown .jdropdown-container, box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
.jexcel_dropdown .jdropdown-content { }
background-color: var(--jexcel_content_background);
color: var(--jexcel_content_color); .jcontextmenu > div a {
} color: var(--jexcel_menu_color);
}
.jexcel_dropdown .jdropdown-item {
color: var(--jexcel_content_color); .jcontextmenu > div:not(.contextmenu-line):hover a {
} color: var(--jexcel_menu_color_highlighted);
}
.jexcel_dropdown .jdropdown-item:hover,
.jexcel_dropdown .jdropdown-selected, .jcontextmenu > div:not(.contextmenu-line):hover {
.jexcel_dropdown .jdropdown-cursor { background: var(--jexcel_menu_background_highlighted);
background-color: var(--jexcel_content_background_highlighted); }
color: var(--jexcel_content_color_highlighted);
} .jexcel_dropdown .jdropdown-container,
.jexcel_dropdown .jdropdown-content {
.jexcel .jcalendar-content { background-color: var(--jexcel_content_background);
background-color: var(--jexcel_header_background); color: var(--jexcel_content_color);
color: var(--jexcel_header_color); }
}
.jexcel_dropdown .jdropdown-item {
.jexcel .jcalendar-content > table { color: var(--jexcel_content_color);
background-color: var(--jexcel_content_background); }
color: var(--jexcel_content_color);
} .jexcel_dropdown .jdropdown-item:hover,
.jexcel_dropdown .jdropdown-selected,
.jexcel .jcalendar-weekday { .jexcel_dropdown .jdropdown-cursor {
background-color: var(--jexcel_content_background_highlighted); background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted); color: var(--jexcel_content_color_highlighted);
} }
.jexcel .jcalendar-sunday { .jexcel .jcalendar-content {
color: var(--jexcel_header_color); background-color: var(--jexcel_header_background);
} color: var(--jexcel_header_color);
}
.jexcel .jcalendar-selected {
background-color: var(--jexcel_content_background_highlighted); .jexcel .jcalendar-content > table {
color: var(--jexcel_content_color_highlighted); background-color: var(--jexcel_content_background);
} color: var(--jexcel_content_color);
}
.jexcel_toolbar i.jexcel_toolbar_item {
color: var(--jexcel_content_color); .jexcel .jcalendar-weekday {
} background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
.jexcel_toolbar i.jexcel_toolbar_item:hover { }
background: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted); .jexcel .jcalendar-sunday {
} color: var(--jexcel_header_color);
}
.jexcel_toolbar {
background: var(--jexcel_header_background); .jexcel .jcalendar-selected {
} background-color: var(--jexcel_content_background_highlighted);
color: var(--jexcel_content_color_highlighted);
.jexcel_content::-webkit-scrollbar-track { }
background: var(--jexcel_background_head);
} .jexcel_toolbar i.jexcel_toolbar_item {
color: var(--jexcel_content_color);
.jexcel_content::-webkit-scrollbar-thumb { }
background: var(--jexcel_background_head_highlighted);
} .jexcel_toolbar i.jexcel_toolbar_item:hover {
background: var(--jexcel_content_background_highlighted);
.jexcel_border_main { color: var(--jexcel_content_color_highlighted);
border: 1px solid #000; }
border-color: var(--jexcel_border_color_highlighted);
} .jexcel_toolbar {
background: var(--jexcel_header_background);
.jexcel .highlight { }
background-color: var(--jexcel_content_background_highlighted);
} .jexcel_content::-webkit-scrollbar-track {
background: var(--jexcel_background_head);
.jexcel .highlight-bottom { }
border-bottom: 1.5px solid var(--jexcel_border_color_highlighted);
} .jexcel_content::-webkit-scrollbar-thumb {
.jexcel .highlight-right { background: var(--jexcel_background_head_highlighted);
border-right: 1.5px solid var(--jexcel_border_color_highlighted); }
}
.jexcel .highlight-left { .jexcel_border_main {
border-left: 1.5px solid var(--jexcel_border_color_highlighted); border: 1px solid #000;
} border-color: var(--jexcel_border_color_highlighted);
.jexcel .highlight-top { }
border-top: 1.5px solid var(--jexcel_border_color_highlighted);
} .jexcel .highlight {
.jexcel .copying-top { background-color: var(--jexcel_content_background_highlighted);
border-top-color: var(--jexcel_border_color_highlighted); }
}
.jexcel .copying-right { .jexcel .highlight-bottom {
border-right-color: var(--jexcel_border_color_highlighted); border-bottom: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .copying-left { .jexcel .highlight-right {
border-left-color: var(--jexcel_border_color_highlighted); border-right: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .copying-bottom { .jexcel .highlight-left {
border-bottom-color: var(--jexcel_border_color_highlighted); border-left: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel_border_main, .jexcel .highlight-top {
.jexcel .highlight-top.highlight-left, border-top: 1.5px solid var(--jexcel_border_color_highlighted);
.jexcel .highlight-top, }
.jexcel .highlight-left { .jexcel .copying-top {
-webkit-box-shadow: unset; border-top-color: var(--jexcel_border_color_highlighted);
box-shadow: unset; }
} .jexcel .copying-right {
border-right-color: var(--jexcel_border_color_highlighted);
table.jexcel > thead > tr > td { }
border-top: 1px solid var(--jexcel_border_color); .jexcel .copying-left {
border-right: 1px solid var(--jexcel_border_color); border-left-color: var(--jexcel_border_color_highlighted);
border-bottom: none; }
background-color: var(--jexcel_header_background); .jexcel .copying-bottom {
border-bottom-color: var(--jexcel_border_color_highlighted);
&:first-child { }
border-left: 1px solid var(--jexcel_border_color); .jexcel_border_main,
} .jexcel .highlight-top.highlight-left,
} .jexcel .highlight-top,
.jexcel .highlight-left {
table.jexcel > thead > tr > td.selected { -webkit-box-shadow: unset;
background-color: var(--jexcel_header_background_highlighted); box-shadow: unset;
color: var(--jexcel_header_color_highlighted); }
}
table.jexcel > thead > tr > td {
table.jexcel > tbody > tr > td { border-top: 1px solid var(--jexcel_border_color);
border-right: 1px solid var(--jexcel_border_color); border-right: 1px solid var(--jexcel_border_color);
border-bottom: none;
&:first-child { background-color: var(--jexcel_header_background);
border-left: 1px solid var(--jexcel_border_color);
} &:first-child {
} border-left: 1px solid var(--jexcel_border_color);
}
// Hides about item in context menu }
.jcontextmenu > div:not(.contextmenu-line):last-child {
display: none; table.jexcel > thead > tr > td.selected {
} background-color: var(--jexcel_header_background_highlighted);
color: var(--jexcel_header_color_highlighted);
}
table.jexcel > tbody > tr > td {
border-right: 1px solid var(--jexcel_border_color);
&:first-child {
border-left: 1px solid var(--jexcel_border_color);
}
}
// Hides about item in context menu
.jcontextmenu > div:not(.contextmenu-line):last-child {
display: none;
}

View File

@ -1,85 +0,0 @@
table.jexcel {
border-right: 1px solid transparent;
}
table.jexcel > thead {
background-color: #fff;
}
table.jexcel > thead > tr > td {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid #000;
background-color: #fff;
padding: 10px;
font-weight: bold;
}
table.jexcel > thead > tr > td.selected {
background-color: #eee;
}
table.jexcel > tbody > tr > td {
padding: 8px;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
table.jexcel > tbody > tr > td:first-child {
background-color: #fff;
}
table.jexcel > tbody > tr.selected > td:first-child {
background-color: #eee;
}
.jexcel_toolbar {
background-color: transparent;
border: 0px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-bottom: 0px;
}
.jexcel_pagination > div > div {
border: 1px solid transparent;
background-color: #fff;
}
.jexcel_page_selected {
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
border: 1px solid #979797 !important;
font-weight: normal;
color: #333 !important;
border-radius: 2px;
}
/*.jexcel > div > table > tbody > tr,
.jexcel > div > table > thead
{
border-left:1px solid transparent;
}
.jexcel > div > table > tbody > tr > td
{
padding:10px;
border-right:1px solid transparent;
}
.jexcel > div > table > tbody > td.edition
{
padding:0px;
padding-left:4px;
}
.jexcel > div > table > tbody > tr > td:first-child
{
background-color:#fff;
font-weight:bold;
}
.jexcel > div > table > tbody > tr.selected > td:first-child
{
background-color:#eee;
}
.jexcel > div > table > thead > tr > td.selected
{
background-color:#eee;
}*/

View File

@ -410,6 +410,7 @@
-khtml-user-drag: none; -khtml-user-drag: none;
-moz-user-drag: none; -moz-user-drag: none;
-o-user-drag: none; -o-user-drag: none;
user-drag: none;
} }
.jexcel_textarea { .jexcel_textarea {

5004
scss/vendor/jsuites.scss vendored

File diff suppressed because it is too large Load Diff

556
yarn.lock

File diff suppressed because it is too large Load Diff