mirror of
https://github.com/mattermost/focalboard.git
synced 2025-03-03 15:32:14 +02:00
Adding support for embed the webapp into the plugin (#597)
* Adding support for embed the webapp into the plugin * Adding required dependency * Removed unnecessary prettier command * Installed imagemin required dependencies * Open in a new window always * Fix CSS Conflicts. * Changing the app id to make it specific to focalboard * Adding error boundary * Fix styles on non-plugin environments * Making the css scoped to focalboard only * Create the focalboard root portal * Including missed component * Adding a missed rollback call Co-authored-by: Christopher Speller <crspeller@gmail.com> Co-authored-by: Hossein <hahmadia@users.noreply.github.com>
This commit is contained in:
Jesús Espino
GitHub
parent
bb81426b56
commit
c3dba863c1
2
Makefile
2
Makefile
@ -163,7 +163,7 @@ clean:
|
||||
rm -rf mac/dist
|
||||
rm -rf linux/dist
|
||||
rm -rf win-wpf/msix
|
||||
rm win-wpf/focalboard.msix
|
||||
rm -f win-wpf/focalboard.msix
|
||||
|
||||
cleanall: clean
|
||||
rm -rf webapp/node_modules
|
||||
|
||||
1
mattermost-plugin/webapp/.eslintignore
Normal file
1
mattermost-plugin/webapp/.eslintignore
Normal file
@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@ -1,138 +1,36 @@
|
||||
{
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react-hooks/recommended"
|
||||
"plugin:mattermost/react",
|
||||
"plugin:cypress/recommended",
|
||||
"plugin:jquery/deprecated"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true,
|
||||
"impliedStrict": true,
|
||||
"modules": true,
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
"babel",
|
||||
"mattermost",
|
||||
"import",
|
||||
"cypress",
|
||||
"jquery",
|
||||
"no-only-tests"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true,
|
||||
"jquery": true,
|
||||
"es6": true,
|
||||
"jest": true
|
||||
},
|
||||
"globals": {
|
||||
"jest": true,
|
||||
"describe": true,
|
||||
"it": true,
|
||||
"expect": true,
|
||||
"before": true,
|
||||
"after": true,
|
||||
"beforeEach": true
|
||||
"cypress/globals": true
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": "webpack"
|
||||
"import/resolver": "webpack",
|
||||
"react": {
|
||||
"pragma": "React",
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"array-bracket-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"array-callback-return": 2,
|
||||
"arrow-body-style": 0,
|
||||
"arrow-parens": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"arrow-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": true,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"block-scoped-var": 2,
|
||||
"brace-style": [
|
||||
2,
|
||||
"1tbs",
|
||||
{
|
||||
"allowSingleLine": false
|
||||
}
|
||||
],
|
||||
"capitalized-comments": 0,
|
||||
"class-methods-use-this": 0,
|
||||
"comma-dangle": [
|
||||
2,
|
||||
"always-multiline"
|
||||
],
|
||||
"comma-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"comma-style": [
|
||||
2,
|
||||
"last"
|
||||
],
|
||||
"complexity": [
|
||||
0,
|
||||
10
|
||||
],
|
||||
"computed-property-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"consistent-return": 2,
|
||||
"consistent-this": [
|
||||
2,
|
||||
"self"
|
||||
],
|
||||
"constructor-super": 2,
|
||||
"curly": [
|
||||
2,
|
||||
"all"
|
||||
],
|
||||
"dot-location": [
|
||||
2,
|
||||
"object"
|
||||
],
|
||||
"dot-notation": 2,
|
||||
"eqeqeq": [
|
||||
2,
|
||||
"smart"
|
||||
],
|
||||
"func-call-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"func-name-matching": 0,
|
||||
"func-names": 2,
|
||||
"func-style": [
|
||||
2,
|
||||
"declaration",
|
||||
{
|
||||
"allowArrowFunctions": true
|
||||
}
|
||||
],
|
||||
"generator-star-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"global-require": 2,
|
||||
"guard-for-in": 2,
|
||||
"id-blacklist": 0,
|
||||
"no-unused-expressions": 0,
|
||||
"babel/no-unused-expressions": [2, {"allowShortCircuit": true}],
|
||||
"eol-last": ["error", "always"],
|
||||
"import/no-unresolved": 2,
|
||||
"import/order": [
|
||||
"error",
|
||||
2,
|
||||
{
|
||||
"newlines-between": "always-and-inside-groups",
|
||||
"groups": [
|
||||
@ -147,405 +45,8 @@
|
||||
]
|
||||
}
|
||||
],
|
||||
"indent": [
|
||||
2,
|
||||
4,
|
||||
{
|
||||
"SwitchCase": 0
|
||||
}
|
||||
],
|
||||
"jsx-quotes": [
|
||||
2,
|
||||
"prefer-single"
|
||||
],
|
||||
"key-spacing": [
|
||||
2,
|
||||
{
|
||||
"beforeColon": false,
|
||||
"afterColon": true,
|
||||
"mode": "strict"
|
||||
}
|
||||
],
|
||||
"keyword-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": true,
|
||||
"after": true,
|
||||
"overrides": {}
|
||||
}
|
||||
],
|
||||
"line-comment-position": 0,
|
||||
"linebreak-style": 2,
|
||||
"lines-around-comment": [
|
||||
2,
|
||||
{
|
||||
"beforeBlockComment": true,
|
||||
"beforeLineComment": true,
|
||||
"allowBlockStart": true,
|
||||
"allowBlockEnd": true
|
||||
}
|
||||
],
|
||||
"max-lines": [
|
||||
1,
|
||||
{
|
||||
"max": 450,
|
||||
"skipBlankLines": true,
|
||||
"skipComments": false
|
||||
}
|
||||
],
|
||||
"max-nested-callbacks": [
|
||||
2,
|
||||
{
|
||||
"max": 2
|
||||
}
|
||||
],
|
||||
"max-statements-per-line": [
|
||||
2,
|
||||
{
|
||||
"max": 1
|
||||
}
|
||||
],
|
||||
"multiline-ternary": [
|
||||
1,
|
||||
"never"
|
||||
],
|
||||
"new-cap": 2,
|
||||
"new-parens": 2,
|
||||
"newline-before-return": 0,
|
||||
"newline-per-chained-call": 0,
|
||||
"no-alert": 2,
|
||||
"no-array-constructor": 2,
|
||||
"no-await-in-loop": 2,
|
||||
"no-caller": 2,
|
||||
"no-case-declarations": 2,
|
||||
"no-class-assign": 2,
|
||||
"no-compare-neg-zero": 2,
|
||||
"no-cond-assign": [
|
||||
2,
|
||||
"except-parens"
|
||||
],
|
||||
"no-confusing-arrow": 2,
|
||||
"no-console": 2,
|
||||
"no-const-assign": 2,
|
||||
"no-constant-condition": 2,
|
||||
"no-debugger": 2,
|
||||
"no-div-regex": 2,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-duplicate-imports": [
|
||||
2,
|
||||
{
|
||||
"includeExports": true
|
||||
}
|
||||
],
|
||||
"no-else-return": 2,
|
||||
"no-empty": 2,
|
||||
"no-empty-function": 2,
|
||||
"no-empty-pattern": 2,
|
||||
"no-eval": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extend-native": 2,
|
||||
"no-extra-bind": 2,
|
||||
"no-extra-label": 2,
|
||||
"no-extra-parens": 0,
|
||||
"no-extra-semi": 2,
|
||||
"no-fallthrough": 2,
|
||||
"no-floating-decimal": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-global-assign": 2,
|
||||
"no-implicit-coercion": 2,
|
||||
"no-implicit-globals": 0,
|
||||
"no-implied-eval": 2,
|
||||
"no-inner-declarations": 0,
|
||||
"no-invalid-regexp": 2,
|
||||
"no-irregular-whitespace": 2,
|
||||
"no-iterator": 2,
|
||||
"no-labels": 2,
|
||||
"no-lone-blocks": 2,
|
||||
"no-lonely-if": 2,
|
||||
"no-loop-func": 2,
|
||||
"no-magic-numbers": [
|
||||
0,
|
||||
{
|
||||
"ignore": [
|
||||
-1,
|
||||
0,
|
||||
1,
|
||||
2
|
||||
],
|
||||
"enforceConst": true,
|
||||
"detectObjects": true
|
||||
}
|
||||
],
|
||||
"no-mixed-operators": [
|
||||
2,
|
||||
{
|
||||
"allowSamePrecedence": false
|
||||
}
|
||||
],
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-multi-assign": 2,
|
||||
"no-multi-spaces": [
|
||||
2,
|
||||
{
|
||||
"exceptions": {
|
||||
"Property": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"no-multi-str": 0,
|
||||
"no-multiple-empty-lines": [
|
||||
2,
|
||||
{
|
||||
"max": 1
|
||||
}
|
||||
],
|
||||
"no-native-reassign": 2,
|
||||
"no-negated-condition": 2,
|
||||
"no-nested-ternary": 2,
|
||||
"no-new": 2,
|
||||
"no-new-func": 2,
|
||||
"no-new-object": 2,
|
||||
"no-new-symbol": 2,
|
||||
"no-new-wrappers": 2,
|
||||
"no-octal-escape": 2,
|
||||
"no-param-reassign": 2,
|
||||
"no-process-env": 2,
|
||||
"no-process-exit": 2,
|
||||
"no-proto": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-return-assign": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"no-return-await": 2,
|
||||
"no-script-url": 2,
|
||||
"no-self-assign": [
|
||||
2,
|
||||
{
|
||||
"props": true
|
||||
}
|
||||
],
|
||||
"no-self-compare": 2,
|
||||
"no-sequences": 2,
|
||||
"no-shadow": [
|
||||
2,
|
||||
{
|
||||
"hoist": "functions"
|
||||
}
|
||||
],
|
||||
"no-shadow-restricted-names": 2,
|
||||
"no-spaced-func": 2,
|
||||
"no-tabs": 0,
|
||||
"no-template-curly-in-string": 2,
|
||||
"no-ternary": 0,
|
||||
"no-this-before-super": 2,
|
||||
"no-throw-literal": 2,
|
||||
"no-trailing-spaces": [
|
||||
2,
|
||||
{
|
||||
"skipBlankLines": false
|
||||
}
|
||||
],
|
||||
"no-undef-init": 2,
|
||||
"no-undefined": 2,
|
||||
"no-underscore-dangle": 2,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unmodified-loop-condition": 2,
|
||||
"no-unneeded-ternary": [
|
||||
2,
|
||||
{
|
||||
"defaultAssignment": false
|
||||
}
|
||||
],
|
||||
"no-unreachable": 2,
|
||||
"no-unsafe-finally": 2,
|
||||
"no-unsafe-negation": 2,
|
||||
"no-unused-expressions": 2,
|
||||
"no-unused-vars": [
|
||||
2,
|
||||
{
|
||||
"vars": "all",
|
||||
"args": "after-used"
|
||||
}
|
||||
],
|
||||
"no-use-before-define": [
|
||||
2,
|
||||
{
|
||||
"classes": false,
|
||||
"functions": false,
|
||||
"variables": false
|
||||
}
|
||||
],
|
||||
"no-useless-computed-key": 2,
|
||||
"no-useless-concat": 2,
|
||||
"no-useless-constructor": 2,
|
||||
"no-useless-escape": 2,
|
||||
"no-useless-rename": 2,
|
||||
"no-useless-return": 2,
|
||||
"no-var": 0,
|
||||
"no-void": 2,
|
||||
"no-warning-comments": 1,
|
||||
"no-whitespace-before-property": 2,
|
||||
"no-with": 2,
|
||||
"object-curly-newline": 0,
|
||||
"object-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"object-property-newline": [
|
||||
2,
|
||||
{
|
||||
"allowMultiplePropertiesPerLine": true
|
||||
}
|
||||
],
|
||||
"object-shorthand": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"one-var": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"one-var-declaration-per-line": 0,
|
||||
"operator-assignment": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"operator-linebreak": [
|
||||
2,
|
||||
"after"
|
||||
],
|
||||
"padded-blocks": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"prefer-arrow-callback": 2,
|
||||
"prefer-const": 2,
|
||||
"prefer-destructuring": 0,
|
||||
"prefer-numeric-literals": 2,
|
||||
"prefer-promise-reject-errors": 2,
|
||||
"prefer-rest-params": 2,
|
||||
"prefer-spread": 2,
|
||||
"prefer-template": 0,
|
||||
"quote-props": [
|
||||
2,
|
||||
"as-needed"
|
||||
],
|
||||
"quotes": [
|
||||
2,
|
||||
"single",
|
||||
"avoid-escape"
|
||||
],
|
||||
"radix": 2,
|
||||
"react/display-name": [
|
||||
0,
|
||||
{
|
||||
"ignoreTranspilerName": false
|
||||
}
|
||||
],
|
||||
"react/forbid-component-props": 0,
|
||||
"react/forbid-elements": [
|
||||
2,
|
||||
{
|
||||
"forbid": [
|
||||
"embed"
|
||||
]
|
||||
}
|
||||
],
|
||||
"react/jsx-boolean-value": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"react/jsx-closing-bracket-location": [
|
||||
2,
|
||||
{
|
||||
"location": "tag-aligned"
|
||||
}
|
||||
],
|
||||
"react/jsx-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"react/jsx-equals-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"react/jsx-filename-extension": 2,
|
||||
"react/jsx-first-prop-new-line": [
|
||||
2,
|
||||
"multiline"
|
||||
],
|
||||
"react/jsx-handler-names": 0,
|
||||
"react/jsx-indent": [
|
||||
2,
|
||||
4
|
||||
],
|
||||
"react/jsx-indent-props": [
|
||||
2,
|
||||
4
|
||||
],
|
||||
"react/jsx-key": 2,
|
||||
"react/jsx-max-props-per-line": [
|
||||
2,
|
||||
{
|
||||
"maximum": 1
|
||||
}
|
||||
],
|
||||
"react/jsx-no-bind": 0,
|
||||
"react/jsx-no-comment-textnodes": 2,
|
||||
"react/jsx-no-duplicate-props": [
|
||||
2,
|
||||
{
|
||||
"ignoreCase": false
|
||||
}
|
||||
],
|
||||
"react/jsx-no-literals": 2,
|
||||
"react/jsx-no-target-blank": 2,
|
||||
"react/jsx-no-undef": 2,
|
||||
"react/jsx-pascal-case": 2,
|
||||
"react/jsx-tag-spacing": [
|
||||
2,
|
||||
{
|
||||
"closingSlash": "never",
|
||||
"beforeSelfClosing": "never",
|
||||
"afterOpening": "never"
|
||||
}
|
||||
],
|
||||
"react/jsx-uses-react": 2,
|
||||
"react/jsx-uses-vars": 2,
|
||||
"react/jsx-wrap-multilines": 2,
|
||||
"react/no-array-index-key": 1,
|
||||
"react/no-children-prop": 2,
|
||||
"react/no-danger": 0,
|
||||
"react/no-danger-with-children": 2,
|
||||
"react/no-deprecated": 1,
|
||||
"react/no-did-mount-set-state": 2,
|
||||
"react/no-did-update-set-state": 2,
|
||||
"react/no-direct-mutation-state": 2,
|
||||
"react/no-find-dom-node": 1,
|
||||
"react/no-is-mounted": 2,
|
||||
"react/no-multi-comp": [
|
||||
2,
|
||||
{
|
||||
"ignoreStateless": true
|
||||
}
|
||||
],
|
||||
"react/no-render-return-value": 2,
|
||||
"react/no-set-state": 0,
|
||||
"react/no-string-refs": 0,
|
||||
"react/no-unescaped-entities": 2,
|
||||
"react/no-unknown-property": 2,
|
||||
"react/no-unused-prop-types": [
|
||||
1,
|
||||
{
|
||||
"skipShapeProps": true
|
||||
}
|
||||
],
|
||||
"react/prefer-es6-class": 2,
|
||||
"react/prefer-stateless-function": 2,
|
||||
"no-undefined": 0,
|
||||
"react/jsx-filename-extension": 0,
|
||||
"react/prop-types": [
|
||||
2,
|
||||
{
|
||||
@ -556,99 +57,61 @@
|
||||
]
|
||||
}
|
||||
],
|
||||
"react/require-default-props": 0,
|
||||
"react/require-optimization": 1,
|
||||
"react/require-render-return": 2,
|
||||
"react/self-closing-comp": 2,
|
||||
"react/sort-comp": 0,
|
||||
"react/style-prop-object": 2,
|
||||
"require-yield": 2,
|
||||
"rest-spread-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"semi": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"semi-spacing": [
|
||||
2,
|
||||
{
|
||||
"before": false,
|
||||
"after": true
|
||||
}
|
||||
],
|
||||
"sort-imports": 0,
|
||||
"sort-keys": 0,
|
||||
"space-before-blocks": [
|
||||
2,
|
||||
"always"
|
||||
],
|
||||
"space-before-function-paren": [
|
||||
2,
|
||||
{
|
||||
"anonymous": "never",
|
||||
"named": "never",
|
||||
"asyncArrow": "always"
|
||||
}
|
||||
],
|
||||
"space-in-parens": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"space-infix-ops": 2,
|
||||
"space-unary-ops": [
|
||||
2,
|
||||
{
|
||||
"words": true,
|
||||
"nonwords": false
|
||||
}
|
||||
],
|
||||
"symbol-description": 2,
|
||||
"template-curly-spacing": [
|
||||
2,
|
||||
"never"
|
||||
],
|
||||
"valid-typeof": [
|
||||
2,
|
||||
{
|
||||
"requireStringLiterals": false
|
||||
}
|
||||
],
|
||||
"vars-on-top": 0,
|
||||
"wrap-iife": [
|
||||
2,
|
||||
"outside"
|
||||
],
|
||||
"wrap-regex": 2,
|
||||
"yoda": [
|
||||
2,
|
||||
"never",
|
||||
{
|
||||
"exceptRange": false,
|
||||
"onlyEquality": false
|
||||
}
|
||||
]
|
||||
"react/no-string-refs": 2,
|
||||
"no-only-tests/no-only-tests": ["error", {"focus": ["only", "skip"]}],
|
||||
"max-nested-callbacks": ["error", {"max": 5}]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.tsx", "**/*.ts"],
|
||||
"extends": "plugin:@typescript-eslint/recommended",
|
||||
"extends": [
|
||||
"plugin:@typescript-eslint/recommended"
|
||||
],
|
||||
"rules": {
|
||||
"@typescript-eslint/ban-ts-ignore": 0,
|
||||
"@typescript-eslint/ban-types": 1,
|
||||
"@typescript-eslint/ban-ts-comment": 0,
|
||||
"import/no-unresolved": 0, // ts handles this better
|
||||
"camelcase": 0,
|
||||
"semi": "off",
|
||||
"@typescript-eslint/naming-convention": [
|
||||
2,
|
||||
{
|
||||
"selector": "function",
|
||||
"format": ["camelCase", "PascalCase"]
|
||||
},
|
||||
{
|
||||
"selector": "variable",
|
||||
"format": ["camelCase", "PascalCase", "UPPER_CASE"]
|
||||
},
|
||||
{
|
||||
"selector": "parameter",
|
||||
"format": ["camelCase", "PascalCase"],
|
||||
"leadingUnderscore": "allow"
|
||||
},
|
||||
{
|
||||
"selector": "typeLike",
|
||||
"format": ["PascalCase"]
|
||||
}
|
||||
],
|
||||
"@typescript-eslint/no-non-null-assertion": 0,
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
2,
|
||||
{
|
||||
"vars": "all",
|
||||
"args": "after-used"
|
||||
}
|
||||
],
|
||||
"@typescript-eslint/no-var-requires": 0,
|
||||
"@typescript-eslint/no-empty-function": 0,
|
||||
"@typescript-eslint/prefer-interface": 0,
|
||||
"@typescript-eslint/explicit-function-return-type": 0,
|
||||
"@typescript-eslint/explicit-module-boundary-types": 0,
|
||||
"@typescript-eslint/indent": [
|
||||
"@typescript-eslint/semi": [2, "never"],
|
||||
"@typescript-eslint/indent": [
|
||||
2,
|
||||
4,
|
||||
{
|
||||
"SwitchCase": 0
|
||||
}
|
||||
],
|
||||
"no-use-before-define": "off",
|
||||
"@typescript-eslint/no-use-before-define": [
|
||||
2,
|
||||
{
|
||||
@ -657,12 +120,82 @@
|
||||
"variables": false
|
||||
}
|
||||
],
|
||||
"react/jsx-filename-extension": [
|
||||
1,
|
||||
{
|
||||
"extensions": [".jsx", ".tsx"]
|
||||
}
|
||||
]
|
||||
"no-useless-constructor": 0,
|
||||
"@typescript-eslint/no-useless-constructor": 2,
|
||||
"react/jsx-filename-extension": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["tests/**", "**/*.test.*"],
|
||||
"env": {
|
||||
"jest": true
|
||||
},
|
||||
"rules": {
|
||||
"func-names": 0,
|
||||
"global-require": 0,
|
||||
"new-cap": 0,
|
||||
"prefer-arrow-callback": 0,
|
||||
"no-import-assign": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": ["e2e/**"],
|
||||
"rules": {
|
||||
"func-names": 0,
|
||||
"import/no-unresolved": 0,
|
||||
"max-nested-callbacks": 0,
|
||||
"no-process-env": 0,
|
||||
"babel/no-unused-expressions": 0,
|
||||
"no-unused-expressions": 0,
|
||||
"jquery/no-ajax": 0,
|
||||
"jquery/no-ajax-events": 0,
|
||||
"jquery/no-animate": 0,
|
||||
"jquery/no-attr": 0,
|
||||
"jquery/no-bind": 0,
|
||||
"jquery/no-class": 0,
|
||||
"jquery/no-clone": 0,
|
||||
"jquery/no-closest": 0,
|
||||
"jquery/no-css": 0,
|
||||
"jquery/no-data": 0,
|
||||
"jquery/no-deferred": 0,
|
||||
"jquery/no-delegate": 0,
|
||||
"jquery/no-each": 0,
|
||||
"jquery/no-extend": 0,
|
||||
"jquery/no-fade": 0,
|
||||
"jquery/no-filter": 0,
|
||||
"jquery/no-find": 0,
|
||||
"jquery/no-global-eval": 0,
|
||||
"jquery/no-grep": 0,
|
||||
"jquery/no-has": 0,
|
||||
"jquery/no-hide": 0,
|
||||
"jquery/no-html": 0,
|
||||
"jquery/no-in-array": 0,
|
||||
"jquery/no-is-array": 0,
|
||||
"jquery/no-is-function": 0,
|
||||
"jquery/no-is": 0,
|
||||
"jquery/no-load": 0,
|
||||
"jquery/no-map": 0,
|
||||
"jquery/no-merge": 0,
|
||||
"jquery/no-param": 0,
|
||||
"jquery/no-parent": 0,
|
||||
"jquery/no-parents": 0,
|
||||
"jquery/no-parse-html": 0,
|
||||
"jquery/no-prop": 0,
|
||||
"jquery/no-proxy": 0,
|
||||
"jquery/no-ready": 0,
|
||||
"jquery/no-serialize": 0,
|
||||
"jquery/no-show": 0,
|
||||
"jquery/no-size": 0,
|
||||
"jquery/no-sizzle": 0,
|
||||
"jquery/no-slide": 0,
|
||||
"jquery/no-submit": 0,
|
||||
"jquery/no-text": 0,
|
||||
"jquery/no-toggle": 0,
|
||||
"jquery/no-trigger": 0,
|
||||
"jquery/no-trim": 0,
|
||||
"jquery/no-val": 0,
|
||||
"jquery/no-when": 0,
|
||||
"jquery/no-wrap": 0
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
9400
mattermost-plugin/webapp/package-lock.json
generated
9400
mattermost-plugin/webapp/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -24,6 +24,7 @@
|
||||
"@babel/preset-react": "7.13.13",
|
||||
"@babel/preset-typescript": "7.13.0",
|
||||
"@babel/runtime": "7.14.0",
|
||||
"@formatjs/ts-transformer": "3.4.2",
|
||||
"@types/enzyme": "3.10.8",
|
||||
"@types/jest": "26.0.23",
|
||||
"@types/node": "15.6.1",
|
||||
@ -42,17 +43,31 @@
|
||||
"css-loader": "5.2.6",
|
||||
"eslint": "7.27.0",
|
||||
"eslint-import-resolver-webpack": "0.13.1",
|
||||
"eslint-plugin-babel": "^5.3.1",
|
||||
"eslint-plugin-cypress": "2.11.2",
|
||||
"eslint-plugin-header": "3.1.1",
|
||||
"eslint-plugin-import": "2.23.3",
|
||||
"eslint-plugin-jquery": "1.5.1",
|
||||
"eslint-plugin-mattermost": "github:mattermost/eslint-plugin-mattermost#070ce792d105482ffb2b27cfc0b7e78b3d20acee",
|
||||
"eslint-plugin-no-only-tests": "2.4.0",
|
||||
"eslint-plugin-react": "7.23.2",
|
||||
"eslint-plugin-react-hooks": "4.2.0",
|
||||
"file-loader": "6.2.0",
|
||||
"identity-obj-proxy": "3.0.0",
|
||||
"image-webpack-loader": "7.0.1",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-mozjpeg": "^9.0.0",
|
||||
"imagemin-optipng": "^8.0.0",
|
||||
"imagemin-pngquant": "^9.0.2",
|
||||
"imagemin-svgo": "^8.0.0",
|
||||
"imagemin-webp": "^6.0.0",
|
||||
"jest": "27.0.1",
|
||||
"jest-canvas-mock": "2.3.1",
|
||||
"jest-junit": "12.0.0",
|
||||
"sass": "1.25.0",
|
||||
"sass-loader": "11.1.1",
|
||||
"style-loader": "2.0.0",
|
||||
"ts-loader": "9.2.3",
|
||||
"webpack": "5.37.1",
|
||||
"webpack-cli": "4.7.0"
|
||||
},
|
||||
|
||||
28
mattermost-plugin/webapp/src/error_boundary.tsx
Normal file
28
mattermost-plugin/webapp/src/error_boundary.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react'
|
||||
|
||||
type Props = {}
|
||||
type State = {
|
||||
hasError: boolean
|
||||
}
|
||||
|
||||
export default class ErrorBoundary<Props, State> extends React.Component {
|
||||
state = {hasError: false}
|
||||
|
||||
static getDerivedStateFromError(error: Error) {
|
||||
return {hasError: true}
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
console.log(error, errorInfo)
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return <span>Something went wrong.</span>
|
||||
}
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,31 @@
|
||||
import {Store, Action} from 'redux';
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import React, {useEffect} from 'react'
|
||||
import {Store, Action} from 'redux'
|
||||
import {Provider as ReduxProvider} from 'react-redux'
|
||||
|
||||
import {GlobalState} from 'mattermost-redux/types/store';
|
||||
import {GlobalState} from 'mattermost-redux/types/store'
|
||||
|
||||
import manifest from './manifest';
|
||||
const windowAny = (window as any)
|
||||
windowAny.baseURL = '/plugins/focalboard'
|
||||
windowAny.frontendBaseURL = '/plug/focalboard'
|
||||
|
||||
import App from '../../../webapp/src/app'
|
||||
import store from '../../../webapp/src/store'
|
||||
|
||||
import '../../../webapp/src/styles/variables.scss'
|
||||
import '../../../webapp/src/styles/main.scss'
|
||||
import '../../../webapp/src/styles/labels.scss'
|
||||
|
||||
import manifest from './manifest'
|
||||
import ErrorBoundary from './error_boundary'
|
||||
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import {PluginRegistry} from './types/mattermost-webapp';
|
||||
import {PluginRegistry} from './types/mattermost-webapp'
|
||||
|
||||
const focalboardIcon = (
|
||||
<svg
|
||||
className='LogoWithNameIcon Icon'
|
||||
className='Icon'
|
||||
viewBox='0 0 64 64'
|
||||
width='24px'
|
||||
height='24px'
|
||||
@ -25,24 +41,53 @@ const focalboardIcon = (
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
)
|
||||
|
||||
const MainApp = () => {
|
||||
useEffect(() => {
|
||||
document.body.classList.add('focalboard-body')
|
||||
const root = document.getElementById('root')
|
||||
if (root) {
|
||||
root.classList.add('focalboard-plugin-root')
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.classList.remove('focalboard-body')
|
||||
if (root) {
|
||||
root.classList.remove('focalboard-plugin-root')
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ReduxProvider store={store}>
|
||||
<div id='focalboard-app'>
|
||||
<App/>
|
||||
</div>
|
||||
<div id='focalboard-root-portal'/>
|
||||
</ReduxProvider>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
export default class Plugin {
|
||||
channelHeaderButtonId: string;
|
||||
registry: PluginRegistry
|
||||
channelHeaderButtonId?: string
|
||||
registry?: PluginRegistry
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
|
||||
public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
|
||||
this.registry = registry;
|
||||
this.registry = registry
|
||||
this.channelHeaderButtonId = registry.registerChannelHeaderButtonAction(focalboardIcon, () => {
|
||||
const currentChannel = store.getState().entities.channels.currentChannelId;
|
||||
window.open(`${window.location.origin}/plugins/focalboard/workspace/${currentChannel}`);
|
||||
}, '', 'Focalboard Workspace');
|
||||
const currentChannel = store.getState().entities.channels.currentChannelId
|
||||
window.open(`${window.location.origin}/plug/focalboard/workspace/${currentChannel}`)
|
||||
}, '', 'Focalboard Workspace')
|
||||
this.registry.registerCustomRoute('/', MainApp)
|
||||
}
|
||||
|
||||
public uninitialize() {
|
||||
if (this.channelHeaderButtonId) {
|
||||
this.registry.unregisterComponent(this.channelHeaderButtonId);
|
||||
this.registry?.unregisterComponent(this.channelHeaderButtonId)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,4 +98,4 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
window.registerPlugin(manifest.id, new Plugin());
|
||||
window.registerPlugin(manifest.id, new Plugin())
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import manifest, {id, version} from './manifest';
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import manifest, {id, version} from './manifest'
|
||||
|
||||
test('Plugin manifest, id and version are defined', () => {
|
||||
expect(manifest).toBeDefined();
|
||||
expect(manifest.id).toBeDefined();
|
||||
expect(manifest.version).toBeDefined();
|
||||
});
|
||||
expect(manifest).toBeDefined()
|
||||
expect(manifest.id).toBeDefined()
|
||||
expect(manifest.version).toBeDefined()
|
||||
})
|
||||
|
||||
// To ease migration, verify separate export of id and version.
|
||||
test('Plugin id and version are defined', () => {
|
||||
expect(id).toBeDefined();
|
||||
expect(version).toBeDefined();
|
||||
});
|
||||
expect(id).toBeDefined()
|
||||
expect(version).toBeDefined()
|
||||
})
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import manifest from '../../plugin.json';
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import manifest from '../../plugin.json'
|
||||
|
||||
export default manifest;
|
||||
export const id = manifest.id;
|
||||
export const version = manifest.version;
|
||||
export default manifest
|
||||
export const id = manifest.id
|
||||
export const version = manifest.version
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
export interface PluginRegistry {
|
||||
registerPostTypeComponent(typeName: string, component: React.ElementType)
|
||||
registerChannelHeaderButtonAction(icon: React.Element, action: () => void, dropdownText: string, tooltipText: string)
|
||||
registerCustomRoute(route: string, component: React.ElementType)
|
||||
unregisterComponent(componentId: string)
|
||||
registerNeedsTeamRoute(route: string, component: React.ElementType)
|
||||
|
||||
// Add more if needed from https://developers.mattermost.com/extend/plugins/webapp/reference
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import 'mattermost-webapp/tests/setup';
|
||||
import 'mattermost-webapp/tests/setup'
|
||||
|
||||
@ -1,34 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"experimentalDecorators": true,
|
||||
"jsx": "react",
|
||||
"baseUrl": "./src",
|
||||
"typeRoots": [ "./src/types", "./node_modules/@types"],
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"exclude": [
|
||||
"dist",
|
||||
"node_modules",
|
||||
"!node_modules/@types"
|
||||
]
|
||||
"compilerOptions": {
|
||||
"jsx": "react",
|
||||
"target": "es2019",
|
||||
"module": "commonjs",
|
||||
"esModuleInterop": true,
|
||||
"noImplicitAny": true,
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"sourceMap": true,
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"incremental": false,
|
||||
"outDir": "./dist",
|
||||
"moduleResolution": "node",
|
||||
"typeRoots": [ "./src/types", "./node_modules/@types"]
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"../../webapp/src"
|
||||
],
|
||||
"exclude": [
|
||||
".git",
|
||||
"**/node_modules/*",
|
||||
"pack",
|
||||
"dist",
|
||||
"node_modules",
|
||||
"!node_modules/@types"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
const exec = require('child_process').exec;
|
||||
|
||||
const path = require('path');
|
||||
|
||||
const tsTransformer = require('@formatjs/ts-transformer');
|
||||
|
||||
const PLUGIN_ID = require('../plugin.json').id;
|
||||
|
||||
const NPM_TARGET = process.env.npm_lifecycle_event; //eslint-disable-line no-process-env
|
||||
let mode = 'production';
|
||||
let devtool = undefined;
|
||||
let devtool;
|
||||
if (NPM_TARGET === 'debug' || NPM_TARGET === 'debug:watch') {
|
||||
mode = 'development';
|
||||
devtool = 'source-map';
|
||||
@ -49,31 +53,61 @@ module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx|ts|tsx)$/,
|
||||
exclude: /node_modules/,
|
||||
test: /\.tsx?$/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
|
||||
// Babel configuration is in babel.config.js because jest requires it to be there.
|
||||
getCustomTransformers: {
|
||||
before: [
|
||||
tsTransformer.transform({
|
||||
overrideIdFn: '[sha512:contenthash:base64:6]',
|
||||
ast: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
exclude: [/node_modules/],
|
||||
|
||||
},
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
test: /\.html$/,
|
||||
type: 'asset/resource',
|
||||
},
|
||||
{
|
||||
test: /\.s[ac]ss$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(tsx?|js|jsx|mjs|html)$/,
|
||||
use: [
|
||||
],
|
||||
exclude: [/node_modules/],
|
||||
},
|
||||
{
|
||||
test: /\.(png|eot|tiff|svg|woff2|woff|ttf|jpg)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'static',
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sassOptions: {
|
||||
includePaths: ['node_modules/compass-mixins/lib', 'sass'],
|
||||
},
|
||||
},
|
||||
loader: 'image-webpack-loader',
|
||||
options: {},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -4,6 +4,6 @@
|
||||
describe('Load homepage', () => {
|
||||
it('Can load homepage', () => {
|
||||
cy.visit('/');
|
||||
cy.get('div#main-app').should('exist');
|
||||
cy.get('div#focalboard-app').should('exist');
|
||||
});
|
||||
});
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
<link rel="stylesheet" href="{{.BaseURL}}/static/easymde.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main-app">
|
||||
<body class="focalboard-body">
|
||||
<div id="focalboard-app">
|
||||
</div>
|
||||
|
||||
<div id="root-portal">
|
||||
<div id="focalboard-root-portal">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ const App = React.memo((): JSX.Element => {
|
||||
>
|
||||
<DndProvider backend={Utils.isMobile() ? TouchBackend : HTML5Backend}>
|
||||
<FlashMessages milliseconds={2000}/>
|
||||
<Router basename={Utils.getBaseURL()}>
|
||||
<Router basename={Utils.getFrontendBaseURL()}>
|
||||
<div id='frame'>
|
||||
<div id='main'>
|
||||
<Switch>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`components/RootPortal should match snapshot 1`] = `
|
||||
<div
|
||||
id="root-portal"
|
||||
id="focalboard-root-portal"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.BlockIconSelector {
|
||||
.focalboard-body .BlockIconSelector {
|
||||
.octo-icon {
|
||||
display: flex;
|
||||
line-height: 1.1;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CardDetail {
|
||||
.focalboard-body .CardDetail {
|
||||
.title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Comment {
|
||||
.focalboard-body .Comment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CommentsList {
|
||||
.focalboard-body .CommentsList {
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CenterPanel {
|
||||
.focalboard-body .CenterPanel {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
|
||||
.BoardComponent {
|
||||
.focalboard-body .BoardComponent {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CheckboxElement {
|
||||
.focalboard-body .CheckboxElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DividerElement {
|
||||
.focalboard-body .DividerElement {
|
||||
padding-top: 16px;
|
||||
border-bottom: 1px solid rgba(var(--body-color), 0.09);
|
||||
margin-bottom: 17px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ContentBlock {
|
||||
.focalboard-body .ContentBlock {
|
||||
.MenuWrapper,
|
||||
.dnd-handle {
|
||||
display: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Dialog {
|
||||
.focalboard-body .Dialog {
|
||||
&.dialog-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.EmptyCenterPanel {
|
||||
.focalboard-body .EmptyCenterPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.FlashMessages {
|
||||
.focalboard-body .FlashMessages {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Gallery {
|
||||
.focalboard-body .Gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.GalleryCard {
|
||||
.focalboard-body .GalleryCard {
|
||||
position: relative;
|
||||
border: 1px solid rgba(var(--body-color), 0.09);
|
||||
border-radius: var(--default-rad);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Kanban {
|
||||
.focalboard-body .Kanban {
|
||||
overflow: auto;
|
||||
|
||||
.octo-board-header {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.KanbanCard {
|
||||
.focalboard-body .KanbanCard {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.octo-board-column {
|
||||
.focalboard-body .octo-board-column {
|
||||
&.dragover {
|
||||
background-color: rgba(128, 192, 255, 0.15);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/* Markdown Editor */
|
||||
|
||||
.MarkdownEditor {
|
||||
.focalboard-body .MarkdownEditor {
|
||||
cursor: text;
|
||||
/* CodeMirror / SimpleMDE / EasyMDE overrides */
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Modal {
|
||||
.focalboard-body .Modal {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: -240px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ModalWrapper {
|
||||
.focalboard-body .ModalWrapper {
|
||||
position: relative;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.property-link {
|
||||
.focalboard-body .property-link {
|
||||
&.url {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.UserProperty {
|
||||
.focalboard-body .UserProperty {
|
||||
margin-right: 20px;
|
||||
min-width: 120px;
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ describe('components/RootPortal', () => {
|
||||
|
||||
test('should match snapshot', () => {
|
||||
const rootPortalDiv = document.createElement('div')
|
||||
rootPortalDiv.id = 'root-portal'
|
||||
rootPortalDiv.id = 'focalboard-root-portal'
|
||||
|
||||
const {getByText, container} = render(
|
||||
<RootPortal>
|
||||
|
||||
@ -10,7 +10,7 @@ type Props = {
|
||||
|
||||
const RootPortal = React.memo((props: Props): JSX.Element => {
|
||||
const [el] = useState(document.createElement('div'))
|
||||
const rootPortal = document.getElementById('root-portal')
|
||||
const rootPortal = document.getElementById('focalboard-root-portal')
|
||||
|
||||
useEffect(() => {
|
||||
if (rootPortal) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ShareBoardComponent {
|
||||
.focalboard-body .ShareBoardComponent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.RegistrationLink {
|
||||
.focalboard-body .RegistrationLink {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Sidebar {
|
||||
.focalboard-body .Sidebar {
|
||||
flex: 0 0 240px;
|
||||
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SidebarAddBoardMenu {
|
||||
.focalboard-body .SidebarAddBoardMenu {
|
||||
.menu-entry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SidebarBoardItem {
|
||||
.focalboard-body .SidebarBoardItem {
|
||||
.octo-sidebar-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SidebarSettingsMenu {
|
||||
.focalboard-body .SidebarSettingsMenu {
|
||||
.menu-entry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SidebarUserMenu {
|
||||
.focalboard-body .SidebarUserMenu {
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.HorizontalGrip {
|
||||
.focalboard-body .HorizontalGrip {
|
||||
width: 5px;
|
||||
cursor: ew-resize;
|
||||
flex-shrink: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Table {
|
||||
.focalboard-body .Table {
|
||||
.octo-group-header-cell {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.TableRow {
|
||||
.focalboard-body .TableRow {
|
||||
.open-button {
|
||||
display: none;
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.TopBar {
|
||||
.focalboard-body .TopBar {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 25px;
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.FilterComponent {
|
||||
.focalboard-body .FilterComponent {
|
||||
min-width: 430px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.FilterEntry {
|
||||
.focalboard-body .FilterEntry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
> div {
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
.FilterValue {
|
||||
.focalboard-body .FilterValue {
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ViewHeader {
|
||||
.focalboard-body .ViewHeader {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.ViewTitle {
|
||||
>div {
|
||||
.focalboard-body .ViewTitle {
|
||||
> div {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Workspace {
|
||||
.focalboard-body .Workspace {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -20,5 +20,5 @@ ReactDOM.render(
|
||||
<App/>
|
||||
</ReduxProvider>
|
||||
),
|
||||
document.getElementById('main-app'),
|
||||
document.getElementById('focalboard-app'),
|
||||
)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.BoardPage {
|
||||
.focalboard-body .BoardPage {
|
||||
> .error {
|
||||
background-color: rgba(230, 192, 192, 0.9);
|
||||
text-align: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ChangePasswordPage {
|
||||
.focalboard-body .ChangePasswordPage {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
width: 450px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ErrorPage {
|
||||
.focalboard-body .ErrorPage {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
width: 450px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.LoginPage {
|
||||
.focalboard-body .LoginPage {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
width: 450px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.RegisterPage {
|
||||
.focalboard-body .RegisterPage {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 15px;
|
||||
width: 450px;
|
||||
|
||||
@ -1,67 +1,67 @@
|
||||
.propColor0,
|
||||
.propColorDefault {
|
||||
.focalboard-body .propColor0,
|
||||
.focalboard-body .propColorDefault {
|
||||
background-color: var(--prop-default);
|
||||
}
|
||||
|
||||
.propColor1,
|
||||
.propColor1:hover,
|
||||
.propColorGray,
|
||||
.propColorGray:hover {
|
||||
.focalboard-body .propColor1,
|
||||
.focalboard-body .propColor1:hover,
|
||||
.focalboard-body .propColorGray,
|
||||
.focalboard-body .propColorGray:hover {
|
||||
background-color: var(--prop-gray);
|
||||
}
|
||||
|
||||
.propColor2,
|
||||
.propColor2:hover,
|
||||
.propColorBrown,
|
||||
.propColorBrown:hover {
|
||||
.focalboard-body .propColor2,
|
||||
.focalboard-body .propColor2:hover,
|
||||
.focalboard-body .propColorBrown,
|
||||
.focalboard-body .propColorBrown:hover {
|
||||
background-color: var(--prop-brown);
|
||||
}
|
||||
|
||||
.propColor3,
|
||||
.propColor3:hover,
|
||||
.propColorOrange,
|
||||
.propColorOrange:hover {
|
||||
.focalboard-body .propColor3,
|
||||
.focalboard-body .propColor3:hover,
|
||||
.focalboard-body .propColorOrange,
|
||||
.focalboard-body .propColorOrange:hover {
|
||||
background-color: var(--prop-orange);
|
||||
}
|
||||
|
||||
.propColor4,
|
||||
.propColor4:hover,
|
||||
.propColorYellow,
|
||||
.propColorYellow:hover {
|
||||
.focalboard-body .propColor4,
|
||||
.focalboard-body .propColor4:hover,
|
||||
.focalboard-body .propColorYellow,
|
||||
.focalboard-body .propColorYellow:hover {
|
||||
background-color: var(--prop-yellow);
|
||||
}
|
||||
|
||||
.propColor5,
|
||||
.propColor5:hover,
|
||||
.propColorGreen,
|
||||
.propColorGreen:hover {
|
||||
.focalboard-body .propColor5,
|
||||
.focalboard-body .propColor5:hover,
|
||||
.focalboard-body .propColorGreen,
|
||||
.focalboard-body .propColorGreen:hover {
|
||||
background-color: var(--prop-green);
|
||||
}
|
||||
|
||||
.propColor6,
|
||||
.propColor6:hover,
|
||||
.propColorBlue,
|
||||
.propColorBlue:hover {
|
||||
.focalboard-body .propColor6,
|
||||
.focalboard-body .propColor6:hover,
|
||||
.focalboard-body .propColorBlue,
|
||||
.focalboard-body .propColorBlue:hover {
|
||||
background-color: var(--prop-blue);
|
||||
}
|
||||
|
||||
.propColor7,
|
||||
.propColor7:hover,
|
||||
.propColorPurple,
|
||||
.propColorPurple:hover {
|
||||
.focalboard-body .propColor7,
|
||||
.focalboard-body .propColor7:hover,
|
||||
.focalboard-body .propColorPurple,
|
||||
.focalboard-body .propColorPurple:hover {
|
||||
background-color: var(--prop-purple);
|
||||
}
|
||||
|
||||
.propColor8,
|
||||
.propColor8:hover,
|
||||
.propColorPink,
|
||||
.propColorPink:hover {
|
||||
.focalboard-body .propColor8,
|
||||
.focalboard-body .propColor8:hover,
|
||||
.focalboard-body .propColorPink,
|
||||
.focalboard-body .propColorPink:hover {
|
||||
background-color: var(--prop-pink);
|
||||
}
|
||||
|
||||
.propColor9,
|
||||
.propColor9:hover,
|
||||
.propColorRed,
|
||||
.propColorRed:hover {
|
||||
.focalboard-body .propColor9,
|
||||
.focalboard-body .propColor9:hover,
|
||||
.focalboard-body .propColorRed,
|
||||
.focalboard-body .propColorRed:hover {
|
||||
background-color: var(--prop-red);
|
||||
}
|
||||
|
||||
@ -1,29 +1,9 @@
|
||||
@import "compass-icons";
|
||||
|
||||
@font-face {
|
||||
font-family: 'compass-icons';
|
||||
src: url('../fonts/compass-icons/compass-icons.eot?45182295');
|
||||
src: url('../fonts/compass-icons/compass-icons.eot?45182295#iefix') format('embedded-opentype'),
|
||||
url('../fonts/compass-icons/compass-icons.woff2?45182295') format('woff2'),
|
||||
url('../fonts/compass-icons/compass-icons.woff?45182295') format('woff'),
|
||||
url('../fonts/compass-icons/compass-icons.ttf?45182295') format('truetype'),
|
||||
url('../fonts/compass-icons/compass-icons.svg?45182295#compass-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none; /* Likely future */
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
.focalboard-body, #focalboard-app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -31,27 +11,55 @@ body {
|
||||
height: 100%;
|
||||
color: rgb(var(--body-color));
|
||||
background: rgb(var(--main-bg));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-size: 100%; /* Normalize */
|
||||
.focalboard-plugin-root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: rgb(var(--main-bg));
|
||||
color: rgb(var(--body-color));
|
||||
.focalboard-body {
|
||||
@font-face {
|
||||
font-family: 'compass-icons';
|
||||
src: url('../fonts/compass-icons/compass-icons.eot?45182295');
|
||||
src: url('../fonts/compass-icons/compass-icons.eot?45182295#iefix') format('embedded-opentype'),
|
||||
url('../fonts/compass-icons/compass-icons.woff2?45182295') format('woff2'),
|
||||
url('../fonts/compass-icons/compass-icons.woff?45182295') format('woff'),
|
||||
url('../fonts/compass-icons/compass-icons.ttf?45182295') format('truetype'),
|
||||
url('../fonts/compass-icons/compass-icons.svg?45182295#compass-icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
-webkit-user-select: auto; /* Chrome all / Safari all */
|
||||
-moz-user-select: auto; /* Firefox all */
|
||||
-ms-user-select: auto; /* IE 10+ */
|
||||
user-select: auto; /* Likely future */
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none; /* Likely future */
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font-size: 100%; /* Normalize */
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: rgb(var(--main-bg));
|
||||
color: rgb(var(--body-color));
|
||||
|
||||
-webkit-user-select: auto; /* Chrome all / Safari all */
|
||||
-moz-user-select: auto; /* Firefox all */
|
||||
-ms-user-select: auto; /* IE 10+ */
|
||||
user-select: auto; /* Likely future */
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
@ -59,178 +67,178 @@ body {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
--cursor-color: rgb(var(--body-color));
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--link-color);
|
||||
|
||||
&:visited {
|
||||
color: var(--link-visited-color);
|
||||
&:visited {
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(192, 192, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(192, 192, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: rgba(var(--body-color), 0.09);
|
||||
background-color: rgba(var(--body-color), 0.09);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
&.style--none {
|
||||
background: transparent;
|
||||
hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: rgba(var(--body-color), 0.09);
|
||||
background-color: rgba(var(--body-color), 0.09);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-loading {
|
||||
margin: 50px auto;
|
||||
}
|
||||
button {
|
||||
&.style--none {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
.page-loading {
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
/* App frame */
|
||||
.title,
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#main-app {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
/* App frame */
|
||||
|
||||
#main-app #frame,
|
||||
#main-app #main,
|
||||
#main-app .BoardPage {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
#root {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Main app */
|
||||
#frame,
|
||||
#main,
|
||||
.BoardPage {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dragover {
|
||||
background-color: rgba(128, 192, 255, 0.4);
|
||||
}
|
||||
/* Main app */
|
||||
|
||||
.octo-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.dragover {
|
||||
background-color: rgba(128, 192, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.octo-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.octo-icon {
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji,
|
||||
"Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
|
||||
line-height: 1.5em;
|
||||
align-self: baseline;
|
||||
overflow: visible;
|
||||
}
|
||||
/* Icons */
|
||||
|
||||
.octo-icontitle {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.octo-icon {
|
||||
font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji,
|
||||
"Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
|
||||
line-height: 1.5em;
|
||||
align-self: baseline;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*-- Property list --*/
|
||||
.octo-icontitle {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.octo-propertyvalue {
|
||||
color: rgb(var(--body-color));
|
||||
padding: 0 5px;
|
||||
&.empty {
|
||||
/*-- Property list --*/
|
||||
|
||||
.octo-propertyvalue {
|
||||
color: rgb(var(--body-color));
|
||||
padding: 0 5px;
|
||||
&.empty {
|
||||
color: rgba(var(--body-color), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/*-- Editable --*/
|
||||
|
||||
.Editable {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.Editable.active {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.octo-placeholder {
|
||||
color: rgba(var(--body-color), 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
/*-- Editable --*/
|
||||
|
||||
.Editable {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.Editable.active {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.octo-placeholder {
|
||||
color: rgba(var(--body-color), 0.4);
|
||||
}
|
||||
|
||||
[contentEditable="true"] {
|
||||
-webkit-user-select: auto; /* Chrome all / Safari all */
|
||||
-moz-user-select: auto; /* Firefox all */
|
||||
-ms-user-select: auto; /* IE 10+ */
|
||||
user-select: auto; /* Likely future */
|
||||
}
|
||||
|
||||
[contentEditable="true"]:empty:before {
|
||||
content: attr(placeholder);
|
||||
display: block;
|
||||
color: rgba(var(--body-color), 0.4);
|
||||
}
|
||||
|
||||
.octo-propertyvalue.Editable.active,
|
||||
.octo-table-cell .Editable.active {
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
||||
}
|
||||
|
||||
.octo-block img {
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
margin: 5px 0;
|
||||
object-fit: contain;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.octo-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.octo-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: 975px) {
|
||||
padding-right: 10px;
|
||||
[contentEditable="true"] {
|
||||
-webkit-user-select: auto; /* Chrome all / Safari all */
|
||||
-moz-user-select: auto; /* Firefox all */
|
||||
-ms-user-select: auto; /* IE 10+ */
|
||||
user-select: auto; /* Likely future */
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: 1 1 auto;
|
||||
[contentEditable="true"]:empty:before {
|
||||
content: attr(placeholder);
|
||||
display: block;
|
||||
color: rgba(var(--body-color), 0.4);
|
||||
}
|
||||
> .octo-block-margin {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.octo-block-margin {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media not screen and (max-width: 975px) {
|
||||
width: 48px;
|
||||
|
||||
.octo-propertyvalue.Editable.active,
|
||||
.octo-table-cell .Editable.active {
|
||||
border-radius: 3px;
|
||||
box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
|
||||
rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
|
||||
}
|
||||
|
||||
.octo-block img {
|
||||
max-width: 500px;
|
||||
max-height: 500px;
|
||||
margin: 5px 0;
|
||||
object-fit: contain;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.octo-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.octo-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: 975px) {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
> * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
> .octo-block-margin {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.octo-block-margin {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media not screen and (max-width: 975px) {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -332,6 +332,18 @@ class Utils {
|
||||
return baseURL
|
||||
}
|
||||
|
||||
static getFrontendBaseURL(absolute?: boolean): string {
|
||||
let frontendBaseURL = (window as any).frontendBaseURL || this.getBaseURL(absolute)
|
||||
frontendBaseURL = frontendBaseURL.replace(/\/+$/, '')
|
||||
if (frontendBaseURL.indexOf('/') === 0) {
|
||||
frontendBaseURL = frontendBaseURL.slice(1)
|
||||
}
|
||||
if (absolute) {
|
||||
return window.location.origin + '/' + frontendBaseURL
|
||||
}
|
||||
return frontendBaseURL
|
||||
}
|
||||
|
||||
static buildURL(path: string, absolute?: boolean): string {
|
||||
const baseURL = this.getBaseURL()
|
||||
let finalPath = baseURL + path
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Button {
|
||||
.focalboard-body .Button {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ButtonWithMenu {
|
||||
.focalboard-body .ButtonWithMenu {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
text-align: center;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.IconButton {
|
||||
.focalboard-body .IconButton {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.Editable {
|
||||
.focalboard-body .Editable {
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.EditableDayPicker {
|
||||
.focalboard-body .EditableDayPicker {
|
||||
.DayPickerInput {
|
||||
input {
|
||||
cursor: text;
|
||||
@ -36,4 +36,4 @@
|
||||
.DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
|
||||
background-color: rgba(var(--body-color), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.EmojiPicker {
|
||||
.focalboard-body .EmojiPicker {
|
||||
.emoji-mart {
|
||||
color: rgb(var(--body-color));
|
||||
background: rgb(var(--main-bg));
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.AddIcon {
|
||||
.focalboard-body .AddIcon {
|
||||
color: rgb(var(--body-color), 0.5);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@use './standardIcon.scss';
|
||||
|
||||
.BoardIcon {
|
||||
.focalboard-body .BoardIcon {
|
||||
@extend .StandardIcon;
|
||||
stroke-width: 8px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@use './standardIcon.scss';
|
||||
|
||||
.CardIcon {
|
||||
.focalboard-body .CardIcon {
|
||||
@extend .StandardIcon;
|
||||
stroke-width: 6px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CheckIcon {
|
||||
.focalboard-body .CheckIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.CloseIcon {
|
||||
.focalboard-body .CloseIcon {
|
||||
color: rgb(var(--body-color), 0.5);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DeleteIcon {
|
||||
.focalboard-body .DeleteIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DisclosureTriangleIcon {
|
||||
.focalboard-body .DisclosureTriangleIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DividerIcon {
|
||||
.focalboard-body .DividerIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DotIcon {
|
||||
.focalboard-body .DotIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DropdownIcon {
|
||||
.focalboard-body .DropdownIcon {
|
||||
color: rgb(var(--body-color));
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.DuplicateIcon {
|
||||
.focalboard-body .DuplicateIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.EditIcon {
|
||||
.focalboard-body .EditIcon {
|
||||
fill: rgba(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.EmojiIcon {
|
||||
.focalboard-body .EmojiIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.GalleryIcon {
|
||||
.focalboard-body .GalleryIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.GripIcon {
|
||||
.focalboard-body .GripIcon {
|
||||
fill: rgb(var(--body-color), 0.5);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.HamburgerIcon {
|
||||
.focalboard-body .HamburgerIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.HelpIcon {
|
||||
.focalboard-body .HelpIcon {
|
||||
fill: rgba(var(--main-fg), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.HideIcon {
|
||||
.focalboard-body .HideIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.HideSidebarIcon {
|
||||
.focalboard-body .HideSidebarIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ImageIcon {
|
||||
.focalboard-body .ImageIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.LogoWithNameIcon {
|
||||
.focalboard-body .LogoWithNameIcon {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.LogoWithNameWhiteIcon {
|
||||
.focalboard-body .LogoWithNameWhiteIcon {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.OptionsIcon {
|
||||
.focalboard-body .OptionsIcon {
|
||||
color: rgba(var(--body-color), 0.5);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ShowIcon {
|
||||
.focalboard-body .ShowIcon {
|
||||
fill: rgba(var(--body-color), 0.7);
|
||||
stroke: none;
|
||||
width: 24px;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.ShowSidebarIcon {
|
||||
.focalboard-body .ShowSidebarIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 6px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SortDownIcon {
|
||||
.focalboard-body .SortDownIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.SortUpIcon {
|
||||
.focalboard-body .SortUpIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 8px;
|
||||
fill: none;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.StandardIcon {
|
||||
.focalboard-body .StandardIcon {
|
||||
stroke: rgba(var(--body-color), 0.5);
|
||||
stroke-width: 4px;
|
||||
fill: none;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user