Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-02 19:45:51 +01:00
Code Issues Packages Projects Releases Activity

Revert introduction of tailwind (#2109)

Browse Source 
After many days invested in making tailwind work in the SCM-Manager environment as well as a long discussion last week, we have decided not to move further with tailwind, but still keep adding new, independent modules for frontend components. Tailwind simply overcomplicated our build pipeline because bulma was already part of the api and the two were incompatible on several occasions. Styling will continue to be guided by bulma and all parts related to tailwind are removed. We therefore continue the trend of focusing on improving our existing stack rather than adding further complexity.
This commit is contained in:
Konstantin Schaper
2022-08-29 10:23:40 +02:00
committed by GitHub
parent 3e236fe5ac
commit 4b92959b9c
32 changed files with 28 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
scm-ui/ui-buttons/.storybook/index.css
View File

@@ -1,27 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

18
scm-ui/ui-buttons/.storybook/main.js
View File

@@ -76,24 +76,6 @@ module.exports = {
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
});
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: {
tailwindcss: { config: require("./tailwind.config") },
autoprefixer: {},
},
},
},
},
],
include: path.resolve(__dirname, "../"),
});
// the html-webpack-plugin adds the generated css and js files to the iframe,
// which overrides our manually loaded css files.
// So we use a custom plugin which uses a hook of html-webpack-plugin

2
scm-ui/ui-buttons/.storybook/preview.js
View File

@@ -22,8 +22,6 @@
* SOFTWARE.
*/
import "./index.css";
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import { withI18next } from "storybook-addon-i18next";

33
scm-ui/ui-buttons/.storybook/tailwind.config.js
View File

@@ -1,33 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
const path = require("path");
module.exports = {
presets: [
// eslint-disable-next-line global-require,import/no-extraneous-dependencies
require("@scm-manager/ui-scripts/src/tailwind.config"),
],
content: [path.join(__dirname, "../{src,docs}/**/*.{tsx,mdx}")],
};

3
scm-ui/ui-buttons/README.md Normal file
View File

@@ -0,0 +1,3 @@
## Bulma
See Bulma element: https://bulma.io/documentation/elements/button

8
scm-ui/ui-buttons/docs/introduction.stories.mdx
View File

@@ -35,22 +35,22 @@ There are four variants available to each of the three button types, varying in
<tbody>
<tr>
<td>Very High</td>
<td><Button variant="signal" className="w-full">Signal</Button></td>
<td><Button variant="signal">Signal</Button></td>
<td>Destructive actions</td>
</tr>
<tr>
<td>High</td>
<td><Button variant="primary" className="w-full">Primary</Button></td>
<td><Button variant="primary">Primary</Button></td>
<td>Form submit</td>
</tr>
<tr>
<td>Normal</td>
<td><Button variant="secondary" className="w-full">Secondary</Button></td>
<td><Button variant="secondary">Secondary</Button></td>
<td>Cancel action in dialog</td>
</tr>
<tr>
<td>Low</td>
<td><Button variant="tertiary" className="w-full">Tertiary</Button></td>
<td><Button variant="tertiary">Tertiary</Button></td>
<td>Circumstantially relevant action on page with many actionable elements</td>
</tr>
</tbody>

6
scm-ui/ui-buttons/docs/usage.stories.mdx
View File

@@ -11,10 +11,10 @@ Aborting is always the secondary action, confirmation always the primary.
Focus is always on the cancelling action.
<Story name="Confirmation Dialog">
<div className="max-w-2xl rounded border p-4">
<h4 className="mb-2 font-bold">Delete User</h4>
<div>
<h4>Delete User</h4>
<p>Do you really want to delete this user ?</p>
<div className="flex justify-end gap-2">
<div>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Delete</Button>
</div>

7
scm-ui/ui-buttons/package.json
View File

@@ -17,7 +17,7 @@
"build-storybook": "build-storybook",
"image-snapshots": "jest \"image-snapshot.test.ts\"",
"a11y-check": "jest \"a11y.test.ts\"",
"depcheck": "depcheck --ignores=@scm-manager/prettier-config,@scm-manager/tsconfig,@babel/core,sass-loader,autoprefixer,babel-loader,postcss-loader,tailwindcss,storybook-addon-*,@storybook/*,webpack"
"depcheck": "depcheck --ignores=@scm-manager/prettier-config,@scm-manager/tsconfig,@babel/core,sass-loader,autoprefixer,babel-loader,postcss-loader,storybook-addon-*,@storybook/*,webpack"
},
"peerDependencies": {
"react": "^17.0.1",
@@ -26,8 +26,6 @@
"classnames": "^2.2.6"
},
"devDependencies": {
"@scm-manager/ui-scripts": "2.38.2-SNAPSHOT",
"@scm-manager/ui-styles": "2.38.2-SNAPSHOT",
"@scm-manager/ui-api": "2.38.2-SNAPSHOT",
"@scm-manager/eslint-config": "^2.16.0",
"@babel/core": "^7.17.8",
@@ -53,7 +51,6 @@
"babel-loader": "^8.2.4",
"postcss": "^8.4.12",
"postcss-loader": "^6.2.1",
"tailwindcss": "^3.0.23",
"webpack": "5",
"tsup": "^6.1.2",
"mini-css-extract-plugin": "^1.6.2",
@@ -82,4 +79,4 @@
"publishConfig": {
"access": "restricted"
}
}
}

30
scm-ui/ui-buttons/postcss.config.js
View File

@@ -1,30 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

BIN
scm-ui/ui-buttons/src/__image_snapshots__/image-snapshot-test-ts-image-snapshots-tests-dark-states-1-snap.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
scm-ui/ui-buttons/src/__image_snapshots__/image-snapshot-test-ts-image-snapshots-tests-high-contrast-states-1-snap.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
scm-ui/ui-buttons/src/__image_snapshots__/image-snapshot-test-ts-image-snapshots-tests-light-states-1-snap.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

6
scm-ui/ui-buttons/src/button.test.stories.mdx
View File

@@ -13,7 +13,7 @@ import { Button, ButtonVariantList } from "./button";
default: 'light',
},
}}>
<table className="border-separate border-spacing-4">
<table>
<tr>
<th>STATE</th>
{ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
@@ -36,7 +36,7 @@ import { Button, ButtonVariantList } from "./button";
default: 'dark',
},
}}>
<table className="border-separate border-spacing-4">
<table>
<tr>
<th>STATE</th>
{ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
@@ -59,7 +59,7 @@ import { Button, ButtonVariantList } from "./button";
default: 'highcontrast',
},
}}>
<table className="border-separate border-spacing-4">
<table>
<tr>
<th>STATE</th>
{ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}

30
scm-ui/ui-buttons/src/button.tsx
View File

@@ -37,32 +37,12 @@ export const ButtonVariantList = Object.values(ButtonVariants);
type ButtonVariant = typeof ButtonVariants[keyof typeof ButtonVariants];
const BASE_BUTTON_CLASSES = classNames(
"inline-block whitespace-nowrap rounded border py-2 px-6 text-center font-semibold focus:z-10 focus:outline focus:outline-offset-2 focus:outline-purple-500 disabled:cursor-not-allowed"
);
const DEFAULT_BUTTON_CLASSES = classNames(
"border-gray-200 hover:border-gray-400 active:shadow-inner disabled:hover:border-gray-200 disabled:active:shadow-none"
);
const PRIMARY_BUTTON_CLASSES = classNames(
"border-transparent bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active disabled:bg-primary-disabled disabled:text-primary-disabled-contrast "
);
const SECONDARY_BUTTON_CLASSES = classNames(
"border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled"
);
const TERTIARY_BUTTON_CLASSES = classNames(
"border-transparent text-primary hover:text-primary-hover active:text-primary-active disabled:text-primary-disabled"
);
const SIGNAL_BUTTON_CLASSES = classNames(
"border-transparent bg-signal text-signal-contrast hover:bg-signal-hover hover:text-signal-hover-contrast active:bg-signal-active active:text-signal-active-contrast disabled:bg-signal-disabled disabled:text-signal-disabled-contrast"
);
const createButtonClasses = (variant?: ButtonVariant) =>
classNames(BASE_BUTTON_CLASSES, {
[DEFAULT_BUTTON_CLASSES]: !variant,
[PRIMARY_BUTTON_CLASSES]: variant === "primary",
[SECONDARY_BUTTON_CLASSES]: variant === "secondary",
[TERTIARY_BUTTON_CLASSES]: variant === "tertiary",
[SIGNAL_BUTTON_CLASSES]: variant === "signal",
classNames("button", {
"is-primary": variant === "primary",
"is-primary is-outlined": variant === "secondary",
"is-primary is-inverted": variant === "tertiary",
"is-warning": variant === "signal",
});
type BaseButtonProps = {

26
scm-ui/ui-buttons/src/index.css
View File

@@ -1,26 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@tailwind components;
@tailwind utilities;

2
scm-ui/ui-buttons/src/index.ts
View File

@@ -22,6 +22,4 @@
* SOFTWARE.
*/
import "./index.css";
export { Button, LinkButton, ExternalLinkButton, ButtonVariants } from "./button";

34
scm-ui/ui-buttons/tailwind.config.js
View File

@@ -1,34 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
const path = require("path");
module.exports = {
presets: [
// eslint-disable-next-line global-require,import/no-extraneous-dependencies
require("@scm-manager/ui-styles/src/tailwind.config.preset"),
],
content: [path.join(__dirname, "src/**/*.tsx")],
important: true,
};

4
scm-ui/ui-scripts/package.json
View File

@@ -25,13 +25,11 @@
"webpack": "^5.60.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.12",
"postcss-loader": "^6.2.1",
"autoprefixer": "^10.4.4"
},
"devDependencies": {
"@scm-manager/ui-styles": "2.38.2-SNAPSHOT",
"@scm-manager/babel-preset": "^2.13.1",
"@scm-manager/eslint-config": "^2.16.0",
"@scm-manager/prettier-config": "^2.10.1",
@@ -46,4 +44,4 @@
"publishConfig": {
"access": "public"
}
}
}

41
scm-ui/ui-scripts/src/tailwind.config.js
View File

@@ -1,41 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
const path = require("path");
const root = path.resolve(process.cwd(), "scm-ui");
const sizes = [0, 1, 2, 3, 4, 5, 6, "auto"];
const helpers = ["m", "p"];
const variants = ["", "x", "y", "t", "r", "l", "b"];
const bulmaHelpers = helpers
.map((helper) => sizes.map((size) => variants.map((variant) => `${helper}${variant}-${size}`)))
.flat(3);
module.exports = {
// eslint-disable-next-line global-require
presets: [require("@scm-manager/ui-styles/src/tailwind.config.preset")],
content: [path.join(root, "ui-webapp", "src", "**", "*.tsx")],
safelist: bulmaHelpers,
};

27
scm-ui/ui-scripts/src/tailwind.css
View File

@@ -1,27 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

43
scm-ui/ui-scripts/src/webpack.config.js
View File

@@ -33,13 +33,7 @@ const isDevelopment = process.env.NODE_ENV === "development";
const root = path.resolve(process.cwd(), "..");
const babelPlugins = [];
const webpackPlugins = [
new MiniCssExtractPlugin({
filename: "webapp.tailwind.css",
chunkFilename: "webapp.tailwind.css",
ignoreOrder: false,
}),
];
const webpackPlugins = [];
if (process.env.ANALYZE_BUNDLES === "true") {
// it is ok to use require here, because we want to load the package conditionally
@@ -87,8 +81,7 @@ module.exports = [
path.resolve(__dirname, "webpack-public-path.js"),
// enable async/await
"regenerator-runtime/runtime",
"./ui-webapp/src/index.tsx",
"./ui-scripts/src/tailwind.css",
"./ui-webapp/src/index.tsx"
],
},
devtool: "eval-cheap-module-source-map",
@@ -108,40 +101,8 @@ module.exports = [
},
],
},
{
test: /tailwind\.css$/i,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {
importLoaders: 1,
},
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"tailwindcss",
{
config: path.join(root, "ui-scripts", "src", "tailwind.config.js"),
},
],
["autoprefixer", {}],
],
},
},
},
],
},
{
test: /\.(css|scss|sass)$/i,
exclude: /tailwind\.css$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",

17
scm-ui/ui-styles/src/dark.scss
View File

@@ -229,23 +229,6 @@ $danger-25: scale-color($danger, $lightness: -75%);
--diff-code-delete-edit-background-color: #{desaturate(#000, 20%)};
--diff-code-selected-background-color: #{desaturate(#fffce0, 20%)};
--diff-omit-gutter-line-color: #cb2a1d;
// Tailwind
--scm-primary-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-hover-color: #{darken($primary, 5%)};
--scm-primary-hover-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-active-color: #{darken($primary, 10%)};
--scm-primary-active-contrast-color: #{lighten($text-strong, 2.5%)};
--scm-primary-disabled-color: #{rgba($primary, 0.5)};
--scm-primary-disabled-contrast-color: #{rgba(lighten($text-strong, 2.5%), 0.5)};
--scm-warning-contrast-color: #88550D;
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 10%)};
--scm-warning-active-color: #{darken($warning, 20%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #{rgba($warning, 0.5)};
--scm-warning-disabled-contrast-color: #{rgba(0,0,0,0.7)};
}
.menu-list {

17
scm-ui/ui-styles/src/highcontrast.scss
View File

@@ -127,23 +127,6 @@ $tooltip-color: $scheme-main;
--diff-code-delete-edit-background-color: #000;
--diff-code-selected-background-color: #fffce0;
--diff-omit-gutter-line-color: #cb2a1d;
// Tailwind
--scm-primary-contrast-color: #{$black-ter};
--scm-primary-hover-color: #{darken($primary, 5%)};
--scm-primary-hover-contrast-color: #{$black-ter};
--scm-primary-active-color: #{darken($primary, 10%)};
--scm-primary-active-contrast-color: #{$black-ter};
--scm-primary-disabled-color: #006970;
--scm-primary-disabled-contrast-color: #{$black-ter};
--scm-warning-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 5%)};
--scm-warning-active-color: #{darken($warning, 10%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #{darken($warning, 50%)};
--scm-warning-disabled-contrast-color: #{rgba(0,0,0,0.7)};
}
.button {

17
scm-ui/ui-styles/src/light.scss
View File

@@ -78,23 +78,6 @@ $popover-background-color: $grey-light;
--sh-selected-color: #{$warning-25};
--sh-highlight-background: #f5f5f5;
--sh-highlight-accent: #99d8f3;
// Tailwind
--scm-primary-contrast-color: #{$white};
--scm-primary-hover-color: #{darken($primary, 10%)};
--scm-primary-hover-contrast-color: #{$white};
--scm-primary-active-color: #{darken($primary, 20%)};
--scm-primary-active-contrast-color: #{$white};
--scm-primary-disabled-color: #bff3f7;
--scm-primary-disabled-contrast-color: #{$white};
--scm-warning-contrast-color: #88550D;
--scm-warning-hover-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-hover-color: #{darken($warning, 10%)};
--scm-warning-active-color: #{darken($warning, 20%)};
--scm-warning-active-contrast-color: #{rgba(0,0,0,0.7)};
--scm-warning-disabled-color: #fff6d5;
--scm-warning-disabled-contrast-color: #e1d4c2;
}
.button {

55
scm-ui/ui-styles/src/tailwind.config.preset.js
View File

@@ -1,55 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: "var(--scm-primary-color)",
contrast: "var(--scm-primary-contrast-color)",
hover: "var(--scm-primary-hover-color)",
"hover-contrast": "var(--scm-primary-hover-contrast-color)",
active: "var(--scm-primary-active-color)",
"active-contrast": "var(--scm-primary-active-contrast-color)",
disabled: "var(--scm-primary-disabled-color)",
"disabled-contrast": "var(--scm-primary-disabled-contrast-color)",
},
signal: {
DEFAULT: "var(--scm-warning-color)",
contrast: "var(--scm-warning-contrast-color)",
hover: "var(--scm-warning-hover-color)",
"hover-contrast": "var(--scm-warning-hover-contrast-color)",
active: "var(--scm-warning-active-color)",
"active-contrast": "var(--scm-warning-active-contrast-color)",
disabled: "var(--scm-warning-disabled-color)",
"disabled-contrast": "var(--scm-warning-disabled-contrast-color)",
},
},
},
},
important: true,
corePlugins: {
preflight: false,
}
};

16
scm-ui/ui-styles/src/utils/_post.scss
View File

@@ -21,21 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
@import "bulma/sass/utilities/_all";
@import "bulma/sass/base/_all";
@import "bulma/sass/elements/_all";
@import "bulma/sass/form/_all";
@import "bulma/sass/components/_all";
@import "bulma/sass/grid/_all";
@import "bulma/sass/helpers/color";
@import "bulma/sass/helpers/flexbox";
@import "bulma/sass/helpers/float";
@import "bulma/sass/helpers/other";
@import "bulma/sass/helpers/overflow";
@import "bulma/sass/helpers/position";
@import "bulma/sass/helpers/typography";
@import "bulma/sass/helpers/visibility";
@import "bulma/sass/layout/_all";
@import "bulma/bulma";
@import "../variables/_derived.scss";
@import "bulma-popover/css/bulma-popover";
@import "../components/_main.scss";

6
scm-ui/ui-webapp/package.json
View File

@@ -10,7 +10,6 @@
"@scm-manager/ui-modules": "2.38.2-SNAPSHOT",
"@scm-manager/ui-syntaxhighlighting": "2.38.2-SNAPSHOT",
"@scm-manager/ui-text": "2.38.2-SNAPSHOT",
"@scm-manager/ui-buttons": "2.38.2-SNAPSHOT",
"@scm-manager/ui-legacy": "2.38.2-SNAPSHOT",
"classnames": "^2.2.5",
"history": "^4.10.1",
@@ -50,8 +49,7 @@
"@types/styled-components": "^5.1.25",
"@types/systemjs": "^0.20.6",
"fetch-mock": "^7.5.1",
"react-test-renderer": "^17.0.1",
"tailwindcss": "^3.0.23"
"react-test-renderer": "^17.0.1"
},
"babel": {
"presets": [
@@ -68,4 +66,4 @@
"publishConfig": {
"access": "public"
}
}
}

1
scm-ui/ui-webapp/public/index.mustache
View File

@@ -44,7 +44,6 @@
}
document.head.appendChild(linkElement);
</script>
<link rel="stylesheet" href="{{ contextPath }}/styles.bundle.css">
</head>
<body>
<noscript>

3
scm-ui/ui-webapp/src/index.tsx
View File

@@ -37,9 +37,6 @@ import ChangesetShortLink from "./repos/components/changesets/ChangesetShortLink
import "./tokenExpired";
import { ApiProvider } from "@scm-manager/ui-api";
// eslint-disable-next-line no-restricted-imports
import "@scm-manager/ui-buttons/build/index.css";
binder.bind<extensionPoints.ChangesetDescriptionTokens>("changeset.description.tokens", ChangesetShortLink);
const root = document.getElementById("root");

2
scm-webapp/src/main/java/sonia/scm/PushStateDispatcherProvider.java
View File

@@ -40,7 +40,7 @@ import javax.inject.Provider;
public class PushStateDispatcherProvider implements Provider<PushStateDispatcher> {
@VisibleForTesting
public static final String PROPERTY_TARGET = "sonia.scm.ui.proxy";
static final String PROPERTY_TARGET = "sonia.scm.ui.proxy";
private Provider<TemplatingPushStateDispatcher> templatingPushStateDispatcherProvider;

111
scm-webapp/src/main/java/sonia/scm/web/tailwind/StylesServlet.java
View File

@@ -1,111 +0,0 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
package sonia.scm.web.tailwind;
import com.github.sdorra.webresources.CacheControl;
import com.github.sdorra.webresources.WebResourceSender;
import com.google.common.io.ByteStreams;
import com.google.inject.Inject;
import com.google.inject.Singleton;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import sonia.scm.filter.WebElement;
import sonia.scm.plugin.PluginLoader;
import sonia.scm.plugin.UberWebResourceLoader;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import static sonia.scm.PushStateDispatcherProvider.PROPERTY_TARGET;
@Singleton
@WebElement(value = "/styles.bundle.css")
public class StylesServlet extends HttpServlet {
private static final Logger LOG = LoggerFactory.getLogger(StylesServlet.class);
private final UberWebResourceLoader webResourceLoader;
private final String target = System.getProperty(PROPERTY_TARGET);
private final WebResourceSender sender = WebResourceSender.create()
.withGZIP()
.withGZIPMinLength(512)
.withBufferSize(16384)
.withCacheControl(CacheControl.create().noCache());
@Inject
public StylesServlet(PluginLoader pluginLoader) {
this.webResourceLoader = pluginLoader.getUberWebResourceLoader();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
URL url = webResourceLoader.getResource("/assets/webapp.tailwind.css");
if (url != null) {
// TODO: Merge css
sender.resource(url).get(request, response);
} else {
getLocally(createProxyUrl("/assets/webapp.tailwind.css"), request, response);
}
} catch (IOException ex) {
LOG.error("Error on getting the tailwind stylesheet", ex);
response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
}
}
private void getLocally(URL url, HttpServletRequest request, HttpServletResponse response) throws IOException {
HttpURLConnection connection = openConnection(url);
connection.setRequestMethod(request.getMethod());
int responseCode = connection.getResponseCode();
response.setStatus(responseCode);
try (InputStream input = getConnectionInput(connection); OutputStream output = response.getOutputStream()) {
ByteStreams.copy(input, output);
}
}
private InputStream getConnectionInput(HttpURLConnection connection) throws IOException {
if (connection.getErrorStream() != null) {
return connection.getErrorStream();
}
return connection.getInputStream();
}
private URL createProxyUrl(String uri) throws MalformedURLException {
return new URL(target + uri);
}
private static HttpURLConnection openConnection(URL url) throws IOException {
return (HttpURLConnection) url.openConnection();
}
}

2
yarn.lock
View File

@@ -17973,7 +17973,7 @@ table@^6.0.9:
string-width "^4.2.3"
strip-ansi "^6.0.1"
tailwindcss@^3.0.23, tailwindcss@^3.1.3:
tailwindcss@^3.1.3:
version "3.1.6"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.6.tgz#bcb719357776c39e6376a8d84e9834b2b19a49f1"
integrity sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==