diff --git a/apps/react-storybook/stories/card_view/Card.stories.tsx b/apps/react-storybook/stories/card_view/Card.stories.tsx index 843e22211ae0..37b232724100 100644 --- a/apps/react-storybook/stories/card_view/Card.stories.tsx +++ b/apps/react-storybook/stories/card_view/Card.stories.tsx @@ -1,20 +1,29 @@ import React, { useState, useRef, useEffect } from "react"; import type { Meta, StoryObj } from "@storybook/react"; +import {generatedData} from './generatedData'; import { Card as InfernoCard } from "devextreme/esm/__internal/grids/new/card_view/content_view/content/card/card"; import { wrapInfernoWithReact } from "../utils"; +import { Footer } from "./templates"; interface Props { - row: { - key: unknown; - cells: { - value: unknown; - column: { - alignment: "left" | "right" | "center"; - caption: string; - }; - }[]; - }; + allowSelectOnClick: boolean; + showSelectCheckBox: boolean; + showImage: boolean; + showFooter: boolean; +} + +const data = generatedData[0]; +const columns = Object.keys(data); + +const row = { + key: 1, + cells: columns.map((column) => ({ + column: { + caption: column, + }, + text: data[column] + })) } const Card = wrapInfernoWithReact(InfernoCard); @@ -30,45 +39,25 @@ type Story = StoryObj; export const DefaultMode: Story = { args: { - row: { - cells: [ - { - value: 1, - column: { - alignment: 'left', - caption: 'asd', - }, - }, - { - value: 1, - column: { - alignment: 'left', - caption: 'asd', - }, - }, - { - value: 1, - column: { - alignment: 'left', - caption: 'asd', - }, - }, - { - value: 1, - column: { - alignment: 'left', - caption: 'asd', - }, - }, - { - value: 1, - column: { - alignment: 'left', - caption: 'asd', - }, - }, - ], - key: 1, - }, + allowSelectOnClick: true, + showSelectCheckBox: true, + showImage: true, + showFooter: true, }, + + render(props) { + const cover = props.showImage ? { + imageExpr: function(data) {console.log(arguments)}, + altExpr: function(data) {console.log(arguments)}, + } : {}; + + const footer = props.showFooter && Footer; + + return + } }; diff --git a/apps/react-storybook/stories/card_view/CardView.stories.tsx b/apps/react-storybook/stories/card_view/CardView.stories.tsx index 8686138e12e6..4afb7e5e1f40 100644 --- a/apps/react-storybook/stories/card_view/CardView.stories.tsx +++ b/apps/react-storybook/stories/card_view/CardView.stories.tsx @@ -4,6 +4,7 @@ import dxCardView from "devextreme/ui/card_view"; import { wrapDxWithReact } from "../utils"; import { store } from "./data"; import { generatedData } from "./generatedData"; +import { renderFooter } from "./templates"; const CardView = wrapDxWithReact(dxCardView); @@ -164,6 +165,14 @@ const meta: Meta = { searchPanel: { control: 'object', }, + cardFooterTemplate: { + control: 'radio', + options: ['show (custom template)', 'undefined'], + mapping: { + 'show (custom template)': renderFooter, + 'undefined': undefined, + } + } } }; @@ -186,6 +195,7 @@ export const DefaultMode: Story = { cardMaxWidth: 350, columns: 'local', filterPanel: { visible: true }, + cardFooterTemplate: undefined, }, }; diff --git a/apps/react-storybook/stories/card_view/data.ts b/apps/react-storybook/stories/card_view/data.ts index 9e2c22a22a44..cdb7e5b23181 100644 --- a/apps/react-storybook/stories/card_view/data.ts +++ b/apps/react-storybook/stories/card_view/data.ts @@ -4,7 +4,6 @@ export const items = new Array(1000).fill(null).map(() => ( {column1: 1, column2: 2} )); - function isNotEmpty(value: string | undefined | null) { return value !== undefined && value !== null && value !== ''; } diff --git a/apps/react-storybook/stories/card_view/templates.tsx b/apps/react-storybook/stories/card_view/templates.tsx new file mode 100644 index 000000000000..0a980d103cb0 --- /dev/null +++ b/apps/react-storybook/stories/card_view/templates.tsx @@ -0,0 +1,14 @@ +import Button from "devextreme/ui/button" + +export function renderFooter() { + const container = document.createElement('div'); + const button1 = document.createElement('div'); + const button2 = document.createElement('div'); + + container.append(button1, button2); + + new Button(button1, {text: 'button 1'}); + new Button(button2, {text: 'button 2'}); + + return container; +} \ No newline at end of file diff --git a/e2e/testcafe-devextreme/tests/cardView/cover.ts b/e2e/testcafe-devextreme/tests/cardView/cover.visual.ts similarity index 100% rename from e2e/testcafe-devextreme/tests/cardView/cover.ts rename to e2e/testcafe-devextreme/tests/cardView/cover.visual.ts diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-blue-light).png new file mode 100644 index 000000000000..f79cf45ee4fa Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (generic-light).png new file mode 100644 index 000000000000..10f8a6b00144 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (material-blue-light).png new file mode 100644 index 000000000000..30fefb9e57cf Binary files /dev/null and b/e2e/testcafe-devextreme/tests/cardView/etalons/content-no-data (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png index 10645effe4df..7fa98a1283b9 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png index 2d3272c4bea1..76f103f97e1c 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png index af632315f77c..1edeb1120d85 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/cover-default-render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png index 339e7dc4c847..b910aeaa46d8 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png index 2d6ec4c88f26..7fedb7e297a9 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/etalons/header-panel (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png index eddaa5c43efb..e98a5545387c 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png index 34ae29a9fa4e..6d421e6173e0 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png index f97ced95bd9e..97302df1d94b 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/filterPanel/etalons/cardView_FilterBuilderPopup (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/noData.visual.ts b/e2e/testcafe-devextreme/tests/cardView/noData.visual.ts new file mode 100644 index 000000000000..53de9dd68831 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/cardView/noData.visual.ts @@ -0,0 +1,24 @@ +import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import CardView from 'devextreme-testcafe-models/cardView'; +import url from '../../helpers/getPageUrl'; +import { createWidget } from '../../helpers/createWidget'; +import { testScreenshot } from '../../helpers/themeUtils'; + +fixture.disablePageReloads`CardView - HeaderPanel` + .page(url(__dirname, '../container.html')); + +test('default render', async (t) => { + const cardView = new CardView('#container'); + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + + await testScreenshot(t, takeScreenshot, 'content-no-data.png', { element: cardView.element }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => createWidget('dxCardView', { + width: 1000, + height: 600, + columns: ['Customer', 'Order Date'], + dataSource: [], +})); diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png index cea0fec88916..d3ef00d19d50 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png index bd79b3b6be20..7fa912938ad0 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png index a4072e937113..648558d7d930 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/search/etalons/card-view_search_text-highlighting (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png index c2de48e2ad11..a5a0fe5d7c70 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png index 3e872b3dcb93..ab2008b86bc6 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png index 4766698815b2..68c653fa7ff9 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkbox_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png index 685334c8c0b6..450cad589f72 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png index 51e8ad995556..2d985a469fbe 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png index 3ea7d60187ce..dedae416f5d2 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_checkboxes_visibility_with_showCheckBoxesMode_=_onClick (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png index 2c6289137fc3..2b3b141853aa 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png index 16494157406c..2d624cf69e07 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png index e36cde62b6b3..1ee801c525c0 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_always (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png index 5b6b9063e8d0..de752ae591f4 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png index c8b3e3209241..6dfcf6c37d36 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png index 41ffba342b2a..62e66badae8f 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_none (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png index 5b6b9063e8d0..d549727dd3fa 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png index c8b3e3209241..4e5944ef395f 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png index 41ffba342b2a..6aceb34ec8db 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png index c3048df9ff19..8815097f9a04 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png index 45d51d3a3dc5..b5c559469ca0 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png index bd15fb5d723e..6f6e2a478d12 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png index 5b6b9063e8d0..d549727dd3fa 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png index c8b3e3209241..4e5944ef395f 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png index 41ffba342b2a..6aceb34ec8db 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onClick_3 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png index 5b6b9063e8d0..de752ae591f4 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png index c8b3e3209241..6dfcf6c37d36 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png index 41ffba342b2a..62e66badae8f 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_1 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png index 2c6289137fc3..2b3b141853aa 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png index 16494157406c..2d624cf69e07 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png index e36cde62b6b3..1ee801c525c0 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_2 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png index 5b6b9063e8d0..de752ae591f4 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png index c8b3e3209241..6dfcf6c37d36 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png index 41ffba342b2a..62e66badae8f 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_with_showCheckBoxesMode_=_onLongTap_3 (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png index 77393f962003..3fa48879e468 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (generic-light).png index f3b99a7aa82e..e1b4ace54810 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (material-blue-light).png index 9f4bb4f4b03e..e82b5054eb36 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_miltiple_selection_without_select-all (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png index 25bfa3bf416f..f2820890e12b 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (generic-light).png index 7a95651075cb..7d5226ba46c5 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (material-blue-light).png index d28f9097bd8c..4714e041399a 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/selection/etalons/card-view_single_selection (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png index 7ee7a0b138c8..d1580e917d5e 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png index 048ee4e72e6e..b6a1127f73e2 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png index 00c816b8cfb8..b4db787997ce 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_allow_sorting_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png index 44cd9d0dcf89..da1fa3cdbc04 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png index 688afa32fa9a..3760d50672ee 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png index 52eb41ebd1cf..bd4b18d48e82 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_filed_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png index 936702e0ea7a..631b6fc1b8fa 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png index 41dce37db3cf..d85e18cbc81d 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png index 9be9a395ff7b..cdd303a91277 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_calculate_sort_value_is_function_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png index 49d6622196b5..1051af476409 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png index 6475da837712..eb4bda28f72c 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png index 89ca18375040..263bd94d104a 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_default_render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png index 78700b6d187b..5f32ae2e6cfd 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png index 1d48347c649c..6911b99d3b58 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png index 6ba22f1981a8..cb42b007d798 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_headers_with_multiple_sorting_render (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png index 456966335b06..394362b88157 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png index 38b8b3fb8714..cd489c3fc822 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png index 64e6d8f73c3d..6841273861a2 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_show_sort_indexes_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png index 5fef3fd6c008..cdff6e7df26d 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png index 530b9615a833..7758202a2f10 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png index 4086ee38d293..6c1833eb4736 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sort_index_api (material-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png index ddb8d2508f26..5aa7f5c5faf5 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (fluent-blue-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png index bf66fbd0b7a1..29a84bc719cd 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (generic-light).png differ diff --git a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png index 121a15913772..181c8c1f6a89 100644 Binary files a/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png and b/e2e/testcafe-devextreme/tests/cardView/sorting/etalons/cardview_sorting_method_api (material-blue-light).png differ diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss index cd81dfb11b1d..adcb78a98c85 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/_index.scss @@ -1,5 +1,6 @@ @use './content_view'; @use './header_panel'; +@use './filter_panel'; @use './variables' as *; // adduse diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss index a7575792f397..f8f2a72d84ba 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/_index.scss @@ -1,7 +1,8 @@ @use '../variables' as *; @use './content'; +@use './no_data'; -.dx-cardview-contentview { +.dx-gridcore-contentview { overflow: hidden; flex-grow: 1; } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss index cdd89b6143a7..fb69845c516a 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/_index.scss @@ -11,8 +11,13 @@ border-radius: $cardview-card-border-radius; background-color: $cardview-card-background-color; overflow: hidden; + + & > :nth-child(1) { + border-top: none; + } } + .dx-cardview-card-selection { background-color: $cardview-card-selection-background-color; } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss index 7fae4600b2f3..3c43bca9d9c6 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/content/_index.scss @@ -3,25 +3,31 @@ .dx-cardview-card-content { padding: ($cardview-card-content-padding-vertical - $cardview-card-content-field-gap) $cardview-card-content-padding-horizontal; - display: table; + display: grid; + grid-template-columns: auto 1fr; border-spacing: $cardview-card-content-field-gap; width: 100%; + border-top: $cardview-card-border-size solid $cardview-card-border-color; } -.dx-cardview-field { - display: table-row; +.dx-cardview-field-template { + grid-column: span 2; } -.dx-cardview-field-name, -.dx-cardview-field-value { - display: table-cell; +.dx-cardview-field-caption, +.dx-cardview-field-value, +.dx-cardview-field-template { + padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - padding: $cardview-card-content-cell-padding-vertical $cardview-card-content-cell-padding-horizontal; + + .dx-cardview-word-wrap-enabled & { + white-space: normal; + } } -.dx-cardview-field-name { +.dx-cardview-field-caption { font-weight: 600; } @@ -38,14 +44,6 @@ text-align: center; } - &--white-space-normal { - white-space: normal; - } - - &--white-space-nowrap { - white-space: nowrap; - } - &__text-part { &--highlighted { color: $cardview-card-content-field-value-highlight-color; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss index 75fdb043e97b..a341cfb8186d 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss @@ -6,9 +6,10 @@ display: flex; justify-content: center; border-top: $cardview-card-border-size solid $cardview-card-border-color; - border-bottom: $cardview-card-border-size solid $cardview-card-border-color; max-height: var(--dx-cardview-card-cover-max-height); aspect-ratio: var(--dx-cardview-card-cover-ratio); + width: 100%; + background-color: $cardview-card-cover-background-color; &-noimage { background-color: $cardview-card-cover-noimage-background-color; @@ -23,6 +24,5 @@ .dx-card-cover-image { object-fit: contain; - width: 100%; } diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss index b3982b5e08e3..9c178428557a 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss @@ -1,3 +1,4 @@ $cardview-card-cover-noimage-background-color: null !default; $cardview-card-cover-noimage-icon-color: null !default; $cardview-card-cover-noimage-icon-size: null !default; +$cardview-card-cover-background-color: null !default; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss index 0a0f670986cc..c1705bbb0df3 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/content/card/header/_index.scss @@ -1,17 +1,23 @@ @use './variables' as *; +@use '../variables' as *; .dx-cardview-card-header { .dx-toolbar { padding: 0 12px; border-radius: $cardview-card-header-border-radius; - .dx-toolbar-label { font-size: $cardview-card-header-text-size; } } } +.dx-cardview-card-selection { + .dx-toolbar { + background-color: $cardview-card-selection-background-color; + } +} + .dx-cardview-select-checkboxes-hidden .dx-cardview-card:not(.dx-cardview-card-selection) .dx-cardview-select-checkbox { .dx-checkbox { display: none; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss new file mode 100644 index 000000000000..0f2481435c5e --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_index.scss @@ -0,0 +1,28 @@ +@use './variables' as *; + +.dx-gridcore-nodata-icon-container { + height: $cardview-nodata-icon-container-size; + width: $cardview-nodata-icon-container-size; + display: flex; + align-items: center; + justify-content: center; + background-color: $cardview-nodata-icon-container-background-color; + border-radius: 999px; + margin: $cardview-nodata-icon-container-margin; + + .dx-icon { + font-size: $cardview-nodata-icon-size; + } +} + +.dx-gridcore-nodata-element { + color: $cardview-nodata-text-color; + text-align: center; +} + +.dx-gridcore-nodata-container { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_variables.scss new file mode 100644 index 000000000000..cd82d27509b7 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/base/cardView/content_view/no_data/_variables.scss @@ -0,0 +1,7 @@ +$cardview-nodata-text-color: null !default; + +$cardview-nodata-icon-container-size: null !default; +$cardview-nodata-icon-container-background-color: null !default; +$cardview-nodata-icon-container-margin: null !default; + +$cardview-nodata-icon-size: null !default; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/filter_panel/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/filter_panel/_index.scss new file mode 100644 index 000000000000..1482e6b706d4 --- /dev/null +++ b/packages/devextreme-scss/scss/widgets/base/cardView/filter_panel/_index.scss @@ -0,0 +1,7 @@ +@use '../variables' as *; + +.dx-cardview { + .dx-datagrid-filter-panel { + background-color: $cardview-background-color; + } +} diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss index 8d4bc8f3b498..d4343cf70542 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_index.scss @@ -11,20 +11,26 @@ border: solid $cardview-header-item-border-width $cardview-header-item-border-color; border-radius: $cardview-header-item-border-radius; background-color: $cardview-header-item-background-color; + line-height: $cardview-header-item-line-height; cursor: pointer; &:hover { background-color: $cardview-header-item-hovered-background-color; border: solid $cardview-header-item-border-width $cardview-header-item-hovered-border-color; } + + .dx-icon-cursorprohibition { + color: $cardview-header-item-prohibition-icon-color; + } + + .dx-icon { + font-size: $cardview-header-item-icon-size; + } } .dx-cardview { .dx-header-filter-icon { - @include dx-icon(filter); - color: $cardview-header-filter-icon-empty-color; - font-size: $cardview-header-filter-icon-size; &--selected { color: $cardview-header-filter-icon-selected-color; diff --git a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss index 9e62897e1fa4..19d7416779af 100644 --- a/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss +++ b/packages/devextreme-scss/scss/widgets/base/cardView/header_panel/item/_variables.scss @@ -6,10 +6,13 @@ $cardview-header-item-hovered-border-color: null !default; $cardview-header-item-border-width: null !default; $cardview-header-item-border-radius: null !default; -$cardview-header-item-padding-horizontal: 8px !default; -$cardview-header-item-padding-vertical: 6px !default; +$cardview-header-item-padding-horizontal: null !default; +$cardview-header-item-padding-vertical: null !default; $cardview-header-item-content-gap: 4px !default; -$cardview-header-filter-icon-size: null !default; +$cardview-header-item-line-height: null !default; +$cardview-header-item-icon-size: null !default; $cardview-header-filter-icon-empty-color: null !default; $cardview-header-filter-icon-selected-color: null !default; + +$cardview-header-item-prohibition-icon-color: null; diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss index 5682e96cf31e..99d0e33bbb4d 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_colors.scss @@ -7,25 +7,122 @@ @use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; // adduse -$cardview-background-color: $base-typography-bg !default; -$cardview-header-item-background-color: #F0F0F0 !default; -$cardview-header-item-border-color: #E0E0E0 !default; -$cardview-header-item-hovered-background-color: #EBEBEB !default; -$cardview-header-item-hovered-border-color: #BDBDBD !default; +$cardview-fluent-background-color: null !default; -$cardview-card-border-color: $base-border-color !default; -$cardview-card-background-color: $base-bg !default; +$cardview-fluent-header-filter-icon-empty-color: null !default; +$cardview-fluent-header-filter-icon-selected-color: null !default; -$cardview-header-filter-icon-empty-color: $base-text-color !default; -$cardview-header-filter-icon-selected-color: $base-accent !default; +$cardview-fluent-header-item-border-color: null !default; +$cardview-fluent-header-item-background-color: null !default; +$cardview-fluent-header-item-hovered-background-color: null !default; +$cardview-fluent-header-item-hovered-border-color: null !default; -$cardview-card-content-field-value-highlight-color: $base-inverted-text-color !default; -$cardview-card-content-field-value-highlight-background: $base-accent !default; +$cardview-fluent-header-item-prohibition-icon-color: null !default; -$cardview-card-cover-noimage-background-color: #E0E0E0 !default; -$cardview-card-cover-noimage-icon-color: #B3B3B3 !default; +$cardview-fluent-nodata-text-color: null !default; +$cardview-fluent-nodata-icon-container-background-color: null !default; -$cardview-card-selection-background-color: #EBF3FC; +$cardview-fluent-card-content-field-value-highlight-color: null !default; +$cardview-fluent-card-content-field-value-highlight-background: null !default; + +$cardview-fluent-card-cover-background-color: null !default; + +$cardview-fluent-card-cover-noimage-background-color: null !default; +$cardview-fluent-card-cover-noimage-icon-color: null !default; + +$cardview-fluent-card-selection-background-color: null !default; + +$cardview-fluent-card-border-color: null !default; +$cardview-fluent-card-background-color: null !default; + +@if $mode == 'light' { + $cardview-fluent-background-color: $base-typography-bg !default; + + $cardview-fluent-header-filter-icon-empty-color: $base-text-color !default; + $cardview-fluent-header-filter-icon-selected-color: $base-accent !default; + + $cardview-fluent-header-item-border-color: $base-border-color !default; + $cardview-fluent-header-item-background-color: darken($base-bg, 5.88) !default; + $cardview-fluent-header-item-hovered-background-color: darken($cardview-fluent-header-item-background-color, 1.96) !default; + $cardview-fluent-header-item-hovered-border-color: darken($cardview-fluent-header-item-border-color, 13.73) !default; + + $cardview-fluent-header-item-prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.80), 9.61) !default; + + $cardview-fluent-nodata-text-color: lighten($base-text-color, 23.92) !default; + $cardview-fluent-nodata-icon-container-background-color: darken($base-bg, 9.80) !default; + + $cardview-fluent-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-fluent-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-fluent-card-cover-background-color: #FFF !default; + + $cardview-fluent-card-cover-noimage-background-color: darken($base-bg, 5.88) !default; + $cardview-fluent-card-cover-noimage-icon-color: lighten($base-text-color, 23.92) !default; + + $cardview-fluent-card-selection-background-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default; + + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-background-color: $base-bg !default; +} + +@if $mode == "dark" { + $cardview-fluent-background-color: $base-typography-bg !default; + + $cardview-fluent-header-filter-icon-empty-color: $base-text-color !default; + $cardview-fluent-header-filter-icon-selected-color: $base-accent !default; + + $cardview-fluent-header-item-border-color: $base-border-color !default; + $cardview-fluent-header-item-background-color: darken($base-bg, 12.16) !default; + $cardview-fluent-header-item-hovered-background-color: lighten($cardview-fluent-header-item-background-color, 18.04) !default; + $cardview-fluent-header-item-hovered-border-color: lighten($cardview-fluent-header-item-border-color, 11.76) !default; + + $cardview-fluent-header-item-prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default; + + $cardview-fluent-nodata-text-color: darken($base-text-color, 32.16) !default; + $cardview-fluent-nodata-icon-container-background-color: lighten($base-bg, 3.92) !default; + + $cardview-fluent-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-fluent-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-fluent-card-cover-background-color: #FFF !default; + + $cardview-fluent-card-cover-noimage-background-color: darken($base-bg, 12.16) !default; + $cardview-fluent-card-cover-noimage-icon-color: darken($base-text-color, 32.16) !default; + + $cardview-fluent-card-selection-background-color: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default; + + $cardview-fluent-card-border-color: $base-border-color !default; + $cardview-fluent-card-background-color: $base-bg !default; +} + +$cardview-background-color: $cardview-fluent-background-color !default; + +$cardview-header-filter-icon-empty-color: $cardview-fluent-header-filter-icon-empty-color !default; +$cardview-header-filter-icon-selected-color: $cardview-fluent-header-filter-icon-selected-color !default; + +$cardview-header-item-border-color: $cardview-fluent-header-item-border-color !default; +$cardview-header-item-background-color: $cardview-fluent-header-item-background-color !default; +$cardview-header-item-hovered-background-color: $cardview-fluent-header-item-hovered-background-color !default; +$cardview-header-item-hovered-border-color: $cardview-fluent-header-item-hovered-border-color !default; + +$cardview-header-item-prohibition-icon-color: $cardview-fluent-header-item-prohibition-icon-color !default; + +$cardview-nodata-text-color: $cardview-fluent-nodata-text-color !default; +$cardview-nodata-icon-container-background-color: $cardview-fluent-nodata-icon-container-background-color !default; + +$cardview-card-content-field-value-highlight-color: $cardview-fluent-card-content-field-value-highlight-color !default; +$cardview-card-content-field-value-highlight-background: $cardview-fluent-card-content-field-value-highlight-background !default; + +$cardview-card-cover-background-color: $cardview-fluent-card-cover-background-color !default; + +$cardview-card-cover-noimage-background-color: $cardview-fluent-card-cover-noimage-background-color !default; +$cardview-card-cover-noimage-icon-color: $cardview-fluent-card-cover-noimage-icon-color !default; + +$cardview-card-selection-background-color: $cardview-fluent-card-selection-background-color !default; + +$cardview-card-border-color: $cardview-fluent-card-border-color !default; +$cardview-card-background-color: $cardview-fluent-card-background-color !default; diff --git a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss index 59391bb36c82..186012adba5e 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/cardView/_sizes.scss @@ -7,12 +7,16 @@ @use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; // adduse +$cardview-fluent-sizes-64: null; $cardview-fluent-sizes-48: null; +$cardview-fluent-sizes-40: null; $cardview-fluent-paddings-24: null; $cardview-fluent-paddings-12: null; +$cardview-fluent-paddings-8: null; $cardview-fluent-paddings-6: null; $cardview-fluent-text-size-16: null; $cardview-fluent-border-radius-8: null; @@ -20,9 +24,12 @@ $cardview-fluent-gaps-16: null; $cardview-fluent-gaps-24: null; @if $size == "default" { + $cardview-fluent-sizes-64: 64px; $cardview-fluent-sizes-48: 48px; + $cardview-fluent-sizes-40: 40px; $cardview-fluent-paddings-24: 24px; $cardview-fluent-paddings-12: 12px; + $cardview-fluent-paddings-8: 8px; $cardview-fluent-paddings-6: 6px; $cardview-fluent-text-size-16: 16px; $cardview-fluent-border-radius-8: 8px; @@ -30,9 +37,12 @@ $cardview-fluent-gaps-24: null; $cardview-fluent-gaps-24: 24px; } @else if $size == "compact" { + $cardview-fluent-sizes-64: 48px; $cardview-fluent-sizes-48: 32px; + $cardview-fluent-sizes-40: 32px; $cardview-fluent-paddings-24: 16px; $cardview-fluent-paddings-12: 8px; + $cardview-fluent-paddings-8: 6px; $cardview-fluent-paddings-6: 4px; $cardview-fluent-text-size-16: 14px; $cardview-fluent-border-radius-8: 6px; @@ -48,6 +58,13 @@ $cardview-headerpanel-content-gap: 8px !default; $cardview-header-item-border-width: 1px !default; $cardview-header-item-border-radius: 6px !default; +$cardview-header-item-padding-horizontal: $cardview-fluent-paddings-8 !default; +$cardview-header-item-padding-vertical: $cardview-fluent-paddings-6 !default; +$cardview-header-item-icon-size: $fluent-base-icon-size !default; + +$cardview-nodata-icon-container-size: $cardview-fluent-sizes-64 !default; +$cardview-nodata-icon-container-margin: $cardview-fluent-paddings-12 !default; +$cardview-nodata-icon-size: $cardview-fluent-sizes-40 !default; $cardview-content-column-gap: $cardview-fluent-gaps-16 !default; $cardview-content-row-gap: $cardview-fluent-gaps-16 !default; @@ -65,6 +82,4 @@ $cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !defau $cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default; $cardview-card-header-text-size: $cardview-fluent-text-size-16 !default; -$cardview-card-header-border-radius: 8px !default; - -$cardview-header-filter-icon-size: 20px !default; +$cardview-card-header-border-radius: $cardview-fluent-border-radius-8 !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss index 3a0c2a1ba902..8a66e283b0f4 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_colors.scss @@ -4,20 +4,158 @@ @use '../../base/cardView/header_panel/item/variables' as *; @use '../../base/cardView/content_view/content/card/variables' as *; @use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use "sass:color"; // adduse -$cardview-background-color: $typography-bg !default; +$cardview-generic-background-color: null !default; -$cardview-header-item-background-color: #F0F0F0 !default; -$cardview-header-item-border-color: #E0E0E0 !default; -$cardview-header-item-hovered-background-color: #EBEBEB !default; -$cardview-header-item-hovered-border-color: #BDBDBD !default; +$cardview-generic-header-filter-icon-empty-color: null !default; +$cardview-generic-header-filter-icon-selected-color: null !default; -$cardview-card-border-color: $base-border-color !default; -$cardview-card-background-color: $base-bg !default; +$cardview-generic-header-item-border-color: null !default; -$cardview-card-content-field-value-highlight-color: $base-inverted-text-color !default; -$cardview-card-content-field-value-highlight-background: $base-accent !default; +$cardview-generic-header-item-background-color: null !default; +$cardview-generic-header-item-hovered-background-color: null !default; +$cardview-generic-header-item-hovered-border-color: null !default; + +$cardview-generic-header-item-prohibition-icon-color: null !default; + +$cardview-generic-nodata-text-color: null !default; +$cardview-generic-nodata-icon-container-background-color: null !default; + +$cardview-generic-card-content-field-value-highlight-color: null !default; +$cardview-generic-card-content-field-value-highlight-background: null !default; + +$cardview-generic-card-cover-background-color: null !default; + +$cardview-generic-card-cover-noimage-background-color: null !default; +$cardview-generic-card-cover-noimage-icon-color: null !default; + +$cardview-generic-card-selection-background-color: null !default; + +$cardview-generic-card-border-color: null !default; +$cardview-generic-card-background-color: null !default; + +@if $color == 'light' or $color == 'carmine' or $color == 'softblue' or $color == 'greenmist' { + $cardview-generic-background-color: $base-bg !default; + + $cardview-generic-header-filter-icon-empty-color: $base-text-color !default; + $cardview-generic-header-filter-icon-selected-color: $base-accent !default; + + $cardview-generic-header-item-background-color: darken($base-bg, 3.92) !default; + $cardview-generic-header-item-border-color: $base-border-color !default; + $cardview-generic-header-item-hovered-background-color: darken($cardview-generic-header-item-background-color, 3.92) !default; + $cardview-generic-header-item-hovered-border-color: darken($cardview-generic-header-item-hovered-background-color, 10.59) !default; + + $cardview-generic-header-item-prohibition-icon-color: $base-danger !default; + + $cardview-generic-nodata-text-color: $base-label-color !default; + $cardview-generic-nodata-icon-container-background-color: darken($base-bg, 7.84) !default; + + $cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-generic-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-generic-card-cover-background-color: #FFF !default; + + $cardview-generic-card-cover-noimage-background-color: darken($base-bg, 7.84) !default; + $cardview-generic-card-cover-noimage-icon-color: lighten($base-text-color, 38.43) !default; + + $cardview-generic-card-selection-background-color: lighten(desaturate(adjust-hue($base-accent, 1), 7.32), 43.33) !default; + + $cardview-generic-card-border-color: $base-border-color !default; + $cardview-generic-card-background-color: $base-bg !default; +} + +@if $color == "dark" or $color == "darkviolet" or $color == "darkmoon" { + $cardview-generic-background-color: $base-bg !default; + + $cardview-generic-header-filter-icon-empty-color: $base-text-color !default; + $cardview-generic-header-filter-icon-selected-color: $base-accent !default; + + $cardview-generic-header-item-background-color: lighten($base-bg, 3.92) !default; + $cardview-generic-header-item-border-color: $base-border-color !default; + $cardview-generic-header-item-hovered-background-color: lighten($cardview-generic-header-item-background-color, 3.92) !default; + $cardview-generic-header-item-hovered-border-color: lighten($cardview-generic-header-item-border-color, 10.20) !default; + + $cardview-generic-header-item-prohibition-icon-color: $base-danger !default; + + $cardview-generic-nodata-text-color: $base-label-color !default; + $cardview-generic-nodata-icon-container-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default; + + $cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-generic-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-generic-card-cover-background-color: #FFF !default; + + $cardview-generic-card-cover-noimage-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default; + $cardview-generic-card-cover-noimage-icon-color: darken($base-text-color, 38.04) !default; + + $cardview-generic-card-selection-background-color: darken(desaturate($base-accent, 44.18), 25.88) !default; + + $cardview-generic-card-border-color: $base-border-color !default; + $cardview-generic-card-background-color: $base-bg !default; +} + +@if $color == "contrast" { + $cardview-generic-background-color: $base-bg !default; + + $cardview-generic-header-filter-icon-empty-color: $base-text-color !default; + $cardview-generic-header-filter-icon-selected-color: $base-accent !default; + + $cardview-generic-header-item-background-color: $base-bg !default; + $cardview-generic-header-item-border-color: $base-border-color !default; + $cardview-generic-header-item-hovered-background-color: $cardview-generic-header-item-background-color !default; + $cardview-generic-header-item-hovered-border-color: $cardview-generic-header-item-border-color !default; + + $cardview-generic-header-item-prohibition-icon-color: $base-danger !default; + + $cardview-generic-nodata-text-color: $base-label-color !default; + $cardview-generic-nodata-icon-container-background-color: $base-bg !default; + + $cardview-generic-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-generic-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-generic-card-cover-background-color: #FFF !default; + + $cardview-generic-card-cover-noimage-background-color: $base-bg !default; + $cardview-generic-card-cover-noimage-icon-color: $base-text-color !default; + + $cardview-generic-card-selection-background-color: $base-accent !default; + + $cardview-generic-card-border-color: $base-border-color !default; + $cardview-generic-card-background-color: $base-bg !default; +} + +$cardview-background-color: $cardview-generic-background-color !default; + +$cardview-header-filter-icon-empty-color: $cardview-generic-header-filter-icon-empty-color !default; +$cardview-header-filter-icon-selected-color: $cardview-generic-header-filter-icon-selected-color !default; + +$cardview-header-item-border-color: $cardview-generic-header-item-border-color !default; + +$cardview-header-item-background-color: $cardview-generic-header-item-background-color !default; +$cardview-header-item-hovered-background-color: $cardview-generic-header-item-hovered-background-color !default; +$cardview-header-item-hovered-border-color: $cardview-generic-header-item-hovered-border-color !default; + +$cardview-header-item-prohibition-icon-color: $cardview-generic-header-item-prohibition-icon-color !default; + +$cardview-nodata-text-color: $cardview-generic-nodata-text-color !default; +$cardview-nodata-icon-container-background-color: $cardview-generic-nodata-icon-container-background-color !default; + +$cardview-card-content-field-value-highlight-color: $cardview-generic-card-content-field-value-highlight-color !default; +$cardview-card-content-field-value-highlight-background: $cardview-generic-card-content-field-value-highlight-background !default; + +$cardview-card-cover-background-color: $cardview-generic-card-cover-background-color !default; + +$cardview-card-cover-noimage-background-color: $cardview-generic-card-cover-noimage-background-color !default; +$cardview-card-cover-noimage-icon-color: $cardview-generic-card-cover-noimage-icon-color !default; + +$cardview-card-selection-background-color: $cardview-generic-card-selection-background-color !default; + +$cardview-card-border-color: $cardview-generic-card-border-color !default; +$cardview-card-background-color: $cardview-generic-card-background-color !default; diff --git a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss index b22cd0209b8e..18ca55b60c05 100644 --- a/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/generic/cardView/_sizes.scss @@ -4,59 +4,92 @@ @use '../../base/cardView/header_panel/item/variables' as *; @use '../../base/cardView/content_view/content/card/variables' as *; @use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; -$cardview-fluent-paddings-24: null; -$cardview-fluent-paddings-12: null; -$cardview-fluent-paddings-6: null; -$cardview-fluent-text-size-16: null; -$cardview-fluent-border-radius-8: null; -$cardview-fluent-gaps-16: null; -$cardview-fluent-gaps-24: null; +// adduse + +$cardview-generic-sizes-60: null; +$cardview-generic-sizes-48: null; +$cardview-generic-sizes-36: null; +$cardview-generic-sizes-18: null; +$cardview-generic-paddings-24: null; +$cardview-generic-paddings-16: null; +$cardview-generic-paddings-12: null; +$cardview-generic-paddings-9: null; +$cardview-generic-paddings-6: null; +$cardview-generic-text-size-16: null; +$cardview-generic-border-radius-8: null; +$cardview-generic-gaps-8: null; +$cardview-generic-gaps-16: null; +$cardview-generic-gaps-20: null; @if $size == "default" { - $cardview-fluent-paddings-24: 24px; - $cardview-fluent-paddings-12: 12px; - $cardview-fluent-paddings-6: 6px; - $cardview-fluent-text-size-16: 16px; - $cardview-fluent-border-radius-8: 8px; - $cardview-fluent-gaps-16: 16px; - $cardview-fluent-gaps-24: 24px; + $cardview-generic-sizes-60: 60px; + $cardview-generic-sizes-48: 48px; + $cardview-generic-sizes-36: 36px; + $cardview-generic-sizes-18: 18px; + $cardview-generic-paddings-24: 24px; + $cardview-generic-paddings-16: 16px; + $cardview-generic-paddings-12: 12px; + $cardview-generic-paddings-9: 9px; + $cardview-generic-paddings-6: 6px; + $cardview-generic-text-size-16: 16px; + $cardview-generic-border-radius-8: 8px; + $cardview-generic-gaps-8: 8px; + $cardview-generic-gaps-16: 16px; + $cardview-generic-gaps-20: 20px; } @else if $size == "compact" { - $cardview-fluent-paddings-24: 16px; - $cardview-fluent-paddings-12: 8px; - $cardview-fluent-paddings-6: 4px; - $cardview-fluent-text-size-16: 14px; - $cardview-fluent-border-radius-8: 6px; - $cardview-fluent-gaps-16: 12px; - $cardview-fluent-gaps-24: 16px; + $cardview-generic-sizes-60: 40px; + $cardview-generic-sizes-48: 32px; + $cardview-generic-sizes-36: 24px; + $cardview-generic-sizes-18: 14px; + $cardview-generic-paddings-24: 16px; + $cardview-generic-paddings-16: 12px; + $cardview-generic-paddings-12: 8px; + $cardview-generic-paddings-9: 5px; + $cardview-generic-paddings-6: 4px; + $cardview-generic-text-size-16: 14px; + $cardview-generic-border-radius-8: 6px; + $cardview-generic-gaps-8: 4px; + $cardview-generic-gaps-16: 12px; + $cardview-generic-gaps-20: 16px; } $cardview-border-radius: 16px !default; -$cardview-gap: $cardview-fluent-gaps-24 !default; -$cardview-padding: $cardview-fluent-paddings-24 !default; +$cardview-gap: $cardview-generic-gaps-20 !default; +$cardview-padding: $cardview-generic-paddings-24 !default; -$cardview-headerpanel-content-gap: 8px !default; +$cardview-headerpanel-content-gap: $cardview-generic-gaps-8 !default; $cardview-header-item-border-width: 1px !default; -$cardview-header-item-border-radius: 6px !default; +$cardview-header-item-border-radius: 4px !default; +$cardview-header-item-padding-horizontal: $cardview-generic-paddings-12 !default; +$cardview-header-item-padding-vertical: $cardview-generic-paddings-9 !default; +$cardview-header-item-line-height: $cardview-generic-sizes-18 !default; +$cardview-header-item-icon-size: $cardview-generic-sizes-18 !default; + +$cardview-nodata-icon-container-size: $cardview-generic-sizes-60 !default; +$cardview-nodata-icon-container-margin: $cardview-generic-paddings-12 !default; +$cardview-nodata-icon-size: $cardview-generic-sizes-36 !default; -$cardview-content-column-gap: $cardview-fluent-gaps-16 !default; -$cardview-content-row-gap: $cardview-fluent-gaps-16 !default; +$cardview-content-column-gap: $cardview-generic-gaps-16 !default; +$cardview-content-row-gap: $cardview-generic-gaps-16 !default; $cardview-card-border-size: 1px !default; $cardview-card-min-width: 250px !default; -$cardview-card-border-radius: $cardview-fluent-border-radius-8 !default; +$cardview-card-border-radius: $cardview-generic-border-radius-8 !default; -$cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default; -$cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default; -$cardview-card-content-field-gap: 5px !default; -$cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default; -$cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default; +$cardview-card-cover-noimage-icon-size: $cardview-generic-sizes-48 !default; -$cardview-card-header-text-size: $cardview-fluent-text-size-16 !default; -$cardview-card-header-border-radius: 8px !default; +$cardview-card-content-padding-vertical: $cardview-generic-paddings-12 !default; +$cardview-card-content-padding-horizontal: $cardview-generic-paddings-12 !default; +$cardview-card-content-field-gap: 5px !default; +$cardview-card-content-cell-padding-vertical: $cardview-generic-paddings-6 !default; +$cardview-card-content-cell-padding-horizontal: $cardview-generic-paddings-12 !default; -// adduse +$cardview-card-header-text-size: $cardview-generic-text-size-16 !default; +$cardview-card-header-border-radius: $cardview-generic-border-radius-8 !default; diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss index 3a0c2a1ba902..6a0f623b8baf 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_colors.scss @@ -4,20 +4,128 @@ @use '../../base/cardView/header_panel/item/variables' as *; @use '../../base/cardView/content_view/content/card/variables' as *; @use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; +@use "sass:color"; // adduse -$cardview-background-color: $typography-bg !default; +$cardview-material-background-color: null !default; -$cardview-header-item-background-color: #F0F0F0 !default; -$cardview-header-item-border-color: #E0E0E0 !default; -$cardview-header-item-hovered-background-color: #EBEBEB !default; -$cardview-header-item-hovered-border-color: #BDBDBD !default; +$cardview-material-header-filter-icon-empty-color: null !default; +$cardview-material-header-filter-icon-selected-color: null !default; -$cardview-card-border-color: $base-border-color !default; -$cardview-card-background-color: $base-bg !default; +$cardview-material-header-item-border-color: null !default; -$cardview-card-content-field-value-highlight-color: $base-inverted-text-color !default; -$cardview-card-content-field-value-highlight-background: $base-accent !default; +$cardview-material-header-item-background-color: null !default; +$cardview-material-header-item-hovered-background-color: null !default; +$cardview-material-header-item-hovered-border-color: null !default; + +$cardview-material-header-item-prohibition-icon-color: null !default; + +$cardview-material-nodata-text-color: null !default; +$cardview-material-nodata-icon-container-background-color: null !default; + +$cardview-material-card-content-field-value-highlight-color: null !default; +$cardview-material-card-content-field-value-highlight-background: null !default; + +$cardview-material-card-cover-background-color: null !default; + +$cardview-material-card-cover-noimage-background-color: null !default; +$cardview-material-card-cover-noimage-icon-color: null !default; + +$cardview-material-card-selection-background-color: null !default; + +$cardview-material-card-border-color: null !default; +$cardview-material-card-background-color: null !default; + +@if $mode == 'light' { + $cardview-material-background-color: $base-bg !default; + + $cardview-material-header-filter-icon-empty-color: $base-text-color !default; + $cardview-material-header-filter-icon-selected-color: $base-accent !default; + + $cardview-material-header-item-background-color: darken($base-bg, 7.84) !default; + $cardview-material-header-item-border-color: $cardview-material-header-item-background-color !default; + $cardview-material-header-item-hovered-background-color: darken($cardview-material-header-item-background-color, 4.31) !default; + $cardview-material-header-item-hovered-border-color: $cardview-material-header-item-hovered-background-color !default; + + $cardview-material-header-item-prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.80), 9.61) !default; + + $cardview-material-nodata-text-color: $base-label-color !default; + $cardview-material-nodata-icon-container-background-color: darken($base-bg, 7.84) !default; + + $cardview-material-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-material-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-material-card-cover-background-color: #FFF !default; + + $cardview-material-card-cover-noimage-background-color: darken($base-bg, 7.84) !default; + $cardview-material-card-cover-noimage-icon-color: color.change($base-text-color, $alpha: 0.38) !default; + + $cardview-material-card-selection-background-color: color.change($base-accent, $alpha: 0.08) !default; + + $cardview-material-card-border-color: $base-border-color !default; + $cardview-material-card-background-color: $base-bg !default; +} + +@if $mode == "dark" { + $cardview-material-background-color: $base-bg !default; + + $cardview-material-header-filter-icon-empty-color: $base-text-color !default; + $cardview-material-header-filter-icon-selected-color: $base-accent !default; + + $cardview-material-header-item-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default; + $cardview-material-header-item-border-color: $cardview-material-header-item-background-color!default; + $cardview-material-header-item-hovered-background-color: lighten(desaturate($cardview-material-header-item-background-color, 3.47), 2.16) !default; + $cardview-material-header-item-hovered-border-color: $cardview-material-header-item-hovered-background-color !default; + + $cardview-material-header-item-prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default; + + $cardview-material-nodata-text-color: $base-label-color !default; + $cardview-material-nodata-icon-container-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default; + + $cardview-material-card-content-field-value-highlight-color: $base-inverted-text-color !default; + $cardview-material-card-content-field-value-highlight-background: $base-accent !default; + + $cardview-material-card-cover-background-color: #FFF !default; + + $cardview-material-card-cover-noimage-background-color: lighten(desaturate($base-bg, 0.30), 8.04) !default; + $cardview-material-card-cover-noimage-icon-color: color.change($base-text-color, $alpha: 0.38) !default; + + $cardview-material-card-selection-background-color: color.change(lighten($base-accent, 19.22), $alpha: 0.08) !default; + + $cardview-material-card-border-color: $base-border-color !default; + $cardview-material-card-background-color: $base-bg !default; +} + +$cardview-background-color: $cardview-material-background-color !default; + +$cardview-header-filter-icon-empty-color: $cardview-material-header-filter-icon-empty-color !default; +$cardview-header-filter-icon-selected-color: $cardview-material-header-filter-icon-selected-color !default; + +$cardview-header-item-border-color: $cardview-material-header-item-border-color !default; + +$cardview-header-item-background-color: $cardview-material-header-item-background-color !default; +$cardview-header-item-hovered-background-color: $cardview-material-header-item-hovered-background-color !default; +$cardview-header-item-hovered-border-color: $cardview-material-header-item-hovered-border-color !default; + +$cardview-header-item-prohibition-icon-color: $cardview-material-header-item-prohibition-icon-color !default; + +$cardview-nodata-text-color: $cardview-material-nodata-text-color !default; +$cardview-nodata-icon-container-background-color: $cardview-material-nodata-icon-container-background-color !default; + +$cardview-card-content-field-value-highlight-color: $cardview-material-card-content-field-value-highlight-color !default; +$cardview-card-content-field-value-highlight-background: $cardview-material-card-content-field-value-highlight-background !default; + +$cardview-card-cover-background-color: $cardview-material-card-cover-background-color !default; + +$cardview-card-cover-noimage-background-color: $cardview-material-card-cover-noimage-background-color !default; +$cardview-card-cover-noimage-icon-color: $cardview-material-card-cover-noimage-icon-color !default; + +$cardview-card-selection-background-color: $cardview-material-card-selection-background-color !default; + +$cardview-card-border-color: $cardview-material-card-border-color !default; +$cardview-card-background-color: $cardview-material-card-background-color !default; diff --git a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss index 0524c5d6ca62..508b922c0cf9 100644 --- a/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss +++ b/packages/devextreme-scss/scss/widgets/material/cardView/_sizes.scss @@ -4,59 +4,92 @@ @use '../../base/cardView/header_panel/item/variables' as *; @use '../../base/cardView/content_view/content/card/variables' as *; @use '../../base/cardView/content_view/content/card/header/variables' as *; +@use '../../base/cardView/content_view/content/card/cover/variables' as *; @use '../../base/cardView/content_view/content/card/content/variables' as *; @use '../../base/cardView/content_view/content/variables' as *; +@use '../../base/cardView/content_view/no_data/variables' as *; // adduse -$cardview-fluent-paddings-24: null; -$cardview-fluent-paddings-12: null; -$cardview-fluent-paddings-6: null; -$cardview-fluent-text-size-16: null; -$cardview-fluent-border-radius-8: null; -$cardview-fluent-gaps-16: null; -$cardview-fluent-gaps-24: null; +$cardview-material-sizes-64: null; +$cardview-material-sizes-48: null; +$cardview-material-sizes-40: null; +$cardview-material-sizes-20: null; +$cardview-material-paddings-24: null; +$cardview-material-paddings-16: null; +$cardview-material-paddings-12: null; +$cardview-material-paddings-8: null; +$cardview-material-paddings-6: null; +$cardview-material-text-size-16: null; +$cardview-material-border-radius-8: null; +$cardview-material-gaps-8: null; +$cardview-material-gaps-16: null; +$cardview-material-gaps-24: null; @if $size == "default" { - $cardview-fluent-paddings-24: 24px; - $cardview-fluent-paddings-12: 12px; - $cardview-fluent-paddings-6: 6px; - $cardview-fluent-text-size-16: 16px; - $cardview-fluent-border-radius-8: 8px; - $cardview-fluent-gaps-16: 16px; - $cardview-fluent-gaps-24: 24px; + $cardview-material-sizes-64: 64px; + $cardview-material-sizes-48: 48px; + $cardview-material-sizes-40: 40px; + $cardview-material-sizes-20: 20px; + $cardview-material-paddings-24: 24px; + $cardview-material-paddings-16: 16px; + $cardview-material-paddings-12: 12px; + $cardview-material-paddings-8: 8px; + $cardview-material-paddings-6: 6px; + $cardview-material-text-size-16: 16px; + $cardview-material-border-radius-8: 8px; + $cardview-material-gaps-8: 8px; + $cardview-material-gaps-16: 16px; + $cardview-material-gaps-24: 24px; } @else if $size == "compact" { - $cardview-fluent-paddings-24: 16px; - $cardview-fluent-paddings-12: 8px; - $cardview-fluent-paddings-6: 4px; - $cardview-fluent-text-size-16: 14px; - $cardview-fluent-border-radius-8: 6px; - $cardview-fluent-gaps-16: 12px; - $cardview-fluent-gaps-24: 16px; + $cardview-material-sizes-64: 48px; + $cardview-material-sizes-48: 32px; + $cardview-material-sizes-40: 32px; + $cardview-material-sizes-20: 16px; + $cardview-material-paddings-24: 16px; + $cardview-material-paddings-16: 12px; + $cardview-material-paddings-12: 6px; + $cardview-material-paddings-8: 8px; + $cardview-material-paddings-6: 4px; + $cardview-material-text-size-16: 14px; + $cardview-material-border-radius-8: 6px; + $cardview-material-gaps-8: 4px; + $cardview-material-gaps-16: 12px; + $cardview-material-gaps-24: 16px; } $cardview-border-radius: 16px !default; -$cardview-gap: $cardview-fluent-gaps-24 !default; -$cardview-padding: $cardview-fluent-paddings-24 !default; +$cardview-gap: $cardview-material-gaps-24 !default; +$cardview-padding: $cardview-material-paddings-24 !default; -$cardview-headerpanel-content-gap: 8px !default; +$cardview-headerpanel-content-gap: $cardview-material-gaps-8 !default; $cardview-header-item-border-width: 1px !default; -$cardview-header-item-border-radius: 6px !default; +$cardview-header-item-border-radius: 99px !default; +$cardview-header-item-padding-horizontal: $cardview-material-paddings-16 !default; +$cardview-header-item-padding-vertical: $cardview-material-paddings-8 !default; +$cardview-header-item-line-height: $cardview-material-sizes-20 !default; +$cardview-header-item-icon-size: $cardview-material-sizes-20 !default; -$cardview-content-column-gap: $cardview-fluent-gaps-16 !default; -$cardview-content-row-gap: $cardview-fluent-gaps-16 !default; +$cardview-nodata-icon-container-size: $cardview-material-sizes-64 !default; +$cardview-nodata-icon-container-margin: $cardview-material-paddings-12 !default; +$cardview-nodata-icon-size: $cardview-material-sizes-40 !default; + +$cardview-content-column-gap: $cardview-material-gaps-16 !default; +$cardview-content-row-gap: $cardview-material-gaps-16 !default; $cardview-card-border-size: 1px !default; $cardview-card-min-width: 250px !default; -$cardview-card-border-radius: $cardview-fluent-border-radius-8 !default; +$cardview-card-border-radius: $cardview-material-border-radius-8 !default; + +$cardview-card-cover-noimage-icon-size: $cardview-material-sizes-48 !default; -$cardview-card-content-padding-vertical: $cardview-fluent-paddings-12 !default; -$cardview-card-content-padding-horizontal: $cardview-fluent-paddings-12 !default; +$cardview-card-content-padding-vertical: $cardview-material-paddings-12 !default; +$cardview-card-content-padding-horizontal: $cardview-material-paddings-12 !default; $cardview-card-content-field-gap: 5px !default; -$cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default; -$cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default; +$cardview-card-content-cell-padding-vertical: $cardview-material-paddings-6 !default; +$cardview-card-content-cell-padding-horizontal: $cardview-material-paddings-12 !default; -$cardview-card-header-text-size: $cardview-fluent-text-size-16 !default; -$cardview-card-header-border-radius: 8px !default; +$cardview-card-header-text-size: $cardview-material-text-size-16 !default; +$cardview-card-header-border-radius: $cardview-material-border-radius-8 !default; diff --git a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap index 3f9c8e343b33..490d2eb0f12b 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap +++ b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap @@ -61,6 +61,26 @@ exports[`common initial render should be successfull 1`] = ` style="width: 222px; height: 90px;" /> +
+
+
+
+
+
+ No data +
+
+
@@ -75,11 +95,6 @@ exports[`common initial render should be successfull 1`] = ` class="dx-scrollable-content" style="left: 0px; top: 0px; transform: none;" > - - No data -
- TEST_TITLE +
+ TEST_TITLE +
`; exports[`Content View Caption should render title 1`] = `
- TEST_TITLE : - +
`; diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap index 2346af4bb7c3..0f49555edad2 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap @@ -130,20 +130,15 @@ exports[`Rendering should be rendered correctly 1`] = ` class="dx-cardview-card-content" >
- - Field - : - - - devextreme - + Field + : +
+
+ devextreme
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/cover.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/cover.test.tsx.snap index 519e26a53d55..2ba7b1dac4cf 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/cover.test.tsx.snap +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/cover.test.tsx.snap @@ -8,6 +8,7 @@ exports[`Cover when there is no image should render image thumbnail 1`] = ` diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/value_text.test.tsx.snap b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/value_text.test.tsx.snap index c16424aeef68..b2901f53ca1c 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/value_text.test.tsx.snap +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/value_text.test.tsx.snap @@ -2,19 +2,19 @@ exports[`Content View ValueText should add title attribute 1`] = `
- TEST - +
`; exports[`Content View ValueText should render highlighted text if passed 1`] = `
- USUAL_PART @@ -27,26 +27,26 @@ exports[`Content View ValueText should render highlighted text if passed 1`] = ` USUAL_PART - +
`; exports[`Content View ValueText should render plain text if highlighted text is null 1`] = `
- TEST_TEXT - +
`; exports[`Content View ValueText should set root classes 1`] = `
- TEST - +
`; diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.test.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.test.tsx index db963239ab33..68719e4bdc3d 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.test.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.test.tsx @@ -1,6 +1,7 @@ import { describe, expect, it, } from '@jest/globals'; +import type { Cell } from '@ts/grids/new/grid_core/columns_controller/types'; import { render } from 'inferno'; import { Caption } from './caption'; @@ -10,7 +11,9 @@ describe('Content View', () => { it('should render title', () => { const container = document.createElement('div'); - render(, container); + const cell = { column: { caption: 'TEST_TITLE' } } as unknown as Cell; + + render(, container); expect(container).toMatchSnapshot(); }); @@ -18,8 +21,11 @@ describe('Content View', () => { it('should render template with title', () => { const container = document.createElement('div'); - render( (
{title}
)} + const cell = { column: { caption: 'TEST_TITLE' } } as unknown as Cell; + + render( (
{cell.column.caption}
)} />, container); expect(container).toMatchSnapshot(); diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.tsx index 46d595a12b06..1488e38ca494 100644 --- a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.tsx +++ b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/caption.tsx @@ -1,12 +1,21 @@ +import type { Cell } from '@ts/grids/new/grid_core/columns_controller/types'; +import type { ComponentType } from 'inferno'; + export interface CaptionProps { - title: string | undefined; - template?: (title: string) => JSX.Element; - wordWrapEnabled?: boolean; + cell: Cell; + template?: ComponentType<{ cell: Cell }>; } -export const Caption = ( - { title, template }: CaptionProps, -): JSX.Element => (template && title - ? template(title) - : ({title}:) -); +export const Caption = (props: CaptionProps): JSX.Element => { + const Template = props.template; + + return ( +
+ {Template ? ( +