diff --git a/.github/workflows/demos_visual_tests_frameworks.yml b/.github/workflows/demos_visual_tests_frameworks.yml index e909f943d89d..f9b61931d5ef 100644 --- a/.github/workflows/demos_visual_tests_frameworks.yml +++ b/.github/workflows/demos_visual_tests_frameworks.yml @@ -451,7 +451,7 @@ jobs: working-directory: apps/demos env: CHANGEDFILEINFOSPATH: changed-files.json - BROWSERS: chrome:headless --disable-gpu --window-size=1200,800 --js-flags=--random-seed=2147483647 + BROWSERS: chrome:headless --window-size=1200,800 --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning # DEBUG: hammerhead:*,testcafe:* CONCURRENCY: 4 TCQUARANTINE: true diff --git a/.github/workflows/update_version.yml b/.github/workflows/update_version.yml index ba52c68d223d..db5200824ca1 100644 --- a/.github/workflows/update_version.yml +++ b/.github/workflows/update_version.yml @@ -59,7 +59,7 @@ jobs: git config --global user.name "DX Robot" - name: Bump version - run: pnpm run all:update-version -- ${{ inputs.version }} + run: pnpm run all:update-version ${{ inputs.version }} - name: Commit changes and make PR env: diff --git a/README.md b/README.md index 7f920ee7cf24..e8f65f4b59e9 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,7 @@ The DevExtreme website includes "Getting Started" guides for every aspect of Dev - [Demo Gallery](https://js.devexpress.com/Demos/WidgetsGallery) - [Responsive UI Templates](https://js.devexpress.com/Templates/UITemplates) - [Documentation](https://js.devexpress.com/Documentation) -- [Examples on GitHub](https://github.com/DevExpress/DevExtreme-examples) +- [Examples on GitHub](https://github.com/DevExpress-Examples) - [YouTube videos](https://www.youtube.com/playlist?list=PL8h4jt35t1wjGvgflbHEH_e3b23AA30-z) ## Contributing diff --git a/apps/angular/package.json b/apps/angular/package.json index dd3ca1f02ed0..7475db83a5a3 100644 --- a/apps/angular/package.json +++ b/apps/angular/package.json @@ -2,7 +2,7 @@ "name": "devextreme-angular-playground", "description": "DevExtreme Angular UI and Visualization Components", "private": true, - "version": "24.2.2", + "version": "24.2.3", "author": "Developer Express Inc.", "license": "MIT", "dependencies": { diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js index ca66557ff1eb..8240e9a0e4ca 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js @@ -3,6 +3,8 @@ const apiVersion = '2024-02-01'; const endpoint = 'https://public-api.devexpress.com/demo-openai'; const apiKey = 'DEMO'; const REGENERATION_TEXT = 'Regeneration...'; +const CHAT_DISABLED_CLASS = 'dx-chat-disabled'; +const ALERT_TIMEOUT = 1000 * 60; const user = { id: 'user', }; diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js index f6a6fd6b18ec..861136fb745b 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js @@ -25,8 +25,8 @@ $(() => { temperature: 0.7, }; - const responseAzure = await chatService.chat.completions.create(params); - const data = { choices: responseAzure.choices }; + const response = await chatService.chat.completions.create(params); + const data = { choices: response.choices }; return data.choices[0].message?.content; } @@ -40,10 +40,23 @@ $(() => { setTimeout(() => { instance.option({ alerts: [] }); - }, 10000); + }, ALERT_TIMEOUT); } - async function processMessageSending() { + function toggleDisabledState(disabled, event) { + instance.element().toggleClass(CHAT_DISABLED_CLASS, disabled); + + if (disabled) { + event?.target.blur(); + } else { + event?.target.focus(); + } + }; + + async function processMessageSending(message, event) { + toggleDisabledState(true, event); + + messages.push({ role: 'user', content: message.text }); instance.option({ typingUsers: [assistant] }); try { @@ -54,15 +67,20 @@ $(() => { messages.push({ role: 'assistant', content: aiResponse }); - renderMessage(aiResponse); + renderAssistantMessage(aiResponse); }, 200); } catch { instance.option({ typingUsers: [] }); + messages.pop(); alertLimitReached(); + } finally { + toggleDisabledState(false, event); } } async function regenerate() { + toggleDisabledState(true); + try { const aiResponse = await getAIResponse(messages.slice(0, -1)); @@ -71,10 +89,12 @@ $(() => { } catch { updateLastMessage(messages.at(-1).content); alertLimitReached(); + } finally { + toggleDisabledState(false); } } - function renderMessage(text) { + function renderAssistantMessage(text) { const message = { id: Date.now(), timestamp: new Date(), @@ -82,17 +102,17 @@ $(() => { text, }; - customStore.push([{ type: 'insert', data: message }]); + dataSource.store().push([{ type: 'insert', data: message }]); } function updateLastMessage(text) { - const { items } = instance.option(); + const items = dataSource.items(); const lastMessage = items.at(-1); const data = { text: text ?? REGENERATION_TEXT, }; - customStore.push([{ + dataSource.store().push([{ type: 'update', key: lastMessage.id, data, @@ -110,6 +130,57 @@ $(() => { return result; } + function onCopyButtonClick(component, text) { + navigator.clipboard?.writeText(text); + + component.option({ icon: 'check' }); + + setTimeout(() => { + component.option({ icon: 'copy' }); + }, 2500); + } + + function onRegenerateButtonClick() { + if (instance.option('alerts').length) { + return; + } + + updateLastMessage(); + regenerate(); + } + + function renderMessageContent(message, element) { + $('
') + .addClass('dx-chat-messagebubble-text') + .html(convertToHtml(message.text)) + .appendTo(element); + + const $buttonContainer = $('
') + .addClass('dx-bubble-button-container'); + + $('
') + .dxButton({ + icon: 'copy', + stylingMode: 'text', + hint: 'Copy', + onClick: ({ component }) => { + onCopyButtonClick(component, message.text); + }, + }) + .appendTo($buttonContainer); + + $('
') + .dxButton({ + icon: 'refresh', + stylingMode: 'text', + hint: 'Regenerate', + onClick: onRegenerateButtonClick, + }) + .appendTo($buttonContainer); + + $buttonContainer.appendTo(element); + } + const customStore = new DevExpress.data.CustomStore({ key: 'id', load: () => { @@ -132,21 +203,27 @@ $(() => { return d.promise(); }, }); + + const dataSource = new DevExpress.data.DataSource({ + store: customStore, + paginate: false, + }); const instance = $('#dx-ai-chat').dxChat({ - dataSource: customStore, + user, + height: 710, + dataSource, reloadOnChange: false, showAvatar: false, showDayHeaders: false, - user, - height: 710, onMessageEntered: (e) => { - const { message } = e; + const { message, event } = e; - customStore.push([{ type: 'insert', data: { id: Date.now(), ...message } }]); - messages.push({ role: 'user', content: message.text }); - - processMessageSending(); + dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]); + + if (!instance.option('alerts').length) { + processMessageSending(message, event); + } }, messageTemplate: (data, element) => { const { message } = data; @@ -156,42 +233,7 @@ $(() => { return; } - const $textElement = $('
') - .addClass('dx-chat-messagebubble-text') - .html(convertToHtml(message.text)) - .appendTo(element); - - const $buttonContainer = $('
') - .addClass('dx-bubble-button-container'); - - $('
') - .dxButton({ - icon: 'copy', - stylingMode: 'text', - hint: 'Copy', - onClick: ({ component }) => { - navigator.clipboard.writeText($textElement.text()); - component.option({ icon: 'check' }); - setTimeout(() => { - component.option({ icon: 'copy' }); - }, 2500); - }, - }) - .appendTo($buttonContainer); - - $('
') - .dxButton({ - icon: 'refresh', - stylingMode: 'text', - hint: 'Regenerate', - onClick: () => { - updateLastMessage(); - regenerate(); - }, - }) - .appendTo($buttonContainer); - - $buttonContainer.appendTo(element); + renderMessageContent(message, element); }, }).dxChat('instance'); }); diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css index 4d6ace3854f6..52d39eaa6e2c 100644 --- a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css +++ b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css @@ -58,3 +58,8 @@ font-size: revert; font-weight: revert; } + +.dx-chat-disabled .dx-chat-messagebox { + opacity: 0.5; + pointer-events: none; +} diff --git a/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css new file mode 100644 index 000000000000..9c2d96ac5b00 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.css @@ -0,0 +1,38 @@ +.demo-container { + min-width: 720px; + display: flex; + gap: 20px; +} + +::ng-deep .chat-container { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; +} + +::ng-deep .options { + padding: 20px; + display: flex; + flex-direction: column; + min-width: 280px; + background-color: rgba(191, 191, 191, 0.15); + gap: 16px; +} + +::ng-deep .dx-chat { + max-width: 480px; +} + +::ng-deep .caption { + font-size: var(--dx-font-size-sm); + font-weight: 500; +} + +::ng-deep .option-separator { + border-bottom: 1px solid var(--dx-color-border); +} + +::ng-deep .dx-avatar { + border: 1px solid var(--dx-color-border); +} diff --git a/apps/demos/Demos/Chat/Customization/Angular/app/app.component.html b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.html new file mode 100644 index 000000000000..f56f172747d3 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.html @@ -0,0 +1,79 @@ +
+
+ + +
+ +
+
Options
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ Day Header Format: + +
+ +
+ +
+ +
+ +
+ Message Timestamp Format: + +
+ +
+ +
+ +
+
+
diff --git a/apps/demos/Demos/Chat/Customization/Angular/app/app.component.ts b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.ts new file mode 100644 index 000000000000..4761f32429ad --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Angular/app/app.component.ts @@ -0,0 +1,63 @@ +import { NgModule, Component, enableProdMode } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { DxChatModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular'; +import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat'; +import { Observable } from 'rxjs'; +import { AppService } from './app.service'; + +if (!/localhost/.test(document.location.host)) { + enableProdMode(); +} + +let modulePrefix = ''; +// @ts-ignore +if (window && window.config.packageConfigPaths) { + modulePrefix = '/app'; +} + +@Component({ + selector: 'demo-app', + templateUrl: `.${modulePrefix}/app.component.html`, + styleUrls: [`.${modulePrefix}/app.component.css`], +}) +export class AppComponent { + currentUser: User; + + supportAgent: User; + + messages$: Observable; + + dayHeaderFormats = this.appService.dayHeaderFormats; + + messageTimestampFormats = this.appService.messageTimestampFormats; + + dayHeaderLabel = this.appService.dayHeaderLabel; + + messageTimestampLabel = this.appService.messageTimestampLabel; + + constructor(private readonly appService: AppService) { + [this.currentUser, this.supportAgent] = this.appService.getUsers(); + this.messages$ = this.appService.messages$; + } + + onMessageEntered(event: MessageEnteredEvent) { + this.appService.onMessageEntered(event); + } +} + +@NgModule({ + imports: [ + BrowserModule, + DxChatModule, + DxCheckBoxModule, + DxSelectBoxModule, + ], + declarations: [AppComponent], + bootstrap: [AppComponent], + providers: [AppService], +}) +export class AppModule { } + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/apps/demos/Demos/Chat/Customization/Angular/app/app.service.ts b/apps/demos/Demos/Chat/Customization/Angular/app/app.service.ts new file mode 100644 index 000000000000..76090483287b --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Angular/app/app.service.ts @@ -0,0 +1,90 @@ +import { Injectable } from '@angular/core'; +import { Observable, BehaviorSubject } from 'rxjs'; +import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat'; + +@Injectable({ + providedIn: 'root', +}) +export class AppService { + date: Date; + + currentUser: User = { + id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', + name: 'John Doe', + }; + + supportAgent: User = { + id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3', + name: 'Support Agent', + avatarUrl: '../../../../images/petersmith.png', + }; + + dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; + + messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; + + messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; + + dayHeaderLabel = { 'aria-label': 'Day Header Format' }; + + messages: Message[] = []; + + messagesSubject: BehaviorSubject = new BehaviorSubject([]); + + constructor() { + this.date = new Date(); + this.date.setHours(0, 0, 0, 0); + + this.messages = [ + { + timestamp: this.getTimestamp(this.date, -9), + author: this.supportAgent, + text: 'Hello, John!\nHow can I assist you today?', + }, + { + timestamp: this.getTimestamp(this.date, -7), + author: this.currentUser, + text: 'Hi, I\'m having trouble accessing my account.', + }, + { + timestamp: this.getTimestamp(this.date, -7), + author: this.currentUser, + text: 'It says my password is incorrect.', + }, + { + timestamp: this.getTimestamp(this.date, -7), + author: this.supportAgent, + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', + }, + { + timestamp: this.getTimestamp(this.date, 1), + author: this.currentUser, + text: 'john.doe1357', + }, + { + timestamp: this.getTimestamp(this.date, 1), + author: this.supportAgent, + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', + }, + ]; + + this.messagesSubject.next(this.messages); + } + + get messages$(): Observable { + return this.messagesSubject.asObservable(); + } + + getUsers(): User[] { + return [this.currentUser, this.supportAgent]; + } + + getTimestamp(date: Date, offsetMinutes = 0): number { + return date.getTime() + offsetMinutes * 60000; + } + + onMessageEntered(event: MessageEnteredEvent) { + this.messages = [...this.messages, event.message]; + this.messagesSubject.next(this.messages); + } +} diff --git a/apps/demos/Demos/Chat/Customization/Angular/index.html b/apps/demos/Demos/Chat/Customization/Angular/index.html new file mode 100644 index 000000000000..1ab1fb54a1df --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Angular/index.html @@ -0,0 +1,26 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + + +
+ Loading... +
+ + diff --git a/apps/demos/Demos/Chat/Customization/React/App.tsx b/apps/demos/Demos/Chat/Customization/React/App.tsx new file mode 100644 index 000000000000..0702563c2342 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/React/App.tsx @@ -0,0 +1,119 @@ +import React, { useState, useCallback } from 'react'; +import Chat, { ChatTypes } from 'devextreme-react/chat'; +import { MessageEnteredEvent } from 'devextreme/ui/chat'; +import SelectBox from 'devextreme-react/select-box'; +import CheckBox from 'devextreme-react/check-box'; + +import { + currentUser, + messages as initialMessages, + dayHeaderFormats as headerFormats, + messageTimestampFormats as messageTimestamps, + messageTimestampLabel, + dayHeaderLabel, +} from './data.ts'; + +export default function App() { + const [messages, setMessages] = useState(initialMessages); + const [showAvatar, setShowAvatar] = useState(true); + const [showUsername, setShowUsername] = useState(true); + const [showDayHeaders, setDayHeaders] = useState(true); + const [dayHeaderFormat, setDayHeaderFormat] = useState(headerFormats[0]); + const [showMessageTimestamp, setMessageTimestamp] = useState(true); + const [messageTimestampFormat, setMessageTimestampFormat] = useState(messageTimestamps[0]); + const [isDisabled, setDisabled] = useState(false); + + const onMessageEntered = useCallback(({ message }: MessageEnteredEvent) => { + setMessages((prevMessages) => [...prevMessages, message]); + }, []); + + return ( + +
+ +
+ +
+
Options
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ Day Header Format: + +
+ +
+ +
+ +
+ +
+ Message Timestamp Format: + +
+ +
+ +
+ +
+
+ + ); +} diff --git a/apps/demos/Demos/Chat/Customization/React/data.ts b/apps/demos/Demos/Chat/Customization/React/data.ts new file mode 100644 index 000000000000..de004f28c98f --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/React/data.ts @@ -0,0 +1,57 @@ +import { ChatTypes } from 'devextreme-react/chat'; + +function getTimestamp(date, offsetMinutes = 0) { + return date.getTime() + offsetMinutes * 60000; +} + +const date = new Date(); +date.setHours(0, 0, 0, 0); + +export const currentUser: ChatTypes.User = { + id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', + name: 'John Doe', +}; + +export const supportAgent: ChatTypes.User = { + id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3', + name: 'Support Agent', + avatarUrl: '../../../../images/petersmith.png', +}; + +export const messages = [ + { + timestamp: getTimestamp(date, -9), + author: supportAgent, + text: 'Hello, John!\nHow can I assist you today?', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'Hi, I\'m having trouble accessing my account.', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'It says my password is incorrect.', + }, + { + timestamp: getTimestamp(date, -7), + author: supportAgent, + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', + }, + { + timestamp: getTimestamp(date, 1), + author: currentUser, + text: 'john.doe1357', + }, + { + timestamp: getTimestamp(date, 1), + author: supportAgent, + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', + }, +]; + +export const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; +export const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; +export const messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; +export const dayHeaderLabel = { 'aria-label': 'Day Header Format' }; diff --git a/apps/demos/Demos/Chat/Customization/React/index.html b/apps/demos/Demos/Chat/Customization/React/index.html new file mode 100644 index 000000000000..e90d25ad8798 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/React/index.html @@ -0,0 +1,24 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Pagination/Overview/React/index.js b/apps/demos/Demos/Chat/Customization/React/index.tsx similarity index 81% rename from apps/demos/Demos/Pagination/Overview/React/index.js rename to apps/demos/Demos/Chat/Customization/React/index.tsx index d9d7442ce766..8acbec4b6179 100644 --- a/apps/demos/Demos/Pagination/Overview/React/index.js +++ b/apps/demos/Demos/Chat/Customization/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/apps/demos/Demos/Chat/Customization/React/styles.css b/apps/demos/Demos/Chat/Customization/React/styles.css new file mode 100644 index 000000000000..7a5b25461dbc --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/React/styles.css @@ -0,0 +1,38 @@ +#app { + min-width: 720px; + display: flex; + gap: 20px; +} + +.chat-container { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; +} + +.options { + padding: 20px; + display: flex; + flex-direction: column; + min-width: 280px; + background-color: rgba(191, 191, 191, 0.15); + gap: 16px; +} + +.dx-chat { + max-width: 480px; +} + +.caption { + font-size: var(--dx-font-size-sm); + font-weight: 500; +} + +.option-separator { + border-bottom: 1px solid var(--dx-color-border); +} + +.dx-avatar { + border: 1px solid var(--dx-color-border); +} diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/App.js b/apps/demos/Demos/Chat/Customization/ReactJs/App.js new file mode 100644 index 000000000000..92f10777d681 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/ReactJs/App.js @@ -0,0 +1,115 @@ +import React, { useState, useCallback } from 'react'; +import Chat from 'devextreme-react/chat'; +import SelectBox from 'devextreme-react/select-box'; +import CheckBox from 'devextreme-react/check-box'; +import { + currentUser, + messages as initialMessages, + dayHeaderFormats as headerFormats, + messageTimestampFormats as messageTimestamps, + messageTimestampLabel, + dayHeaderLabel, +} from './data.js'; + +export default function App() { + const [messages, setMessages] = useState(initialMessages); + const [showAvatar, setShowAvatar] = useState(true); + const [showUsername, setShowUsername] = useState(true); + const [showDayHeaders, setDayHeaders] = useState(true); + const [dayHeaderFormat, setDayHeaderFormat] = useState(headerFormats[0]); + const [showMessageTimestamp, setMessageTimestamp] = useState(true); + const [messageTimestampFormat, setMessageTimestampFormat] = useState(messageTimestamps[0]); + const [isDisabled, setDisabled] = useState(false); + const onMessageEntered = useCallback(({ message }) => { + setMessages((prevMessages) => [...prevMessages, message]); + }, []); + return ( + +
+ +
+ +
+
Options
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ Day Header Format: + +
+ +
+ +
+ +
+ +
+ Message Timestamp Format: + +
+ +
+ +
+ +
+
+ + ); +} diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/data.js b/apps/demos/Demos/Chat/Customization/ReactJs/data.js new file mode 100644 index 000000000000..40b37bf56ffc --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/ReactJs/data.js @@ -0,0 +1,50 @@ +function getTimestamp(date, offsetMinutes = 0) { + return date.getTime() + offsetMinutes * 60000; +} +const date = new Date(); +date.setHours(0, 0, 0, 0); +export const currentUser = { + id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', + name: 'John Doe', +}; +export const supportAgent = { + id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3', + name: 'Support Agent', + avatarUrl: '../../../../images/petersmith.png', +}; +export const messages = [ + { + timestamp: getTimestamp(date, -9), + author: supportAgent, + text: 'Hello, John!\nHow can I assist you today?', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: "Hi, I'm having trouble accessing my account.", + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'It says my password is incorrect.', + }, + { + timestamp: getTimestamp(date, -7), + author: supportAgent, + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', + }, + { + timestamp: getTimestamp(date, 1), + author: currentUser, + text: 'john.doe1357', + }, + { + timestamp: getTimestamp(date, 1), + author: supportAgent, + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', + }, +]; +export const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; +export const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; +export const messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; +export const dayHeaderLabel = { 'aria-label': 'Day Header Format' }; diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/index.html b/apps/demos/Demos/Chat/Customization/ReactJs/index.html new file mode 100644 index 000000000000..c9ee055d50a5 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/index.js b/apps/demos/Demos/Chat/Customization/ReactJs/index.js new file mode 100644 index 000000000000..b853e0be8242 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/apps/demos/Demos/Chat/Customization/ReactJs/styles.css b/apps/demos/Demos/Chat/Customization/ReactJs/styles.css new file mode 100644 index 000000000000..7a5b25461dbc --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/ReactJs/styles.css @@ -0,0 +1,38 @@ +#app { + min-width: 720px; + display: flex; + gap: 20px; +} + +.chat-container { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; +} + +.options { + padding: 20px; + display: flex; + flex-direction: column; + min-width: 280px; + background-color: rgba(191, 191, 191, 0.15); + gap: 16px; +} + +.dx-chat { + max-width: 480px; +} + +.caption { + font-size: var(--dx-font-size-sm); + font-weight: 500; +} + +.option-separator { + border-bottom: 1px solid var(--dx-color-border); +} + +.dx-avatar { + border: 1px solid var(--dx-color-border); +} diff --git a/apps/demos/Demos/Chat/Customization/Vue/App.vue b/apps/demos/Demos/Chat/Customization/Vue/App.vue new file mode 100644 index 000000000000..2299a9350d15 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Vue/App.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/apps/demos/Demos/Chat/Customization/Vue/data.ts b/apps/demos/Demos/Chat/Customization/Vue/data.ts new file mode 100644 index 000000000000..de0ab54cf1e5 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Vue/data.ts @@ -0,0 +1,55 @@ +const date = new Date(); +date.setHours(0, 0, 0, 0); + +function getTimestamp(date, offsetMinutes = 0) { + return date.getTime() + offsetMinutes * 60000; +} + +export const currentUser = { + id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', + name: 'John Doe', +}; + +export const supportAgent = { + id: 'd16d1a4c-5c67-4e20-b7v0e-2991c22747c3', + name: 'Support Agent', + avatarUrl: '../../../../images/petersmith.png', +}; + +export const messages = [ + { + timestamp: getTimestamp(date, -9), + author: supportAgent, + text: 'Hello, John!\nHow can I assist you today?', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'Hi, I\'m having trouble accessing my account.', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'It says my password is incorrect.', + }, + { + timestamp: getTimestamp(date, -7), + author: supportAgent, + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', + }, + { + timestamp: getTimestamp(date, 1), + author: currentUser, + text: 'john.doe1357', + }, + { + timestamp: getTimestamp(date, 1), + author: supportAgent, + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', + }, +]; + +export const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; +export const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; +export const messageTimestampLabel = { 'aria-label': 'Message Timestamp Format' }; +export const dayHeaderLabel = { 'aria-label': 'Day Header Format' }; diff --git a/apps/demos/Demos/Chat/Customization/Vue/index.html b/apps/demos/Demos/Chat/Customization/Vue/index.html new file mode 100644 index 000000000000..2413f2254bf1 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/Vue/index.html @@ -0,0 +1,29 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Pagination/Overview/Vue/index.js b/apps/demos/Demos/Chat/Customization/Vue/index.ts similarity index 100% rename from apps/demos/Demos/Pagination/Overview/Vue/index.js rename to apps/demos/Demos/Chat/Customization/Vue/index.ts diff --git a/apps/demos/Demos/Chat/Customization/description.md b/apps/demos/Demos/Chat/Customization/description.md new file mode 100644 index 000000000000..d2a48de2bfb3 --- /dev/null +++ b/apps/demos/Demos/Chat/Customization/description.md @@ -0,0 +1,14 @@ +Use the following properties to customize the Chat component: + +- To display/hide Chat UI elements: + - [showAvatar](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showAvatar) + - [showUserName](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showUserName) + - [showDayHeaders](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showDayHeaders) + - [showMessageTimestamp](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showMessageTimestamp) + +- To modify date/time formats: + - [dayHeaderFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dayHeaderFormat) + - [messageTimestampFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTimestampFormat) + +- To deactivate Chat, use the [disabled](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#disabled) property. + \ No newline at end of file diff --git a/apps/demos/Demos/Chat/Customization/jQuery/data.js b/apps/demos/Demos/Chat/Customization/jQuery/data.js index d08b0148f923..a1fac597078e 100644 --- a/apps/demos/Demos/Chat/Customization/jQuery/data.js +++ b/apps/demos/Demos/Chat/Customization/jQuery/data.js @@ -49,5 +49,5 @@ const messages = [ }, ]; -const dayHeaderFormat = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; -const messageTimestampFormat = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; +const dayHeaderFormats = ['dd/MM/yyyy', 'dd.MM.yyyy', 'MMMM dd, yyyy', 'EEEE, MMMM dd']; +const messageTimestampFormats = ['hh:mm a', 'hh:mm:ss a', 'HH:mm', 'HH:mm:ss']; diff --git a/apps/demos/Demos/Chat/Customization/jQuery/index.html b/apps/demos/Demos/Chat/Customization/jQuery/index.html index 982e6920c309..3e7795ca02bb 100644 --- a/apps/demos/Demos/Chat/Customization/jQuery/index.html +++ b/apps/demos/Demos/Chat/Customization/jQuery/index.html @@ -36,8 +36,8 @@
- Day Headers Format: -
+ Day Header Format: +
diff --git a/apps/demos/Demos/Chat/Customization/jQuery/index.js b/apps/demos/Demos/Chat/Customization/jQuery/index.js index 47de3344c96f..60d457efe704 100644 --- a/apps/demos/Demos/Chat/Customization/jQuery/index.js +++ b/apps/demos/Demos/Chat/Customization/jQuery/index.js @@ -3,68 +3,68 @@ $(() => { height: 710, items: messages, user: currentUser, - dayHeaderFormat: dayHeaderFormat[0], + dayHeaderFormat: dayHeaderFormats[0], + messageTimestampFormat: messageTimestampFormats[0], onMessageEntered({ component, message }) { component.renderMessage(message); }, - messageTimestampFormat: messageTimestampFormat[0], }).dxChat('instance'); - $('#chat-disabled').dxCheckBox({ - value: false, - text: 'Disable Chat', + $('#show-avatar').dxCheckBox({ + value: true, + text: 'Avatar', onValueChanged(data) { - chat.option('disabled', data.value); + chat.option('showAvatar', data.value); }, }); - $('#show-day-headers').dxCheckBox({ + $('#show-user-name').dxCheckBox({ value: true, - text: 'Show Day Headers', + text: 'User Name', onValueChanged(data) { - chat.option('showDayHeaders', data.value); + chat.option('showUserName', data.value); }, }); - $('#show-message-timestamp').dxCheckBox({ + $('#show-day-headers').dxCheckBox({ value: true, - text: 'Show Message Timestamp', + text: 'Day Headers', onValueChanged(data) { - chat.option('showMessageTimestamp', data.value); + chat.option('showDayHeaders', data.value); }, }); - $('#show-avatar').dxCheckBox({ - value: true, - text: 'Show Avatar', + $('#day-header-format').dxSelectBox({ + items: dayHeaderFormats, + value: dayHeaderFormats[0], + inputAttr: { 'aria-label': 'Day Header Format' }, onValueChanged(data) { - chat.option('showAvatar', data.value); + chat.option('dayHeaderFormat', data.value); }, }); - $('#show-user-name').dxCheckBox({ + $('#show-message-timestamp').dxCheckBox({ value: true, - text: 'Show User Name', + text: 'Message Timestamp', onValueChanged(data) { - chat.option('showUserName', data.value); + chat.option('showMessageTimestamp', data.value); }, }); - $('#day-headers-format').dxSelectBox({ - items: dayHeaderFormat, - value: dayHeaderFormat[0], - inputAttr: { 'aria-label': 'Day Headers Format' }, + $('#message-timestamp-format').dxSelectBox({ + items: messageTimestampFormats, + value: messageTimestampFormats[0], + inputAttr: { 'aria-label': 'Message Timestamp Format' }, onValueChanged(data) { - chat.option('dayHeaderFormat', data.value); + chat.option('messageTimestampFormat', data.value); }, }); - $('#message-timestamp-format').dxSelectBox({ - items: messageTimestampFormat, - value: messageTimestampFormat[0], - inputAttr: { 'aria-label': 'Message Timestamp Format' }, + $('#chat-disabled').dxCheckBox({ + value: false, + text: 'Disable Chat', onValueChanged(data) { - chat.option('messageTimestampFormat', data.value); + chat.option('disabled', data.value); }, }); }); diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts index d7524f752deb..441a9da8424a 100644 --- a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts +++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts @@ -4,8 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxChatModule } from 'devextreme-angular'; import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat'; -import { AppService } from './app.service'; import { Observable } from 'rxjs'; +import { AppService } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -24,12 +24,16 @@ if (window && window.config.packageConfigPaths) { }) export class AppComponent { currentUser: User; + supportAgent: User; + messages$: Observable; + userChatTypingUsers$: Observable; + supportChatTypingUsers$: Observable; - constructor(private appService: AppService) { + constructor(private readonly appService: AppService) { [this.currentUser, this.supportAgent] = this.appService.getUsers(); this.messages$ = this.appService.messages$; this.userChatTypingUsers$ = this.appService.userChatTypingUsers$; diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts index 890f1fd173f5..2c8860931443 100644 --- a/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts +++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts @@ -23,6 +23,7 @@ export class AppService { messages: Message[] = []; userChatTypingUsersSubject: BehaviorSubject = new BehaviorSubject([]); + supportChatTypingUsersSubject: BehaviorSubject = new BehaviorSubject([]); messagesSubject: BehaviorSubject = new BehaviorSubject([]); @@ -35,32 +36,32 @@ export class AppService { { timestamp: this.getTimestamp(this.date, -9), author: this.supportAgent, - text: 'Hello, John!\nHow can I assist you today?' + text: 'Hello, John!\nHow can I assist you today?', }, { timestamp: this.getTimestamp(this.date, -7), author: this.currentUser, - text: 'Hi, I\'m having trouble accessing my account.' + text: 'Hi, I\'m having trouble accessing my account.', }, { timestamp: this.getTimestamp(this.date, -7), author: this.currentUser, - text: 'It says my password is incorrect.' + text: 'It says my password is incorrect.', }, { timestamp: this.getTimestamp(this.date, -7), author: this.supportAgent, - text: 'I can help you with that. Can you please confirm your UserID for security purposes?' + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', }, { timestamp: this.getTimestamp(this.date, 1), author: this.currentUser, - text: 'john.doe1357' + text: 'john.doe1357', }, { timestamp: this.getTimestamp(this.date, 1), author: this.supportAgent, - text: '✅ Instructions to restore access have been sent to the email address associated with your account.' + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', }, ]; @@ -85,7 +86,7 @@ export class AppService { return [this.currentUser, this.supportAgent]; } - getTimestamp(date: Date, offsetMinutes: number = 0): number { + getTimestamp(date: Date, offsetMinutes = 0): number { return date.getTime() + offsetMinutes * 60000; } diff --git a/apps/demos/Demos/Chat/Overview/React/App.tsx b/apps/demos/Demos/Chat/Overview/React/App.tsx index 57cba74af15e..4fc1a0f2e8a2 100644 --- a/apps/demos/Demos/Chat/Overview/React/App.tsx +++ b/apps/demos/Demos/Chat/Overview/React/App.tsx @@ -11,7 +11,7 @@ export default function App() { const [messages, setMessages] = useState(initialMessages); function onMessageEntered({ message }: MessageEnteredEvent) { - setMessages(prevMessages => [...prevMessages, message]); + setMessages((prevMessages) => [...prevMessages, message]); } function typingStart({ user }: TypingStartEvent) { diff --git a/apps/demos/Demos/Chat/Overview/React/data.ts b/apps/demos/Demos/Chat/Overview/React/data.ts index 45bc06d30ea7..7d233683b19f 100644 --- a/apps/demos/Demos/Chat/Overview/React/data.ts +++ b/apps/demos/Demos/Chat/Overview/React/data.ts @@ -22,31 +22,31 @@ export const initialMessages = [ { timestamp: getTimestamp(date, -9), author: supportAgent, - text: 'Hello, John!\nHow can I assist you today?' + text: 'Hello, John!\nHow can I assist you today?', }, { timestamp: getTimestamp(date, -7), author: currentUser, - text: 'Hi, I\'m having trouble accessing my account.' + text: 'Hi, I\'m having trouble accessing my account.', }, { timestamp: getTimestamp(date, -7), author: currentUser, - text: 'It says my password is incorrect.' + text: 'It says my password is incorrect.', }, { timestamp: getTimestamp(date, -7), author: supportAgent, - text: 'I can help you with that. Can you please confirm your UserID for security purposes?' + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', }, { timestamp: getTimestamp(date, 1), author: currentUser, - text: 'john.doe1357' + text: 'john.doe1357', }, { timestamp: getTimestamp(date, 1), author: supportAgent, - text: '✅ Instructions to restore access have been sent to the email address associated with your account.' + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', }, ]; diff --git a/apps/demos/Demos/Chat/Overview/Vue/App.vue b/apps/demos/Demos/Chat/Overview/Vue/App.vue index e39b85502c55..3fcf8fe9a28d 100644 --- a/apps/demos/Demos/Chat/Overview/Vue/App.vue +++ b/apps/demos/Demos/Chat/Overview/Vue/App.vue @@ -1,62 +1,63 @@ - - + + diff --git a/apps/demos/Demos/Chat/Overview/Vue/data.ts b/apps/demos/Demos/Chat/Overview/Vue/data.ts index 00420df767bc..c1305ea47dc5 100644 --- a/apps/demos/Demos/Chat/Overview/Vue/data.ts +++ b/apps/demos/Demos/Chat/Overview/Vue/data.ts @@ -2,49 +2,49 @@ const date = new Date(); date.setHours(0, 0, 0, 0); function getTimestamp(date, offsetMinutes = 0) { - return date.getTime() + offsetMinutes * 60000; + return date.getTime() + offsetMinutes * 60000; } export const currentUser = { - id: "c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3", - name: "John Doe", + id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3', + name: 'John Doe', }; export const supportAgent = { - id: "d16d1a4c-5c67-4e20-b7v0e-2991c22747c3", - name: "Support Agent", - avatarUrl: "../../../../images/petersmith.png", + id: 'd16d1a4c-5c67-4e20-b7v0e-2991c22747c3', + name: 'Support Agent', + avatarUrl: '../../../../images/petersmith.png', }; export const messages = [ - { - timestamp: getTimestamp(date, -9), - author: supportAgent, - text: "Hello, John!\nHow can I assist you today?" - }, - { - timestamp: getTimestamp(date, -7), - author: currentUser, - text: "Hi, I'm having trouble accessing my account." - }, - { - timestamp: getTimestamp(date, -7), - author: currentUser, - text: "It says my password is incorrect." - }, - { - timestamp: getTimestamp(date, -7), - author: supportAgent, - text: "I can help you with that. Can you please confirm your UserID for security purposes?" - }, - { - timestamp: getTimestamp(date, 1), - author: currentUser, - text: "john.doe1357" - }, - { - timestamp: getTimestamp(date, 1), - author: supportAgent, - text: "✅ Instructions to restore access have been sent to the email address associated with your account." - }, + { + timestamp: getTimestamp(date, -9), + author: supportAgent, + text: 'Hello, John!\nHow can I assist you today?', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'Hi, I\'m having trouble accessing my account.', + }, + { + timestamp: getTimestamp(date, -7), + author: currentUser, + text: 'It says my password is incorrect.', + }, + { + timestamp: getTimestamp(date, -7), + author: supportAgent, + text: 'I can help you with that. Can you please confirm your UserID for security purposes?', + }, + { + timestamp: getTimestamp(date, 1), + author: currentUser, + text: 'john.doe1357', + }, + { + timestamp: getTimestamp(date, 1), + author: supportAgent, + text: '✅ Instructions to restore access have been sent to the email address associated with your account.', + }, ]; diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts index ecce89fabec9..8e3d25d17e7d 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts +++ b/apps/demos/Demos/Localization/UsingGlobalize/Angular/app/app.component.ts @@ -8,8 +8,8 @@ import 'devextreme/localization/globalize/date'; import 'devextreme/localization/globalize/currency'; import 'devextreme/localization/globalize/message'; -import deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; +import deMessages from 'npm:devextreme/common/core/localization/messages/de.json!json'; +import ruMessages from 'npm:devextreme/common/core/localization/messages/ru.json!json'; import deCldrData from 'npm:devextreme-cldr-data/de.json!json'; import ruCldrData from 'npm:devextreme-cldr-data/ru.json!json'; diff --git a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx b/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx index b8c231be96b3..724a2794ad7d 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx +++ b/apps/demos/Demos/Localization/UsingGlobalize/React/App.tsx @@ -9,8 +9,8 @@ import 'devextreme/localization/globalize/date'; import 'devextreme/localization/globalize/currency'; import 'devextreme/localization/globalize/message'; -import deMessages from 'devextreme/localization/messages/de.json'; -import ruMessages from 'devextreme/localization/messages/ru.json'; +import deMessages from 'devextreme/common/core/localization/messages/de.json'; +import ruMessages from 'devextreme/common/core/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; diff --git a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js index 2ebd1e15d128..79660350cfd1 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js +++ b/apps/demos/Demos/Localization/UsingGlobalize/ReactJs/App.js @@ -7,8 +7,8 @@ import 'devextreme/localization/globalize/number'; import 'devextreme/localization/globalize/date'; import 'devextreme/localization/globalize/currency'; import 'devextreme/localization/globalize/message'; -import deMessages from 'devextreme/localization/messages/de.json'; -import ruMessages from 'devextreme/localization/messages/ru.json'; +import deMessages from 'devextreme/common/core/localization/messages/de.json'; +import ruMessages from 'devextreme/common/core/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; diff --git a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue index cb5add991431..7361909f8c1d 100644 --- a/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue +++ b/apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue @@ -69,8 +69,8 @@ import 'devextreme/localization/globalize/currency'; import 'devextreme/localization/globalize/message'; /* eslint-disable import/no-unresolved */ /* eslint-disable import/no-webpack-loader-syntax */ -import * as deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import * as ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; +import * as deMessages from 'npm:devextreme/common/core/localization/messages/de.json!json'; +import * as ruMessages from 'npm:devextreme/common/core/localization/messages/ru.json!json'; import * as deCldrData from 'npm:devextreme-cldr-data/de.json!json'; import * as ruCldrData from 'npm:devextreme-cldr-data/ru.json!json'; import * as supplementalCldrData from 'npm:devextreme-cldr-data/supplemental.json!json'; diff --git a/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.ts b/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.ts index cc7aa5448a6d..f90ed845c760 100644 --- a/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.ts +++ b/apps/demos/Demos/Localization/UsingIntl/Angular/app/app.component.ts @@ -5,8 +5,8 @@ import { DxSelectBoxModule, DxDataGridModule } from 'devextreme-angular'; import { locale, loadMessages, formatMessage } from 'devextreme/localization'; -import deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; +import deMessages from 'npm:devextreme/common/core/localization/messages/de.json!json'; +import ruMessages from 'npm:devextreme/common/core/localization/messages/ru.json!json'; import { Locale, Payment, Service } from './app.service'; if (!/localhost/.test(document.location.host)) { diff --git a/apps/demos/Demos/Localization/UsingIntl/React/App.tsx b/apps/demos/Demos/Localization/UsingIntl/React/App.tsx index c3033eafd311..db018e87c73b 100644 --- a/apps/demos/Demos/Localization/UsingIntl/React/App.tsx +++ b/apps/demos/Demos/Localization/UsingIntl/React/App.tsx @@ -4,8 +4,8 @@ import React, { useState } from 'react'; import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box'; -import deMessages from 'devextreme/localization/messages/de.json'; -import ruMessages from 'devextreme/localization/messages/ru.json'; +import deMessages from 'devextreme/common/core/localization/messages/de.json'; +import ruMessages from 'devextreme/common/core/localization/messages/ru.json'; import { locale, loadMessages, formatMessage } from 'devextreme/localization'; import service from './data.ts'; diff --git a/apps/demos/Demos/Localization/UsingIntl/ReactJs/App.js b/apps/demos/Demos/Localization/UsingIntl/ReactJs/App.js index 7e8d2f742bce..15a5a303cf11 100644 --- a/apps/demos/Demos/Localization/UsingIntl/ReactJs/App.js +++ b/apps/demos/Demos/Localization/UsingIntl/ReactJs/App.js @@ -3,8 +3,8 @@ import React, { useState } from 'react'; import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; import SelectBox from 'devextreme-react/select-box'; -import deMessages from 'devextreme/localization/messages/de.json'; -import ruMessages from 'devextreme/localization/messages/ru.json'; +import deMessages from 'devextreme/common/core/localization/messages/de.json'; +import ruMessages from 'devextreme/common/core/localization/messages/ru.json'; import { locale, loadMessages, formatMessage } from 'devextreme/localization'; import service from './data.js'; diff --git a/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue b/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue index bb1cfb9efc0a..dbd7d9b810ed 100644 --- a/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue +++ b/apps/demos/Demos/Localization/UsingIntl/Vue/App.vue @@ -65,8 +65,8 @@ import { import DxSelectBox, { DxSelectBoxTypes } from 'devextreme-vue/select-box'; /* eslint-disable import/no-unresolved */ /* eslint-disable import/no-webpack-loader-syntax */ -import * as deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import * as ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; +import * as deMessages from 'npm:devextreme/common/core/localization/messages/de.json!json'; +import * as ruMessages from 'npm:devextreme/common/core/localization/messages/ru.json!json'; import { locale as dxLocale, loadMessages, formatMessage as dxFormatMessage } from 'devextreme/localization'; import service from './data.ts'; diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css new file mode 100644 index 000000000000..f65579fc60ad --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css @@ -0,0 +1,100 @@ +body { + overflow-x: hidden; +} + +.demo-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + min-width: 720px; + width: 100%; +} + +::ng-deep .employees { + display: flex; + flex-wrap: wrap; + gap: 16px; + min-height: 644px; + padding-bottom: 24px; +} + +::ng-deep employee-card { + width: 100%; + max-height: 312px; + align-self: stretch; + overflow: hidden; + border: var(--dx-border-width) solid var(--dx-color-border); + border-radius: var(--dx-border-radius); + background-color: var(--dx-component-color-bg); +} + +::ng-deep .employees.employees--forth employee-card { + min-width: 250px; + width: 390px; + flex-basis: calc(50% - 10px); +} + +::ng-deep .employees.employees--six employee-card { + flex-basis: calc(33.3% - 12.5px); +} + +::ng-deep .employees__img-wrapper { + height: 180px; + position: relative; + overflow: hidden; + border-bottom: var(--dx-border-width) solid var(--dx-color-border); + background-color: #fff; +} + +::ng-deep .employees__img { + display: block; + height: 220px; + position: absolute; + content: ""; + left: 50%; + top: 0; + transform: translateX(-50%); +} + +::ng-deep .employees__info { + padding: 24px; +} + +::ng-deep .employees__info-row { + margin-bottom: 8px; + text-wrap: nowrap; +} + +::ng-deep .employees__info-label { + display: inline-block; + font-weight: 600; + vertical-align: middle; +} + +::ng-deep .employees.employees--forth .employees__info-label { + width: 160px; +} + +::ng-deep .employees.employees--six .employees__info-label { + width: 80px; +} + +::ng-deep .employees__info-value { + display: inline-block; + text-wrap: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + overflow: hidden; + white-space:nowrap +} + +::ng-deep .employees.employees--forth .employees__info-value { + max-width: 180px; +} + +::ng-deep .employees.employees--six .employees__info-value { + max-width: 120px; +} diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html index ddc4ed8f5862..175a0142f5e6 100644 --- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html @@ -1,7 +1,22 @@ - - +
+
+ @for (employee of pageEmployees; track employee.ID) { + + } +
+ + + +
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts index 7ea2d957c548..125f11487eca 100644 --- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.component.ts @@ -1,8 +1,9 @@ import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { DxDataGridModule } from 'devextreme-angular'; -import { Customer, Service } from './app.service'; +import { DxPaginationModule } from 'devextreme-angular'; +import { Employee, Service } from './app.service'; +import { EmployeeCard } from './employee-card/employee-card.component'; if (!/localhost/.test(document.location.host)) { enableProdMode(); @@ -17,22 +18,53 @@ if (window && window.config.packageConfigPaths) { @Component({ selector: 'demo-app', templateUrl: `.${modulePrefix}/app.component.html`, + styleUrls: [`.${modulePrefix}/app.component.css`], providers: [Service], }) export class AppComponent { - customers: Customer[]; + employees: Employee[]; + + pageEmployees: Employee[]; + + itemCount: number; + + readonly allowedPageSizes = [4, 6]; + + showInfo = true; + + showNavigationButtons = true; + + pageIndex = 1; + + pageSize = 4; + + onPageIndexChange(val) { + this.pageIndex = val; + this.setPageEmployees(); + } + + onPageSizeChange(val) { + this.pageSize = val; + this.setPageEmployees(); + } + + setPageEmployees() { + this.pageEmployees = this.employees.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize); + } constructor(service: Service) { - this.customers = service.getCustomers(); + this.employees = service.getEmployees(); + this.itemCount = this.employees.length; + this.setPageEmployees(); } } @NgModule({ imports: [ BrowserModule, - DxDataGridModule, + DxPaginationModule, ], - declarations: [AppComponent], + declarations: [AppComponent, EmployeeCard], bootstrap: [AppComponent], }) export class AppModule { } diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts index db238661893a..32d2a4fbb35d 100644 --- a/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/app.service.ts @@ -1,150 +1,434 @@ import { Injectable } from '@angular/core'; -export class Customer { +export class Employee { ID: number; - CompanyName: string; + FullName: string; - Address: string; + Title: string; - City: string; + Employee_Picture: string; - State: string; + Picture: string; - Zipcode: number; + MobilePhone: string; - Phone: string; - - Fax: string; - - Website: string; } -let customers: Customer[] = [{ - ID: 1, - CompanyName: 'Super Mart of the West', - Address: '702 SW 8th Street', - City: 'Bentonville', - State: 'Arkansas', - Zipcode: 72716, - Phone: '(800) 555-2797', - Fax: '(800) 555-2171', - Website: 'http://www.nowebsitesupermart.dx', -}, { - ID: 2, - CompanyName: 'Electronics Depot', - Address: '2455 Paces Ferry Road NW', - City: 'Atlanta', - State: 'Georgia', - Zipcode: 30339, - Phone: '(800) 595-3232', - Fax: '(800) 595-3231', - Website: 'http://www.nowebsitedepot.dx', -}, { - ID: 3, - CompanyName: 'K&S Music', - Address: '1000 Nicllet Mall', - City: 'Minneapolis', - State: 'Minnesota', - Zipcode: 55403, - Phone: '(612) 304-6073', - Fax: '(612) 304-6074', - Website: 'http://www.nowebsitemusic.dx', -}, { - ID: 4, - CompanyName: "Tom's Club", - Address: '999 Lake Drive', - City: 'Issaquah', - State: 'Washington', - Zipcode: 98027, - Phone: '(800) 955-2292', - Fax: '(800) 955-2293', - Website: 'http://www.nowebsitetomsclub.dx', -}, { - ID: 5, - CompanyName: 'E-Mart', - Address: '3333 Beverly Rd', - City: 'Hoffman Estates', - State: 'Illinois', - Zipcode: 60179, - Phone: '(847) 286-2500', - Fax: '(847) 286-2501', - Website: 'http://www.nowebsiteemart.dx', -}, { - ID: 6, - CompanyName: 'Walters', - Address: '200 Wilmot Rd', - City: 'Deerfield', - State: 'Illinois', - Zipcode: 60015, - Phone: '(847) 940-2500', - Fax: '(847) 940-2501', - Website: 'http://www.nowebsitewalters.dx', -}, { - ID: 7, - CompanyName: 'StereoShack', - Address: '400 Commerce S', - City: 'Fort Worth', - State: 'Texas', - Zipcode: 76102, - Phone: '(817) 820-0741', - Fax: '(817) 820-0742', - Website: 'http://www.nowebsiteshack.dx', -}, { - ID: 8, - CompanyName: 'Circuit Town', - Address: '2200 Kensington Court', - City: 'Oak Brook', - State: 'Illinois', - Zipcode: 60523, - Phone: '(800) 955-2929', - Fax: '(800) 955-9392', - Website: 'http://www.nowebsitecircuittown.dx', -}, { - ID: 9, - CompanyName: 'Premier Buy', - Address: '7601 Penn Avenue South', - City: 'Richfield', - State: 'Minnesota', - Zipcode: 55423, - Phone: '(612) 291-1000', - Fax: '(612) 291-2001', - Website: 'http://www.nowebsitepremierbuy.dx', -}, { - ID: 10, - CompanyName: 'ElectrixMax', - Address: '263 Shuman Blvd', - City: 'Naperville', - State: 'Illinois', - Zipcode: 60563, - Phone: '(630) 438-7800', - Fax: '(630) 438-7801', - Website: 'http://www.nowebsiteelectrixmax.dx', -}, { - ID: 11, - CompanyName: 'Video Emporium', - Address: '1201 Elm Street', - City: 'Dallas', - State: 'Texas', - Zipcode: 75270, - Phone: '(214) 854-3000', - Fax: '(214) 854-3001', - Website: 'http://www.nowebsitevideoemporium.dx', -}, { - ID: 12, - CompanyName: 'Screen Shop', - Address: '1000 Lowes Blvd', - City: 'Mooresville', - State: 'North Carolina', - Zipcode: 28117, - Phone: '(800) 445-6937', - Fax: '(800) 445-6938', - Website: 'http://www.nowebsitescreenshop.dx', -}]; +const employees: Employee[] = [ + { + ID: 1, + FullName: 'John Heart', + Title: 'CEO', + Employee_Picture: '01.png', + Picture: '../../../../images/employees/01.png', + MobilePhone: '2135559392', + }, + { + ID: 2, + FullName: 'Samantha Bright', + Title: 'COO', + Employee_Picture: '30.png', + Picture: '../../../../images/employees/30.png', + MobilePhone: '2135552858', + }, + { + ID: 3, + FullName: 'Arthur Miller', + Title: 'CTO', + Employee_Picture: '10.png', + Picture: '../../../../images/employees/10.png', + MobilePhone: '3105558583', + }, + { + ID: 4, + FullName: 'Robert Reagan', + Title: 'CMO', + Employee_Picture: '03.png', + Picture: '../../../../images/employees/03.png', + MobilePhone: '8185552387', + }, + { + ID: 5, + FullName: 'Greta Sims', + Title: 'HR Manager', + Employee_Picture: '04.png', + Picture: '../../../../images/employees/04.png', + MobilePhone: '8185556546', + }, + { + ID: 6, + FullName: 'Brett Wade', + Title: 'IT Manager', + Employee_Picture: '05.png', + Picture: '../../../../images/employees/05.png', + MobilePhone: '6265550358', + }, + { + ID: 7, + FullName: 'Sandra Johnson', + Title: 'Controller', + Employee_Picture: '06.png', + Picture: '../../../../images/employees/06.png', + MobilePhone: '5625552082', + }, + { + ID: 8, + FullName: 'Ed Holmes', + Title: 'Sales Manager', + Employee_Picture: '11.png', + Picture: '../../../../images/employees/11.png', + MobilePhone: '3105551288', + }, + { + ID: 9, + FullName: 'Barb Banks', + Title: 'Support Manager', + Employee_Picture: '20.png', + Picture: '../../../../images/employees/20.png', + MobilePhone: '3105553355', + }, + { + ID: 10, + FullName: 'Kevin Carter', + Title: 'Shipping Manager', + Employee_Picture: '07.png', + Picture: '../../../../images/employees/07.png', + MobilePhone: '2135552840', + }, + { + ID: 11, + FullName: 'Cindy Stanwick', + Title: 'HR Assistant', + Employee_Picture: '08.png', + Picture: '../../../../images/employees/08.png', + MobilePhone: '8185556655', + }, + { + ID: 12, + FullName: 'Sammy Hill', + Title: 'Sales Assistant', + Employee_Picture: '12.png', + Picture: '../../../../images/employees/12.png', + MobilePhone: '6265557292', + }, + { + ID: 13, + FullName: 'Davey Jones', + Title: 'Shipping Assistant', + Employee_Picture: '13.png', + Picture: '../../../../images/employees/13.png', + MobilePhone: '6265550281', + }, + { + ID: 14, + FullName: 'Victor Norris', + Title: 'Shipping Assistant', + Employee_Picture: '14.png', + Picture: '../../../../images/employees/14.png', + MobilePhone: '2135559278', + }, + { + ID: 15, + FullName: 'Mary Stern', + Title: 'Shipping Assistant', + Employee_Picture: '15.png', + Picture: '../../../../images/employees/15.png', + MobilePhone: '8185557857', + }, + { + ID: 16, + FullName: 'Robin Cosworth', + Title: 'Shipping Assistant', + Employee_Picture: '16.png', + Picture: '../../../../images/employees/16.png', + MobilePhone: '8185550942', + }, + { + ID: 17, + FullName: 'Kelly Rodriguez', + Title: 'Support Assistant', + Employee_Picture: '17.png', + Picture: '../../../../images/employees/17.png', + MobilePhone: '8185559248', + }, + { + ID: 18, + FullName: 'James Anderson', + Title: 'Support Assistant', + Employee_Picture: '18.png', + Picture: '../../../../images/employees/18.png', + MobilePhone: '3235554702', + }, + { + ID: 19, + FullName: 'Antony Remmen', + Title: 'Support Assistant', + Employee_Picture: '19.png', + Picture: '../../../../images/employees/19.png', + MobilePhone: '3105556625', + }, + { + ID: 20, + FullName: 'Olivia Peyton', + Title: 'Sales Assistant', + Employee_Picture: '09.png', + Picture: '../../../../images/employees/09.png', + MobilePhone: '3105552728', + }, + { + ID: 21, + FullName: 'Taylor Riley', + Title: 'Network Admin', + Employee_Picture: '21.png', + Picture: '../../../../images/employees/21.png', + MobilePhone: '3105557276', + }, + { + ID: 22, + FullName: 'Amelia Harper', + Title: 'Network Admin', + Employee_Picture: '22.png', + Picture: '../../../../images/employees/22.png', + MobilePhone: '2135554276', + }, + { + ID: 23, + FullName: 'Wally Hobbs', + Title: 'Programmer', + Employee_Picture: '23.png', + Picture: '../../../../images/employees/23.png', + MobilePhone: '8185558872', + }, + { + ID: 24, + FullName: 'Brad Jameson', + Title: 'Programmer', + Employee_Picture: '24.png', + Picture: '../../../../images/employees/24.png', + MobilePhone: '8185554646', + }, + { + ID: 25, + FullName: 'Karen Goodson', + Title: 'Programmer', + Employee_Picture: '25.png', + Picture: '../../../../images/employees/25.png', + MobilePhone: '6265550908', + }, + { + ID: 26, + FullName: 'Marcus Orbison', + Title: 'Travel Coordinator', + Employee_Picture: '26.png', + Picture: '../../../../images/employees/26.png', + MobilePhone: '2135557098', + }, + { + ID: 27, + FullName: 'Sandy Bright', + Title: 'Benefits Coordinator', + Employee_Picture: '27.png', + Picture: '../../../../images/employees/27.png', + MobilePhone: '8185550524', + }, + { + ID: 28, + FullName: 'Morgan Kennedy', + Title: 'Graphic Designer', + Employee_Picture: '28.png', + Picture: '../../../../images/employees/28.png', + MobilePhone: '8185558238', + }, + { + ID: 29, + FullName: 'Violet Bailey', + Title: 'Jr Graphic Designer', + Employee_Picture: '29.png', + Picture: '../../../../images/employees/29.png', + MobilePhone: '8185552478', + }, + { + ID: 30, + FullName: 'Ken Samuelson', + Title: 'Ombudsman', + Employee_Picture: '02.png', + Picture: '../../../../images/employees/02.png', + MobilePhone: '5625559282', + }, + { + ID: 31, + FullName: 'Nat Maguiree', + Title: 'Trainer', + Employee_Picture: '31.png', + Picture: '../../../../images/employees/31.png', + MobilePhone: '5625558377', + }, + { + ID: 32, + FullName: 'Bart Arnaz', + Title: 'Director of Engineering', + Employee_Picture: '32.png', + Picture: '../../../../images/employees/32.png', + MobilePhone: '7145552000', + }, + { + ID: 33, + FullName: 'Leah Simpson', + Title: 'Test Coordinator', + Employee_Picture: '33.png', + Picture: '../../../../images/employees/33.png', + MobilePhone: '5625595830', + }, + { + ID: 34, + FullName: 'Arnie Schwartz', + Title: 'Engineer', + Employee_Picture: '34.png', + Picture: '../../../../images/employees/34.png', + MobilePhone: '7145558882', + }, + { + ID: 35, + FullName: 'Billy Zimmer', + Title: 'Engineer', + Employee_Picture: '51.png', + Picture: '../../../../images/employees/51.png', + MobilePhone: '9095556939', + }, + { + ID: 36, + FullName: 'Samantha Piper', + Title: 'Engineer', + Employee_Picture: '35.png', + Picture: '../../../../images/employees/35.png', + MobilePhone: '3235554512', + }, + { + ID: 37, + FullName: 'Maggie Boxter', + Title: 'Engineer', + Employee_Picture: '36.png', + Picture: '../../../../images/employees/36.png', + MobilePhone: '7145557239', + }, + { + ID: 38, + FullName: 'Terry Bradley', + Title: 'QA Engineer', + Employee_Picture: '37.png', + Picture: '../../../../images/employees/37.png', + MobilePhone: '8055552788', + }, + { + ID: 39, + FullName: 'Gabe Jones', + Title: 'Retail Coordinator', + Employee_Picture: '38.png', + Picture: '../../../../images/employees/38.png', + MobilePhone: '3105555395', + }, + { + ID: 40, + FullName: 'Lucy Ball', + Title: 'Sales Assistant', + Employee_Picture: '39.png', + Picture: '../../../../images/employees/39.png', + MobilePhone: '3105553357', + }, + { + ID: 41, + FullName: 'Jim Packard', + Title: 'Retail Sales Manager', + Employee_Picture: '40.png', + Picture: '../../../../images/employees/40.png', + MobilePhone: '6615558224', + }, + { + ID: 42, + FullName: 'Hannah Brookly', + Title: 'Online Sales Manager', + Employee_Picture: '41.png', + Picture: '../../../../images/employees/41.png', + MobilePhone: '8055553627', + }, + { + ID: 43, + FullName: 'Harv Mudd', + Title: 'Retail Sales Manager', + Employee_Picture: '42.png', + Picture: '../../../../images/employees/42.png', + MobilePhone: '8315553895', + }, + { + ID: 44, + FullName: 'Clark Morgan', + Title: 'Retail Sales Manager', + Employee_Picture: '43.png', + Picture: '../../../../images/employees/43.png', + MobilePhone: '9255552525', + }, + { + ID: 45, + FullName: 'Todd Hoffman', + Title: 'Retail Sales Manager', + Employee_Picture: '44.png', + Picture: '../../../../images/employees/44.png', + MobilePhone: '9255553579', + }, + { + ID: 46, + FullName: 'Jackie Garmin', + Title: 'Support Assistant', + Employee_Picture: '45.png', + Picture: '../../../../images/employees/45.png', + MobilePhone: '2135551824', + }, + { + ID: 47, + FullName: 'Lincoln Bartlett', + Title: 'Sales Assistant', + Employee_Picture: '46.png', + Picture: '../../../../images/employees/46.png', + MobilePhone: '2135558272', + }, + { + ID: 48, + FullName: 'Brad Farkus', + Title: 'Engineer', + Employee_Picture: '47.png', + Picture: '../../../../images/employees/47.png', + MobilePhone: '2135553626', + }, + { + ID: 49, + FullName: 'Jenny Hobbs', + Title: 'Shipping Assistant', + Employee_Picture: '48.png', + Picture: '../../../../images/employees/48.png', + MobilePhone: '3105552668', + }, + { + ID: 50, + FullName: 'Dallas Lou', + Title: 'Shipping Assistant', + Employee_Picture: '49.png', + Picture: '../../../../images/employees/49.png', + MobilePhone: '2135558357', + }, + { + ID: 51, + FullName: 'Stu Pizaro', + Title: 'Engineer', + Employee_Picture: '50.png', + Picture: '../../../../images/employees/50.png', + MobilePhone: '2135552552', + }, +]; @Injectable() export class Service { - getCustomers() { - return customers; + getEmployees() { + return employees; } } diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html new file mode 100644 index 000000000000..436ef5afdbfc --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.html @@ -0,0 +1,21 @@ +
+ +
+
+
+ Full Name: + {{ employee.FullName }} +
+
+ Position: + {{ employee.Title }} +
+
+ Phone: + {{ employee.MobilePhone }} +
+
diff --git a/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts new file mode 100644 index 000000000000..7f112f55fbdb --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Angular/app/employee-card/employee-card.component.ts @@ -0,0 +1,16 @@ +import { Component, Input } from '@angular/core'; +import { Employee } from '../app.service'; + +let modulePrefix = ''; +// @ts-ignore +if (window && window.config.packageConfigPaths) { + modulePrefix = '/app'; +} + +@Component({ + selector: 'employee-card', + templateUrl: `.${modulePrefix}/employee-card/employee-card.component.html`, +}) +export class EmployeeCard { + @Input() employee: Employee; +} diff --git a/apps/demos/Demos/Pagination/Overview/Angular/index.html b/apps/demos/Demos/Pagination/Overview/Angular/index.html index 3bb93e38968b..d6cce972f42b 100644 --- a/apps/demos/Demos/Pagination/Overview/Angular/index.html +++ b/apps/demos/Demos/Pagination/Overview/Angular/index.html @@ -8,7 +8,7 @@ - + diff --git a/apps/demos/Demos/Pagination/Overview/React/App.js b/apps/demos/Demos/Pagination/Overview/React/App.js deleted file mode 100644 index 81cf17b7a8a0..000000000000 --- a/apps/demos/Demos/Pagination/Overview/React/App.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import Text from "./Text.js"; -import Pagination from "devextreme-react/pagination"; -import { customers } from "./data.js"; - -const columns = ["CompanyName", "City", "State", "Phone", "Fax"]; - -const App = () => { - return ( - <> - - - - ); -}; - -export default App; diff --git a/apps/demos/Demos/Pagination/Overview/React/App.tsx b/apps/demos/Demos/Pagination/Overview/React/App.tsx new file mode 100644 index 000000000000..43ffc99aae3b --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/App.tsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import Pagination from 'devextreme-react/pagination'; +import EmployeeGallery from './EmployeesGallery.tsx'; + +import { employees } from './data.ts'; + +const PAGE_SIZES = [4, 6]; + +const App = () => { + const [pageSize, setPageSize] = useState(4); + const [pageIndex, setPageIndex] = useState(1); + + return ( + <> + + + + ); +}; + +export default App; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx new file mode 100644 index 000000000000..cf450dd52775 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { Employee } from './data'; + +interface EmployeeCardProps { + employee: Employee; +} + +const EmployeeCard = ({ employee }: EmployeeCardProps) => { + return ( +
+
+ {employee.FullName} +
+
+
+ Full Name: + {employee.FullName} +
+ +
+ Position: + {employee.Title} +
+ +
+ Phone: + {employee.MobilePhone} +
+
+
+ ); +}; + +export default EmployeeCard; diff --git a/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx new file mode 100644 index 000000000000..c8667c9b344f --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import EmployeeCard from './EmployeeCard.tsx'; +import { Employee } from './data'; + +interface EmployeeGalleryProps { + employees: Employee[]; + pageSize: number; + pageIndex: number; +} + +const EmployeeGallery = ({ employees, pageSize, pageIndex }: EmployeeGalleryProps) => { + const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; + const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); + + return ( +
+ {pageEmployees.map((employee) => ( + + ))} +
+ ); +}; + +export default EmployeeGallery; diff --git a/apps/demos/Demos/Pagination/Overview/React/Text.js b/apps/demos/Demos/Pagination/Overview/React/Text.js deleted file mode 100644 index f1cc30aefb20..000000000000 --- a/apps/demos/Demos/Pagination/Overview/React/Text.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const Text = () => { - return "test text"; -}; - -export default Text; diff --git a/apps/demos/Demos/Pagination/Overview/React/data.js b/apps/demos/Demos/Pagination/Overview/React/data.js deleted file mode 100644 index 6380157422df..000000000000 --- a/apps/demos/Demos/Pagination/Overview/React/data.js +++ /dev/null @@ -1,121 +0,0 @@ -export const customers = [{ - ID: 1, - CompanyName: 'Super Mart of the West', - Address: '702 SW 8th Street', - City: 'Bentonville', - State: 'Arkansas', - Zipcode: 72716, - Phone: '(800) 555-2797', - Fax: '(800) 555-2171', - Website: 'http://www.nowebsitesupermart.dx', -}, { - ID: 2, - CompanyName: 'Electronics Depot', - Address: '2455 Paces Ferry Road NW', - City: 'Atlanta', - State: 'Georgia', - Zipcode: 30339, - Phone: '(800) 595-3232', - Fax: '(800) 595-3231', - Website: 'http://www.nowebsitedepot.dx', -}, { - ID: 3, - CompanyName: 'K&S Music', - Address: '1000 Nicllet Mall', - City: 'Minneapolis', - State: 'Minnesota', - Zipcode: 55403, - Phone: '(612) 304-6073', - Fax: '(612) 304-6074', - Website: 'http://www.nowebsitemusic.dx', -}, { - ID: 4, - CompanyName: "Tom's Club", - Address: '999 Lake Drive', - City: 'Issaquah', - State: 'Washington', - Zipcode: 98027, - Phone: '(800) 955-2292', - Fax: '(800) 955-2293', - Website: 'http://www.nowebsitetomsclub.dx', -}, { - ID: 5, - CompanyName: 'E-Mart', - Address: '3333 Beverly Rd', - City: 'Hoffman Estates', - State: 'Illinois', - Zipcode: 60179, - Phone: '(847) 286-2500', - Fax: '(847) 286-2501', - Website: 'http://www.nowebsiteemart.dx', -}, { - ID: 6, - CompanyName: 'Walters', - Address: '200 Wilmot Rd', - City: 'Deerfield', - State: 'Illinois', - Zipcode: 60015, - Phone: '(847) 940-2500', - Fax: '(847) 940-2501', - Website: 'http://www.nowebsitewalters.dx', -}, { - ID: 7, - CompanyName: 'StereoShack', - Address: '400 Commerce S', - City: 'Fort Worth', - State: 'Texas', - Zipcode: 76102, - Phone: '(817) 820-0741', - Fax: '(817) 820-0742', - Website: 'http://www.nowebsiteshack.dx', -}, { - ID: 8, - CompanyName: 'Circuit Town', - Address: '2200 Kensington Court', - City: 'Oak Brook', - State: 'Illinois', - Zipcode: 60523, - Phone: '(800) 955-2929', - Fax: '(800) 955-9392', - Website: 'http://www.nowebsitecircuittown.dx', -}, { - ID: 9, - CompanyName: 'Premier Buy', - Address: '7601 Penn Avenue South', - City: 'Richfield', - State: 'Minnesota', - Zipcode: 55423, - Phone: '(612) 291-1000', - Fax: '(612) 291-2001', - Website: 'http://www.nowebsitepremierbuy.dx', -}, { - ID: 10, - CompanyName: 'ElectrixMax', - Address: '263 Shuman Blvd', - City: 'Naperville', - State: 'Illinois', - Zipcode: 60563, - Phone: '(630) 438-7800', - Fax: '(630) 438-7801', - Website: 'http://www.nowebsiteelectrixmax.dx', -}, { - ID: 11, - CompanyName: 'Video Emporium', - Address: '1201 Elm Street', - City: 'Dallas', - State: 'Texas', - Zipcode: 75270, - Phone: '(214) 854-3000', - Fax: '(214) 854-3001', - Website: 'http://www.nowebsitevideoemporium.dx', -}, { - ID: 12, - CompanyName: 'Screen Shop', - Address: '1000 Lowes Blvd', - City: 'Mooresville', - State: 'North Carolina', - Zipcode: 28117, - Phone: '(800) 445-6937', - Fax: '(800) 445-6938', - Website: 'http://www.nowebsitescreenshop.dx', -}]; diff --git a/apps/demos/Demos/Pagination/Overview/React/data.ts b/apps/demos/Demos/Pagination/Overview/React/data.ts new file mode 100644 index 000000000000..bd2e43e18ba2 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/data.ts @@ -0,0 +1,419 @@ +export interface Employee { + ID: number; + FullName: string; + Title: string; + Employee_Picture: string; + Picture: string; + MobilePhone: string; +} + +export const employees: Employee[] = [ + { + ID: 1, + FullName: 'John Heart', + Title: 'CEO', + Employee_Picture: '01.png', + Picture: '../../../../images/employees/01.png', + MobilePhone: '2135559392', + }, + { + ID: 2, + FullName: 'Samantha Bright', + Title: 'COO', + Employee_Picture: '30.png', + Picture: '../../../../images/employees/30.png', + MobilePhone: '2135552858', + }, + { + ID: 3, + FullName: 'Arthur Miller', + Title: 'CTO', + Employee_Picture: '10.png', + Picture: '../../../../images/employees/10.png', + MobilePhone: '3105558583', + }, + { + ID: 4, + FullName: 'Robert Reagan', + Title: 'CMO', + Employee_Picture: '03.png', + Picture: '../../../../images/employees/03.png', + MobilePhone: '8185552387', + }, + { + ID: 5, + FullName: 'Greta Sims', + Title: 'HR Manager', + Employee_Picture: '04.png', + Picture: '../../../../images/employees/04.png', + MobilePhone: '8185556546', + }, + { + ID: 6, + FullName: 'Brett Wade', + Title: 'IT Manager', + Employee_Picture: '05.png', + Picture: '../../../../images/employees/05.png', + MobilePhone: '6265550358', + }, + { + ID: 7, + FullName: 'Sandra Johnson', + Title: 'Controller', + Employee_Picture: '06.png', + Picture: '../../../../images/employees/06.png', + MobilePhone: '5625552082', + }, + { + ID: 8, + FullName: 'Ed Holmes', + Title: 'Sales Manager', + Employee_Picture: '11.png', + Picture: '../../../../images/employees/11.png', + MobilePhone: '3105551288', + }, + { + ID: 9, + FullName: 'Barb Banks', + Title: 'Support Manager', + Employee_Picture: '20.png', + Picture: '../../../../images/employees/20.png', + MobilePhone: '3105553355', + }, + { + ID: 10, + FullName: 'Kevin Carter', + Title: 'Shipping Manager', + Employee_Picture: '07.png', + Picture: '../../../../images/employees/07.png', + MobilePhone: '2135552840', + }, + { + ID: 11, + FullName: 'Cindy Stanwick', + Title: 'HR Assistant', + Employee_Picture: '08.png', + Picture: '../../../../images/employees/08.png', + MobilePhone: '8185556655', + }, + { + ID: 12, + FullName: 'Sammy Hill', + Title: 'Sales Assistant', + Employee_Picture: '12.png', + Picture: '../../../../images/employees/12.png', + MobilePhone: '6265557292', + }, + { + ID: 13, + FullName: 'Davey Jones', + Title: 'Shipping Assistant', + Employee_Picture: '13.png', + Picture: '../../../../images/employees/13.png', + MobilePhone: '6265550281', + }, + { + ID: 14, + FullName: 'Victor Norris', + Title: 'Shipping Assistant', + Employee_Picture: '14.png', + Picture: '../../../../images/employees/14.png', + MobilePhone: '2135559278', + }, + { + ID: 15, + FullName: 'Mary Stern', + Title: 'Shipping Assistant', + Employee_Picture: '15.png', + Picture: '../../../../images/employees/15.png', + MobilePhone: '8185557857', + }, + { + ID: 16, + FullName: 'Robin Cosworth', + Title: 'Shipping Assistant', + Employee_Picture: '16.png', + Picture: '../../../../images/employees/16.png', + MobilePhone: '8185550942', + }, + { + ID: 17, + FullName: 'Kelly Rodriguez', + Title: 'Support Assistant', + Employee_Picture: '17.png', + Picture: '../../../../images/employees/17.png', + MobilePhone: '8185559248', + }, + { + ID: 18, + FullName: 'James Anderson', + Title: 'Support Assistant', + Employee_Picture: '18.png', + Picture: '../../../../images/employees/18.png', + MobilePhone: '3235554702', + }, + { + ID: 19, + FullName: 'Antony Remmen', + Title: 'Support Assistant', + Employee_Picture: '19.png', + Picture: '../../../../images/employees/19.png', + MobilePhone: '3105556625', + }, + { + ID: 20, + FullName: 'Olivia Peyton', + Title: 'Sales Assistant', + Employee_Picture: '09.png', + Picture: '../../../../images/employees/09.png', + MobilePhone: '3105552728', + }, + { + ID: 21, + FullName: 'Taylor Riley', + Title: 'Network Admin', + Employee_Picture: '21.png', + Picture: '../../../../images/employees/21.png', + MobilePhone: '3105557276', + }, + { + ID: 22, + FullName: 'Amelia Harper', + Title: 'Network Admin', + Employee_Picture: '22.png', + Picture: '../../../../images/employees/22.png', + MobilePhone: '2135554276', + }, + { + ID: 23, + FullName: 'Wally Hobbs', + Title: 'Programmer', + Employee_Picture: '23.png', + Picture: '../../../../images/employees/23.png', + MobilePhone: '8185558872', + }, + { + ID: 24, + FullName: 'Brad Jameson', + Title: 'Programmer', + Employee_Picture: '24.png', + Picture: '../../../../images/employees/24.png', + MobilePhone: '8185554646', + }, + { + ID: 25, + FullName: 'Karen Goodson', + Title: 'Programmer', + Employee_Picture: '25.png', + Picture: '../../../../images/employees/25.png', + MobilePhone: '6265550908', + }, + { + ID: 26, + FullName: 'Marcus Orbison', + Title: 'Travel Coordinator', + Employee_Picture: '26.png', + Picture: '../../../../images/employees/26.png', + MobilePhone: '2135557098', + }, + { + ID: 27, + FullName: 'Sandy Bright', + Title: 'Benefits Coordinator', + Employee_Picture: '27.png', + Picture: '../../../../images/employees/27.png', + MobilePhone: '8185550524', + }, + { + ID: 28, + FullName: 'Morgan Kennedy', + Title: 'Graphic Designer', + Employee_Picture: '28.png', + Picture: '../../../../images/employees/28.png', + MobilePhone: '8185558238', + }, + { + ID: 29, + FullName: 'Violet Bailey', + Title: 'Jr Graphic Designer', + Employee_Picture: '29.png', + Picture: '../../../../images/employees/29.png', + MobilePhone: '8185552478', + }, + { + ID: 30, + FullName: 'Ken Samuelson', + Title: 'Ombudsman', + Employee_Picture: '02.png', + Picture: '../../../../images/employees/02.png', + MobilePhone: '5625559282', + }, + { + ID: 31, + FullName: 'Nat Maguiree', + Title: 'Trainer', + Employee_Picture: '31.png', + Picture: '../../../../images/employees/31.png', + MobilePhone: '5625558377', + }, + { + ID: 32, + FullName: 'Bart Arnaz', + Title: 'Director of Engineering', + Employee_Picture: '32.png', + Picture: '../../../../images/employees/32.png', + MobilePhone: '7145552000', + }, + { + ID: 33, + FullName: 'Leah Simpson', + Title: 'Test Coordinator', + Employee_Picture: '33.png', + Picture: '../../../../images/employees/33.png', + MobilePhone: '5625595830', + }, + { + ID: 34, + FullName: 'Arnie Schwartz', + Title: 'Engineer', + Employee_Picture: '34.png', + Picture: '../../../../images/employees/34.png', + MobilePhone: '7145558882', + }, + { + ID: 35, + FullName: 'Billy Zimmer', + Title: 'Engineer', + Employee_Picture: '51.png', + Picture: '../../../../images/employees/51.png', + MobilePhone: '9095556939', + }, + { + ID: 36, + FullName: 'Samantha Piper', + Title: 'Engineer', + Employee_Picture: '35.png', + Picture: '../../../../images/employees/35.png', + MobilePhone: '3235554512', + }, + { + ID: 37, + FullName: 'Maggie Boxter', + Title: 'Engineer', + Employee_Picture: '36.png', + Picture: '../../../../images/employees/36.png', + MobilePhone: '7145557239', + }, + { + ID: 38, + FullName: 'Terry Bradley', + Title: 'QA Engineer', + Employee_Picture: '37.png', + Picture: '../../../../images/employees/37.png', + MobilePhone: '8055552788', + }, + { + ID: 39, + FullName: 'Gabe Jones', + Title: 'Retail Coordinator', + Employee_Picture: '38.png', + Picture: '../../../../images/employees/38.png', + MobilePhone: '3105555395', + }, + { + ID: 40, + FullName: 'Lucy Ball', + Title: 'Sales Assistant', + Employee_Picture: '39.png', + Picture: '../../../../images/employees/39.png', + MobilePhone: '3105553357', + }, + { + ID: 41, + FullName: 'Jim Packard', + Title: 'Retail Sales Manager', + Employee_Picture: '40.png', + Picture: '../../../../images/employees/40.png', + MobilePhone: '6615558224', + }, + { + ID: 42, + FullName: 'Hannah Brookly', + Title: 'Online Sales Manager', + Employee_Picture: '41.png', + Picture: '../../../../images/employees/41.png', + MobilePhone: '8055553627', + }, + { + ID: 43, + FullName: 'Harv Mudd', + Title: 'Retail Sales Manager', + Employee_Picture: '42.png', + Picture: '../../../../images/employees/42.png', + MobilePhone: '8315553895', + }, + { + ID: 44, + FullName: 'Clark Morgan', + Title: 'Retail Sales Manager', + Employee_Picture: '43.png', + Picture: '../../../../images/employees/43.png', + MobilePhone: '9255552525', + }, + { + ID: 45, + FullName: 'Todd Hoffman', + Title: 'Retail Sales Manager', + Employee_Picture: '44.png', + Picture: '../../../../images/employees/44.png', + MobilePhone: '9255553579', + }, + { + ID: 46, + FullName: 'Jackie Garmin', + Title: 'Support Assistant', + Employee_Picture: '45.png', + Picture: '../../../../images/employees/45.png', + MobilePhone: '2135551824', + }, + { + ID: 47, + FullName: 'Lincoln Bartlett', + Title: 'Sales Assistant', + Employee_Picture: '46.png', + Picture: '../../../../images/employees/46.png', + MobilePhone: '2135558272', + }, + { + ID: 48, + FullName: 'Brad Farkus', + Title: 'Engineer', + Employee_Picture: '47.png', + Picture: '../../../../images/employees/47.png', + MobilePhone: '2135553626', + }, + { + ID: 49, + FullName: 'Jenny Hobbs', + Title: 'Shipping Assistant', + Employee_Picture: '48.png', + Picture: '../../../../images/employees/48.png', + MobilePhone: '3105552668', + }, + { + ID: 50, + FullName: 'Dallas Lou', + Title: 'Shipping Assistant', + Employee_Picture: '49.png', + Picture: '../../../../images/employees/49.png', + MobilePhone: '2135558357', + }, + { + ID: 51, + FullName: 'Stu Pizaro', + Title: 'Engineer', + Employee_Picture: '50.png', + Picture: '../../../../images/employees/50.png', + MobilePhone: '2135552552', + }, +]; \ No newline at end of file diff --git a/apps/demos/Demos/Pagination/Overview/React/index.html b/apps/demos/Demos/Pagination/Overview/React/index.html index b9f3a9764b01..637762a048ae 100644 --- a/apps/demos/Demos/Pagination/Overview/React/index.html +++ b/apps/demos/Demos/Pagination/Overview/React/index.html @@ -6,18 +6,19 @@ +
-
+
diff --git a/apps/demos/Demos/Pagination/Overview/React/index.tsx b/apps/demos/Demos/Pagination/Overview/React/index.tsx new file mode 100644 index 000000000000..4677a2c67a3f --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.querySelector('.container'), +); diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/style.css b/apps/demos/Demos/Pagination/Overview/React/styles.css similarity index 87% rename from apps/demos/Demos/Pagination/Overview/jQuery/style.css rename to apps/demos/Demos/Pagination/Overview/React/styles.css index e8cf2907c6d0..346ba3ee6b1e 100644 --- a/apps/demos/Demos/Pagination/Overview/jQuery/style.css +++ b/apps/demos/Demos/Pagination/Overview/React/styles.css @@ -1,16 +1,8 @@ body { - padding: 0; - margin: 0; - background-color: var(--dx-color-main-bg); - overflow: hidden; - font-size: var(--dx-font-size); - line-height: var(--dx-line-height); - color: var(--dx-color-text); + overflow-x: hidden; } .demo-container { - width: 100vw; - height: 100vh; display: flex; flex-direction: column; align-items: center; @@ -25,7 +17,7 @@ body { display: flex; flex-wrap: wrap; gap: 16px; - min-height: 640px; + min-height: 644px; padding-bottom: 24px; } @@ -95,7 +87,7 @@ body { text-wrap: nowrap; text-overflow: ellipsis; vertical-align: middle; - overflow:hidden; + overflow: hidden; white-space:nowrap } diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/App.js b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js new file mode 100644 index 000000000000..23eb27a81f2c --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/App.js @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import Pagination from 'devextreme-react/pagination'; +import EmployeeGallery from './EmployeesGallery.js'; +import { employees } from './data.js'; + +const PAGE_SIZES = [4, 6]; +const App = () => { + const [pageSize, setPageSize] = useState(4); + const [pageIndex, setPageIndex] = useState(1); + return ( + + + + + ); +}; +export default App; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js new file mode 100644 index 000000000000..378fb1f24a84 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeeCard.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const EmployeeCard = ({ employee }) => ( +
+
+ {employee.FullName} +
+
+
+ Full Name: + {employee.FullName} +
+ +
+ Position: + {employee.Title} +
+ +
+ Phone: + {employee.MobilePhone} +
+
+
+); +export default EmployeeCard; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js new file mode 100644 index 000000000000..a3714d8df614 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/EmployeesGallery.js @@ -0,0 +1,18 @@ +import React from 'react'; +import EmployeeCard from './EmployeeCard.js'; + +const EmployeeGallery = ({ employees, pageSize, pageIndex }) => { + const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six'; + const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); + return ( +
+ {pageEmployees.map((employee) => ( + + ))} +
+ ); +}; +export default EmployeeGallery; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/data.js b/apps/demos/Demos/Pagination/Overview/ReactJs/data.js new file mode 100644 index 000000000000..e25402db0d59 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/data.js @@ -0,0 +1,410 @@ +export const employees = [ + { + ID: 1, + FullName: 'John Heart', + Title: 'CEO', + Employee_Picture: '01.png', + Picture: '../../../../images/employees/01.png', + MobilePhone: '2135559392', + }, + { + ID: 2, + FullName: 'Samantha Bright', + Title: 'COO', + Employee_Picture: '30.png', + Picture: '../../../../images/employees/30.png', + MobilePhone: '2135552858', + }, + { + ID: 3, + FullName: 'Arthur Miller', + Title: 'CTO', + Employee_Picture: '10.png', + Picture: '../../../../images/employees/10.png', + MobilePhone: '3105558583', + }, + { + ID: 4, + FullName: 'Robert Reagan', + Title: 'CMO', + Employee_Picture: '03.png', + Picture: '../../../../images/employees/03.png', + MobilePhone: '8185552387', + }, + { + ID: 5, + FullName: 'Greta Sims', + Title: 'HR Manager', + Employee_Picture: '04.png', + Picture: '../../../../images/employees/04.png', + MobilePhone: '8185556546', + }, + { + ID: 6, + FullName: 'Brett Wade', + Title: 'IT Manager', + Employee_Picture: '05.png', + Picture: '../../../../images/employees/05.png', + MobilePhone: '6265550358', + }, + { + ID: 7, + FullName: 'Sandra Johnson', + Title: 'Controller', + Employee_Picture: '06.png', + Picture: '../../../../images/employees/06.png', + MobilePhone: '5625552082', + }, + { + ID: 8, + FullName: 'Ed Holmes', + Title: 'Sales Manager', + Employee_Picture: '11.png', + Picture: '../../../../images/employees/11.png', + MobilePhone: '3105551288', + }, + { + ID: 9, + FullName: 'Barb Banks', + Title: 'Support Manager', + Employee_Picture: '20.png', + Picture: '../../../../images/employees/20.png', + MobilePhone: '3105553355', + }, + { + ID: 10, + FullName: 'Kevin Carter', + Title: 'Shipping Manager', + Employee_Picture: '07.png', + Picture: '../../../../images/employees/07.png', + MobilePhone: '2135552840', + }, + { + ID: 11, + FullName: 'Cindy Stanwick', + Title: 'HR Assistant', + Employee_Picture: '08.png', + Picture: '../../../../images/employees/08.png', + MobilePhone: '8185556655', + }, + { + ID: 12, + FullName: 'Sammy Hill', + Title: 'Sales Assistant', + Employee_Picture: '12.png', + Picture: '../../../../images/employees/12.png', + MobilePhone: '6265557292', + }, + { + ID: 13, + FullName: 'Davey Jones', + Title: 'Shipping Assistant', + Employee_Picture: '13.png', + Picture: '../../../../images/employees/13.png', + MobilePhone: '6265550281', + }, + { + ID: 14, + FullName: 'Victor Norris', + Title: 'Shipping Assistant', + Employee_Picture: '14.png', + Picture: '../../../../images/employees/14.png', + MobilePhone: '2135559278', + }, + { + ID: 15, + FullName: 'Mary Stern', + Title: 'Shipping Assistant', + Employee_Picture: '15.png', + Picture: '../../../../images/employees/15.png', + MobilePhone: '8185557857', + }, + { + ID: 16, + FullName: 'Robin Cosworth', + Title: 'Shipping Assistant', + Employee_Picture: '16.png', + Picture: '../../../../images/employees/16.png', + MobilePhone: '8185550942', + }, + { + ID: 17, + FullName: 'Kelly Rodriguez', + Title: 'Support Assistant', + Employee_Picture: '17.png', + Picture: '../../../../images/employees/17.png', + MobilePhone: '8185559248', + }, + { + ID: 18, + FullName: 'James Anderson', + Title: 'Support Assistant', + Employee_Picture: '18.png', + Picture: '../../../../images/employees/18.png', + MobilePhone: '3235554702', + }, + { + ID: 19, + FullName: 'Antony Remmen', + Title: 'Support Assistant', + Employee_Picture: '19.png', + Picture: '../../../../images/employees/19.png', + MobilePhone: '3105556625', + }, + { + ID: 20, + FullName: 'Olivia Peyton', + Title: 'Sales Assistant', + Employee_Picture: '09.png', + Picture: '../../../../images/employees/09.png', + MobilePhone: '3105552728', + }, + { + ID: 21, + FullName: 'Taylor Riley', + Title: 'Network Admin', + Employee_Picture: '21.png', + Picture: '../../../../images/employees/21.png', + MobilePhone: '3105557276', + }, + { + ID: 22, + FullName: 'Amelia Harper', + Title: 'Network Admin', + Employee_Picture: '22.png', + Picture: '../../../../images/employees/22.png', + MobilePhone: '2135554276', + }, + { + ID: 23, + FullName: 'Wally Hobbs', + Title: 'Programmer', + Employee_Picture: '23.png', + Picture: '../../../../images/employees/23.png', + MobilePhone: '8185558872', + }, + { + ID: 24, + FullName: 'Brad Jameson', + Title: 'Programmer', + Employee_Picture: '24.png', + Picture: '../../../../images/employees/24.png', + MobilePhone: '8185554646', + }, + { + ID: 25, + FullName: 'Karen Goodson', + Title: 'Programmer', + Employee_Picture: '25.png', + Picture: '../../../../images/employees/25.png', + MobilePhone: '6265550908', + }, + { + ID: 26, + FullName: 'Marcus Orbison', + Title: 'Travel Coordinator', + Employee_Picture: '26.png', + Picture: '../../../../images/employees/26.png', + MobilePhone: '2135557098', + }, + { + ID: 27, + FullName: 'Sandy Bright', + Title: 'Benefits Coordinator', + Employee_Picture: '27.png', + Picture: '../../../../images/employees/27.png', + MobilePhone: '8185550524', + }, + { + ID: 28, + FullName: 'Morgan Kennedy', + Title: 'Graphic Designer', + Employee_Picture: '28.png', + Picture: '../../../../images/employees/28.png', + MobilePhone: '8185558238', + }, + { + ID: 29, + FullName: 'Violet Bailey', + Title: 'Jr Graphic Designer', + Employee_Picture: '29.png', + Picture: '../../../../images/employees/29.png', + MobilePhone: '8185552478', + }, + { + ID: 30, + FullName: 'Ken Samuelson', + Title: 'Ombudsman', + Employee_Picture: '02.png', + Picture: '../../../../images/employees/02.png', + MobilePhone: '5625559282', + }, + { + ID: 31, + FullName: 'Nat Maguiree', + Title: 'Trainer', + Employee_Picture: '31.png', + Picture: '../../../../images/employees/31.png', + MobilePhone: '5625558377', + }, + { + ID: 32, + FullName: 'Bart Arnaz', + Title: 'Director of Engineering', + Employee_Picture: '32.png', + Picture: '../../../../images/employees/32.png', + MobilePhone: '7145552000', + }, + { + ID: 33, + FullName: 'Leah Simpson', + Title: 'Test Coordinator', + Employee_Picture: '33.png', + Picture: '../../../../images/employees/33.png', + MobilePhone: '5625595830', + }, + { + ID: 34, + FullName: 'Arnie Schwartz', + Title: 'Engineer', + Employee_Picture: '34.png', + Picture: '../../../../images/employees/34.png', + MobilePhone: '7145558882', + }, + { + ID: 35, + FullName: 'Billy Zimmer', + Title: 'Engineer', + Employee_Picture: '51.png', + Picture: '../../../../images/employees/51.png', + MobilePhone: '9095556939', + }, + { + ID: 36, + FullName: 'Samantha Piper', + Title: 'Engineer', + Employee_Picture: '35.png', + Picture: '../../../../images/employees/35.png', + MobilePhone: '3235554512', + }, + { + ID: 37, + FullName: 'Maggie Boxter', + Title: 'Engineer', + Employee_Picture: '36.png', + Picture: '../../../../images/employees/36.png', + MobilePhone: '7145557239', + }, + { + ID: 38, + FullName: 'Terry Bradley', + Title: 'QA Engineer', + Employee_Picture: '37.png', + Picture: '../../../../images/employees/37.png', + MobilePhone: '8055552788', + }, + { + ID: 39, + FullName: 'Gabe Jones', + Title: 'Retail Coordinator', + Employee_Picture: '38.png', + Picture: '../../../../images/employees/38.png', + MobilePhone: '3105555395', + }, + { + ID: 40, + FullName: 'Lucy Ball', + Title: 'Sales Assistant', + Employee_Picture: '39.png', + Picture: '../../../../images/employees/39.png', + MobilePhone: '3105553357', + }, + { + ID: 41, + FullName: 'Jim Packard', + Title: 'Retail Sales Manager', + Employee_Picture: '40.png', + Picture: '../../../../images/employees/40.png', + MobilePhone: '6615558224', + }, + { + ID: 42, + FullName: 'Hannah Brookly', + Title: 'Online Sales Manager', + Employee_Picture: '41.png', + Picture: '../../../../images/employees/41.png', + MobilePhone: '8055553627', + }, + { + ID: 43, + FullName: 'Harv Mudd', + Title: 'Retail Sales Manager', + Employee_Picture: '42.png', + Picture: '../../../../images/employees/42.png', + MobilePhone: '8315553895', + }, + { + ID: 44, + FullName: 'Clark Morgan', + Title: 'Retail Sales Manager', + Employee_Picture: '43.png', + Picture: '../../../../images/employees/43.png', + MobilePhone: '9255552525', + }, + { + ID: 45, + FullName: 'Todd Hoffman', + Title: 'Retail Sales Manager', + Employee_Picture: '44.png', + Picture: '../../../../images/employees/44.png', + MobilePhone: '9255553579', + }, + { + ID: 46, + FullName: 'Jackie Garmin', + Title: 'Support Assistant', + Employee_Picture: '45.png', + Picture: '../../../../images/employees/45.png', + MobilePhone: '2135551824', + }, + { + ID: 47, + FullName: 'Lincoln Bartlett', + Title: 'Sales Assistant', + Employee_Picture: '46.png', + Picture: '../../../../images/employees/46.png', + MobilePhone: '2135558272', + }, + { + ID: 48, + FullName: 'Brad Farkus', + Title: 'Engineer', + Employee_Picture: '47.png', + Picture: '../../../../images/employees/47.png', + MobilePhone: '2135553626', + }, + { + ID: 49, + FullName: 'Jenny Hobbs', + Title: 'Shipping Assistant', + Employee_Picture: '48.png', + Picture: '../../../../images/employees/48.png', + MobilePhone: '3105552668', + }, + { + ID: 50, + FullName: 'Dallas Lou', + Title: 'Shipping Assistant', + Employee_Picture: '49.png', + Picture: '../../../../images/employees/49.png', + MobilePhone: '2135558357', + }, + { + ID: 51, + FullName: 'Stu Pizaro', + Title: 'Engineer', + Employee_Picture: '50.png', + Picture: '../../../../images/employees/50.png', + MobilePhone: '2135552552', + }, +]; diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/index.html b/apps/demos/Demos/Pagination/Overview/ReactJs/index.html new file mode 100644 index 000000000000..1614ae6aee3d --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/index.js b/apps/demos/Demos/Pagination/Overview/ReactJs/index.js new file mode 100644 index 000000000000..d2d994b6c49d --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.querySelector('.container')); diff --git a/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css new file mode 100644 index 000000000000..346ba3ee6b1e --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/ReactJs/styles.css @@ -0,0 +1,100 @@ +body { + overflow-x: hidden; +} + +.demo-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + min-width: 720px; + width: 100%; +} + +.employees { + display: flex; + flex-wrap: wrap; + gap: 16px; + min-height: 644px; + padding-bottom: 24px; +} + +.employees__card { + width: 100%; + max-height: 312px; + align-self: stretch; + overflow: hidden; + border: var(--dx-border-width) solid var(--dx-color-border); + border-radius: var(--dx-border-radius); + background-color: var(--dx-component-color-bg); +} + +.employees.employees--forth .employees__card { + min-width: 250px; + width: 390px; + flex-basis: calc(50% - 10px); +} + +.employees.employees--six .employees__card { + flex-basis: calc(33.3% - 12.5px); +} + +.employees__img-wrapper { + height: 180px; + position: relative; + overflow: hidden; + border-bottom: var(--dx-border-width) solid var(--dx-color-border); + background-color: #fff; +} + +.employees__img { + display: block; + height: 220px; + position: absolute; + content: ""; + left: 50%; + top: 0; + transform: translateX(-50%); +} + +.employees__info { + padding: 24px; +} + +.employees__info-row { + margin-bottom: 8px; + text-wrap: nowrap; +} + +.employees__info-label { + display: inline-block; + font-weight: 600; + vertical-align: middle; +} + +.employees.employees--forth .employees__info-label { + width: 160px; +} + +.employees.employees--six .employees__info-label { + width: 80px; +} + +.employees__info-value { + display: inline-block; + text-wrap: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + overflow: hidden; + white-space:nowrap +} + +.employees.employees--forth .employees__info-value { + max-width: 180px; +} + +.employees.employees--six .employees__info-value { + max-width: 120px; +} diff --git a/apps/demos/Demos/Pagination/Overview/Vue/App.vue b/apps/demos/Demos/Pagination/Overview/Vue/App.vue index ad7848d2eb91..ab1ada0a0e04 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/App.vue +++ b/apps/demos/Demos/Pagination/Overview/Vue/App.vue @@ -1,24 +1,159 @@ - + + \ No newline at end of file diff --git a/apps/demos/Demos/Pagination/Overview/Vue/data.js b/apps/demos/Demos/Pagination/Overview/Vue/data.js deleted file mode 100644 index 6380157422df..000000000000 --- a/apps/demos/Demos/Pagination/Overview/Vue/data.js +++ /dev/null @@ -1,121 +0,0 @@ -export const customers = [{ - ID: 1, - CompanyName: 'Super Mart of the West', - Address: '702 SW 8th Street', - City: 'Bentonville', - State: 'Arkansas', - Zipcode: 72716, - Phone: '(800) 555-2797', - Fax: '(800) 555-2171', - Website: 'http://www.nowebsitesupermart.dx', -}, { - ID: 2, - CompanyName: 'Electronics Depot', - Address: '2455 Paces Ferry Road NW', - City: 'Atlanta', - State: 'Georgia', - Zipcode: 30339, - Phone: '(800) 595-3232', - Fax: '(800) 595-3231', - Website: 'http://www.nowebsitedepot.dx', -}, { - ID: 3, - CompanyName: 'K&S Music', - Address: '1000 Nicllet Mall', - City: 'Minneapolis', - State: 'Minnesota', - Zipcode: 55403, - Phone: '(612) 304-6073', - Fax: '(612) 304-6074', - Website: 'http://www.nowebsitemusic.dx', -}, { - ID: 4, - CompanyName: "Tom's Club", - Address: '999 Lake Drive', - City: 'Issaquah', - State: 'Washington', - Zipcode: 98027, - Phone: '(800) 955-2292', - Fax: '(800) 955-2293', - Website: 'http://www.nowebsitetomsclub.dx', -}, { - ID: 5, - CompanyName: 'E-Mart', - Address: '3333 Beverly Rd', - City: 'Hoffman Estates', - State: 'Illinois', - Zipcode: 60179, - Phone: '(847) 286-2500', - Fax: '(847) 286-2501', - Website: 'http://www.nowebsiteemart.dx', -}, { - ID: 6, - CompanyName: 'Walters', - Address: '200 Wilmot Rd', - City: 'Deerfield', - State: 'Illinois', - Zipcode: 60015, - Phone: '(847) 940-2500', - Fax: '(847) 940-2501', - Website: 'http://www.nowebsitewalters.dx', -}, { - ID: 7, - CompanyName: 'StereoShack', - Address: '400 Commerce S', - City: 'Fort Worth', - State: 'Texas', - Zipcode: 76102, - Phone: '(817) 820-0741', - Fax: '(817) 820-0742', - Website: 'http://www.nowebsiteshack.dx', -}, { - ID: 8, - CompanyName: 'Circuit Town', - Address: '2200 Kensington Court', - City: 'Oak Brook', - State: 'Illinois', - Zipcode: 60523, - Phone: '(800) 955-2929', - Fax: '(800) 955-9392', - Website: 'http://www.nowebsitecircuittown.dx', -}, { - ID: 9, - CompanyName: 'Premier Buy', - Address: '7601 Penn Avenue South', - City: 'Richfield', - State: 'Minnesota', - Zipcode: 55423, - Phone: '(612) 291-1000', - Fax: '(612) 291-2001', - Website: 'http://www.nowebsitepremierbuy.dx', -}, { - ID: 10, - CompanyName: 'ElectrixMax', - Address: '263 Shuman Blvd', - City: 'Naperville', - State: 'Illinois', - Zipcode: 60563, - Phone: '(630) 438-7800', - Fax: '(630) 438-7801', - Website: 'http://www.nowebsiteelectrixmax.dx', -}, { - ID: 11, - CompanyName: 'Video Emporium', - Address: '1201 Elm Street', - City: 'Dallas', - State: 'Texas', - Zipcode: 75270, - Phone: '(214) 854-3000', - Fax: '(214) 854-3001', - Website: 'http://www.nowebsitevideoemporium.dx', -}, { - ID: 12, - CompanyName: 'Screen Shop', - Address: '1000 Lowes Blvd', - City: 'Mooresville', - State: 'North Carolina', - Zipcode: 28117, - Phone: '(800) 445-6937', - Fax: '(800) 445-6938', - Website: 'http://www.nowebsitescreenshop.dx', -}]; diff --git a/apps/demos/Demos/Pagination/Overview/Vue/data.ts b/apps/demos/Demos/Pagination/Overview/Vue/data.ts new file mode 100644 index 000000000000..ee0d580fe540 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Vue/data.ts @@ -0,0 +1,419 @@ +export interface Employee { + ID: number; + FullName: string; + Title: string; + Employee_Picture: string; + Picture: string; + MobilePhone: string; +} + +export const employees: Employee[] = [ + { + ID: 1, + FullName: 'John Heart', + Title: 'CEO', + Employee_Picture: '01.png', + Picture: '../../../../images/employees/01.png', + MobilePhone: '2135559392', + }, + { + ID: 2, + FullName: 'Samantha Bright', + Title: 'COO', + Employee_Picture: '30.png', + Picture: '../../../../images/employees/30.png', + MobilePhone: '2135552858', + }, + { + ID: 3, + FullName: 'Arthur Miller', + Title: 'CTO', + Employee_Picture: '10.png', + Picture: '../../../../images/employees/10.png', + MobilePhone: '3105558583', + }, + { + ID: 4, + FullName: 'Robert Reagan', + Title: 'CMO', + Employee_Picture: '03.png', + Picture: '../../../../images/employees/03.png', + MobilePhone: '8185552387', + }, + { + ID: 5, + FullName: 'Greta Sims', + Title: 'HR Manager', + Employee_Picture: '04.png', + Picture: '../../../../images/employees/04.png', + MobilePhone: '8185556546', + }, + { + ID: 6, + FullName: 'Brett Wade', + Title: 'IT Manager', + Employee_Picture: '05.png', + Picture: '../../../../images/employees/05.png', + MobilePhone: '6265550358', + }, + { + ID: 7, + FullName: 'Sandra Johnson', + Title: 'Controller', + Employee_Picture: '06.png', + Picture: '../../../../images/employees/06.png', + MobilePhone: '5625552082', + }, + { + ID: 8, + FullName: 'Ed Holmes', + Title: 'Sales Manager', + Employee_Picture: '11.png', + Picture: '../../../../images/employees/11.png', + MobilePhone: '3105551288', + }, + { + ID: 9, + FullName: 'Barb Banks', + Title: 'Support Manager', + Employee_Picture: '20.png', + Picture: '../../../../images/employees/20.png', + MobilePhone: '3105553355', + }, + { + ID: 10, + FullName: 'Kevin Carter', + Title: 'Shipping Manager', + Employee_Picture: '07.png', + Picture: '../../../../images/employees/07.png', + MobilePhone: '2135552840', + }, + { + ID: 11, + FullName: 'Cindy Stanwick', + Title: 'HR Assistant', + Employee_Picture: '08.png', + Picture: '../../../../images/employees/08.png', + MobilePhone: '8185556655', + }, + { + ID: 12, + FullName: 'Sammy Hill', + Title: 'Sales Assistant', + Employee_Picture: '12.png', + Picture: '../../../../images/employees/12.png', + MobilePhone: '6265557292', + }, + { + ID: 13, + FullName: 'Davey Jones', + Title: 'Shipping Assistant', + Employee_Picture: '13.png', + Picture: '../../../../images/employees/13.png', + MobilePhone: '6265550281', + }, + { + ID: 14, + FullName: 'Victor Norris', + Title: 'Shipping Assistant', + Employee_Picture: '14.png', + Picture: '../../../../images/employees/14.png', + MobilePhone: '2135559278', + }, + { + ID: 15, + FullName: 'Mary Stern', + Title: 'Shipping Assistant', + Employee_Picture: '15.png', + Picture: '../../../../images/employees/15.png', + MobilePhone: '8185557857', + }, + { + ID: 16, + FullName: 'Robin Cosworth', + Title: 'Shipping Assistant', + Employee_Picture: '16.png', + Picture: '../../../../images/employees/16.png', + MobilePhone: '8185550942', + }, + { + ID: 17, + FullName: 'Kelly Rodriguez', + Title: 'Support Assistant', + Employee_Picture: '17.png', + Picture: '../../../../images/employees/17.png', + MobilePhone: '8185559248', + }, + { + ID: 18, + FullName: 'James Anderson', + Title: 'Support Assistant', + Employee_Picture: '18.png', + Picture: '../../../../images/employees/18.png', + MobilePhone: '3235554702', + }, + { + ID: 19, + FullName: 'Antony Remmen', + Title: 'Support Assistant', + Employee_Picture: '19.png', + Picture: '../../../../images/employees/19.png', + MobilePhone: '3105556625', + }, + { + ID: 20, + FullName: 'Olivia Peyton', + Title: 'Sales Assistant', + Employee_Picture: '09.png', + Picture: '../../../../images/employees/09.png', + MobilePhone: '3105552728', + }, + { + ID: 21, + FullName: 'Taylor Riley', + Title: 'Network Admin', + Employee_Picture: '21.png', + Picture: '../../../../images/employees/21.png', + MobilePhone: '3105557276', + }, + { + ID: 22, + FullName: 'Amelia Harper', + Title: 'Network Admin', + Employee_Picture: '22.png', + Picture: '../../../../images/employees/22.png', + MobilePhone: '2135554276', + }, + { + ID: 23, + FullName: 'Wally Hobbs', + Title: 'Programmer', + Employee_Picture: '23.png', + Picture: '../../../../images/employees/23.png', + MobilePhone: '8185558872', + }, + { + ID: 24, + FullName: 'Brad Jameson', + Title: 'Programmer', + Employee_Picture: '24.png', + Picture: '../../../../images/employees/24.png', + MobilePhone: '8185554646', + }, + { + ID: 25, + FullName: 'Karen Goodson', + Title: 'Programmer', + Employee_Picture: '25.png', + Picture: '../../../../images/employees/25.png', + MobilePhone: '6265550908', + }, + { + ID: 26, + FullName: 'Marcus Orbison', + Title: 'Travel Coordinator', + Employee_Picture: '26.png', + Picture: '../../../../images/employees/26.png', + MobilePhone: '2135557098', + }, + { + ID: 27, + FullName: 'Sandy Bright', + Title: 'Benefits Coordinator', + Employee_Picture: '27.png', + Picture: '../../../../images/employees/27.png', + MobilePhone: '8185550524', + }, + { + ID: 28, + FullName: 'Morgan Kennedy', + Title: 'Graphic Designer', + Employee_Picture: '28.png', + Picture: '../../../../images/employees/28.png', + MobilePhone: '8185558238', + }, + { + ID: 29, + FullName: 'Violet Bailey', + Title: 'Jr Graphic Designer', + Employee_Picture: '29.png', + Picture: '../../../../images/employees/29.png', + MobilePhone: '8185552478', + }, + { + ID: 30, + FullName: 'Ken Samuelson', + Title: 'Ombudsman', + Employee_Picture: '02.png', + Picture: '../../../../images/employees/02.png', + MobilePhone: '5625559282', + }, + { + ID: 31, + FullName: 'Nat Maguiree', + Title: 'Trainer', + Employee_Picture: '31.png', + Picture: '../../../../images/employees/31.png', + MobilePhone: '5625558377', + }, + { + ID: 32, + FullName: 'Bart Arnaz', + Title: 'Director of Engineering', + Employee_Picture: '32.png', + Picture: '../../../../images/employees/32.png', + MobilePhone: '7145552000', + }, + { + ID: 33, + FullName: 'Leah Simpson', + Title: 'Test Coordinator', + Employee_Picture: '33.png', + Picture: '../../../../images/employees/33.png', + MobilePhone: '5625595830', + }, + { + ID: 34, + FullName: 'Arnie Schwartz', + Title: 'Engineer', + Employee_Picture: '34.png', + Picture: '../../../../images/employees/34.png', + MobilePhone: '7145558882', + }, + { + ID: 35, + FullName: 'Billy Zimmer', + Title: 'Engineer', + Employee_Picture: '51.png', + Picture: '../../../../images/employees/51.png', + MobilePhone: '9095556939', + }, + { + ID: 36, + FullName: 'Samantha Piper', + Title: 'Engineer', + Employee_Picture: '35.png', + Picture: '../../../../images/employees/35.png', + MobilePhone: '3235554512', + }, + { + ID: 37, + FullName: 'Maggie Boxter', + Title: 'Engineer', + Employee_Picture: '36.png', + Picture: '../../../../images/employees/36.png', + MobilePhone: '7145557239', + }, + { + ID: 38, + FullName: 'Terry Bradley', + Title: 'QA Engineer', + Employee_Picture: '37.png', + Picture: '../../../../images/employees/37.png', + MobilePhone: '8055552788', + }, + { + ID: 39, + FullName: 'Gabe Jones', + Title: 'Retail Coordinator', + Employee_Picture: '38.png', + Picture: '../../../../images/employees/38.png', + MobilePhone: '3105555395', + }, + { + ID: 40, + FullName: 'Lucy Ball', + Title: 'Sales Assistant', + Employee_Picture: '39.png', + Picture: '../../../../images/employees/39.png', + MobilePhone: '3105553357', + }, + { + ID: 41, + FullName: 'Jim Packard', + Title: 'Retail Sales Manager', + Employee_Picture: '40.png', + Picture: '../../../../images/employees/40.png', + MobilePhone: '6615558224', + }, + { + ID: 42, + FullName: 'Hannah Brookly', + Title: 'Online Sales Manager', + Employee_Picture: '41.png', + Picture: '../../../../images/employees/41.png', + MobilePhone: '8055553627', + }, + { + ID: 43, + FullName: 'Harv Mudd', + Title: 'Retail Sales Manager', + Employee_Picture: '42.png', + Picture: '../../../../images/employees/42.png', + MobilePhone: '8315553895', + }, + { + ID: 44, + FullName: 'Clark Morgan', + Title: 'Retail Sales Manager', + Employee_Picture: '43.png', + Picture: '../../../../images/employees/43.png', + MobilePhone: '9255552525', + }, + { + ID: 45, + FullName: 'Todd Hoffman', + Title: 'Retail Sales Manager', + Employee_Picture: '44.png', + Picture: '../../../../images/employees/44.png', + MobilePhone: '9255553579', + }, + { + ID: 46, + FullName: 'Jackie Garmin', + Title: 'Support Assistant', + Employee_Picture: '45.png', + Picture: '../../../../images/employees/45.png', + MobilePhone: '2135551824', + }, + { + ID: 47, + FullName: 'Lincoln Bartlett', + Title: 'Sales Assistant', + Employee_Picture: '46.png', + Picture: '../../../../images/employees/46.png', + MobilePhone: '2135558272', + }, + { + ID: 48, + FullName: 'Brad Farkus', + Title: 'Engineer', + Employee_Picture: '47.png', + Picture: '../../../../images/employees/47.png', + MobilePhone: '2135553626', + }, + { + ID: 49, + FullName: 'Jenny Hobbs', + Title: 'Shipping Assistant', + Employee_Picture: '48.png', + Picture: '../../../../images/employees/48.png', + MobilePhone: '3105552668', + }, + { + ID: 50, + FullName: 'Dallas Lou', + Title: 'Shipping Assistant', + Employee_Picture: '49.png', + Picture: '../../../../images/employees/49.png', + MobilePhone: '2135558357', + }, + { + ID: 51, + FullName: 'Stu Pizaro', + Title: 'Engineer', + Employee_Picture: '50.png', + Picture: '../../../../images/employees/50.png', + MobilePhone: '2135552552', + }, +]; diff --git a/apps/demos/Demos/Pagination/Overview/Vue/index.html b/apps/demos/Demos/Pagination/Overview/Vue/index.html index ec140a786d7e..7ebc7f30a85a 100644 --- a/apps/demos/Demos/Pagination/Overview/Vue/index.html +++ b/apps/demos/Demos/Pagination/Overview/Vue/index.html @@ -17,13 +17,13 @@
-
+
diff --git a/apps/demos/Demos/Pagination/Overview/Vue/index.ts b/apps/demos/Demos/Pagination/Overview/Vue/index.ts new file mode 100644 index 000000000000..0c2ce8315988 --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/Vue/index.ts @@ -0,0 +1,4 @@ +import { createApp } from 'vue'; +import App from './App.vue'; + +createApp(App).mount('.container'); diff --git a/apps/demos/Demos/Pagination/Overview/description.md b/apps/demos/Demos/Pagination/Overview/description.md new file mode 100644 index 000000000000..ada1cc79830e --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/description.md @@ -0,0 +1,10 @@ +DevExpress Pagination UI component allows users to navigate between pages and adjust page size at runtime. The Pagination component in this demo allows users to browse employee cards. + +To set up a Pagination component, specify the following options: + +- [itemCount](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#itemCount): the total number of elements in the target control. +- [pageSize](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageSize): the number of items per page. +- [allowedPageSizes](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#allowedPageSizes) : available page size choices. +- [pageIndex](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageIndex): page displayed first. +- [showNavigationButtons](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showNavigationButtons): navigation button visibility. +- [showInfo](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showInfo): information pane visibility. \ No newline at end of file diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/employeeGallery.js b/apps/demos/Demos/Pagination/Overview/jQuery/employeeGallery.js deleted file mode 100644 index 8ff6d5517b38..000000000000 --- a/apps/demos/Demos/Pagination/Overview/jQuery/employeeGallery.js +++ /dev/null @@ -1,70 +0,0 @@ -const createEmployeeImg = (employee) => { - const imageWrapper = $('
').addClass('employees__img-wrapper'); - - const img = $('').addClass('employees__img'); - img.attr({ src: employee.Picture, alt: employee.FullName }); - imageWrapper.append(img); - - return imageWrapper; -}; - -const createEmployeeInfo = (employee) => { - const employeeInfo = $('
').addClass('employees__info'); - - const fullNameWrapper = $('
').addClass('employees__info-row'); - const fullNameLabel = $('').addClass('employees__info-label').text('Full Name:'); - const fullName = $('').addClass('employees__info-value').text(employee.FullName); - fullNameWrapper.append(fullNameLabel); - fullNameWrapper.append(fullName); - - const positionWrapper = $('
').addClass('employees__info-row'); - const positionLabel = $('').addClass('employees__info-label').text('Position:'); - const position = $('').addClass('employees__info-value').text(employee.Title); - positionWrapper.append(positionLabel); - positionWrapper.append(position); - - const phoneWrapper = $('
').addClass('employees__info-row'); - const phoneLabel = $('').addClass('employees__info-label').text('Phone:'); - const phone = $('').addClass('employees__info-value').text(employee.MobilePhone); - phoneWrapper.append(phoneLabel); - phoneWrapper.append(phone); - - employeeInfo.append(fullNameWrapper); - employeeInfo.append(positionWrapper); - employeeInfo.append(phoneWrapper); - - return employeeInfo; -}; - -const createEmployeeCard = (employee) => { - const cardEl = $('
').addClass('employees__card'); - - const imageWrapper = createEmployeeImg(employee); - const employeeInfo = createEmployeeInfo(employee); - - cardEl.append(imageWrapper); - cardEl.append(employeeInfo); - - return cardEl; -}; - -const renderEmployeeGallery = (pageSize, pageIndex) => { - const $employeesContainer = $('#employees'); - $employeesContainer.empty(); - - if (pageSize === 4) { - $employeesContainer.removeClass('employees--six'); - $employeesContainer.addClass('employees--forth'); - } else { - $employeesContainer.removeClass('employees--forth'); - $employeesContainer.addClass('employees--six'); - } - - const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); - - pageEmployees.forEach((employee) => { - const card = createEmployeeCard(employee); - $employeesContainer.append(card); - }); -}; - diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/index.html b/apps/demos/Demos/Pagination/Overview/jQuery/index.html index 00480583e0a5..12632dc8388d 100644 --- a/apps/demos/Demos/Pagination/Overview/jQuery/index.html +++ b/apps/demos/Demos/Pagination/Overview/jQuery/index.html @@ -7,10 +7,9 @@ - + - diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/index.js b/apps/demos/Demos/Pagination/Overview/jQuery/index.js index 4aae358b4f6a..4c937a274e7d 100644 --- a/apps/demos/Demos/Pagination/Overview/jQuery/index.js +++ b/apps/demos/Demos/Pagination/Overview/jQuery/index.js @@ -2,8 +2,6 @@ $(() => { const pagination = $('#pagination') .dxPagination({ showInfo: true, - lightModeEnabled: false, - pagesNavigatorVisible: true, showNavigationButtons: true, allowedPageSizes: [4, 6], itemCount: employees.length, @@ -12,12 +10,12 @@ $(() => { onOptionChanged: (evt) => { if (evt.name === 'pageSize') { const pageSize = evt.value; - const pageIndex = pagination.option('pageIndex'); pagination.option('pageSize', pageSize); + const pageIndex = pagination.option('pageIndex'); renderEmployeeGallery(pageSize, pageIndex); } - + if (evt.name === 'pageIndex') { const pageSize = pagination.option('pageSize'); const pageIndex = evt.value; @@ -29,5 +27,75 @@ $(() => { }) .dxPagination('instance'); + const createEmployeeImg = (employee) => { + const imageWrapper = $('
').addClass('employees__img-wrapper'); + + const img = $('').addClass('employees__img'); + img.attr({ src: employee.Picture, alt: employee.FullName }); + imageWrapper.append(img); + + return imageWrapper; + }; + + const createEmployeeInfo = (employee) => { + const employeeInfo = $('
').addClass('employees__info'); + + const fullNameWrapper = $('
').addClass('employees__info-row'); + const fullNameLabel = $('').addClass('employees__info-label').text('Full Name:'); + const fullName = $('').addClass('employees__info-value').text(employee.FullName); + fullNameWrapper.append(fullNameLabel); + fullNameWrapper.append(fullName); + + const positionWrapper = $('
').addClass('employees__info-row'); + const positionLabel = $('').addClass('employees__info-label').text('Position:'); + const position = $('').addClass('employees__info-value').text(employee.Title); + positionWrapper.append(positionLabel); + positionWrapper.append(position); + + const phoneWrapper = $('
').addClass('employees__info-row'); + const phoneLabel = $('').addClass('employees__info-label').text('Phone:'); + const phone = $('').addClass('employees__info-value').text(employee.MobilePhone); + phoneWrapper.append(phoneLabel); + phoneWrapper.append(phone); + + employeeInfo.append(fullNameWrapper); + employeeInfo.append(positionWrapper); + employeeInfo.append(phoneWrapper); + + return employeeInfo; + }; + + const createEmployeeCard = (employee) => { + const cardEl = $('
').addClass('employees__card'); + + const imageWrapper = createEmployeeImg(employee); + const employeeInfo = createEmployeeInfo(employee); + + cardEl.append(imageWrapper); + cardEl.append(employeeInfo); + + return cardEl; + }; + + const renderEmployeeGallery = (pageSize, pageIndex) => { + const $employeesContainer = $('#employees'); + $employeesContainer.empty(); + + if (pageSize === 4) { + $employeesContainer.removeClass('employees--six'); + $employeesContainer.addClass('employees--forth'); + } else { + $employeesContainer.removeClass('employees--forth'); + $employeesContainer.addClass('employees--six'); + } + + const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize); + + pageEmployees.forEach((employee) => { + const card = createEmployeeCard(employee); + $employeesContainer.append(card); + }); + }; + renderEmployeeGallery(pagination.option('pageSize'), pagination.option('pageIndex')); }); diff --git a/apps/demos/Demos/Pagination/Overview/jQuery/styles.css b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css new file mode 100644 index 000000000000..346ba3ee6b1e --- /dev/null +++ b/apps/demos/Demos/Pagination/Overview/jQuery/styles.css @@ -0,0 +1,100 @@ +body { + overflow-x: hidden; +} + +.demo-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.container { + min-width: 720px; + width: 100%; +} + +.employees { + display: flex; + flex-wrap: wrap; + gap: 16px; + min-height: 644px; + padding-bottom: 24px; +} + +.employees__card { + width: 100%; + max-height: 312px; + align-self: stretch; + overflow: hidden; + border: var(--dx-border-width) solid var(--dx-color-border); + border-radius: var(--dx-border-radius); + background-color: var(--dx-component-color-bg); +} + +.employees.employees--forth .employees__card { + min-width: 250px; + width: 390px; + flex-basis: calc(50% - 10px); +} + +.employees.employees--six .employees__card { + flex-basis: calc(33.3% - 12.5px); +} + +.employees__img-wrapper { + height: 180px; + position: relative; + overflow: hidden; + border-bottom: var(--dx-border-width) solid var(--dx-color-border); + background-color: #fff; +} + +.employees__img { + display: block; + height: 220px; + position: absolute; + content: ""; + left: 50%; + top: 0; + transform: translateX(-50%); +} + +.employees__info { + padding: 24px; +} + +.employees__info-row { + margin-bottom: 8px; + text-wrap: nowrap; +} + +.employees__info-label { + display: inline-block; + font-weight: 600; + vertical-align: middle; +} + +.employees.employees--forth .employees__info-label { + width: 160px; +} + +.employees.employees--six .employees__info-label { + width: 80px; +} + +.employees__info-value { + display: inline-block; + text-wrap: nowrap; + text-overflow: ellipsis; + vertical-align: middle; + overflow: hidden; + white-space:nowrap +} + +.employees.employees--forth .employees__info-value { + max-width: 180px; +} + +.employees.employees--six .employees__info-value { + max-width: 120px; +} diff --git a/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html b/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html index 354825cb012d..f4a06540c4a3 100644 --- a/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html @@ -30,27 +30,27 @@ container=".dx-viewport" [(visible)]="popupVisible" > - - - + - - + - +
diff --git a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html index dd66dbaf138c..8d3273ede786 100644 --- a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html +++ b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html @@ -57,13 +57,13 @@
- - +
- - + diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css index afd43782211e..3c13932a2a05 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css @@ -1,35 +1,67 @@ +::ng-deep .dx-scheduler-group-header, +::ng-deep .dx-scheduler-date-table-cell { + position: relative; +} + +::ng-deep .dx-scheduler-group-header-content { + padding-left: 8px; +} + +::ng-deep .dx-color-scheme-light, +::ng-deep .dx-color-scheme-carmine, +::ng-deep .dx-color-scheme-softblue, +::ng-deep .dx-color-scheme-blue-light, +::ng-deep .dx-color-scheme-saas-light, +::ng-deep .dx-color-scheme-lime-light, +::ng-deep .dx-color-scheme-orange-light, +::ng-deep .dx-color-scheme-purple-light, +::ng-deep .dx-color-scheme-teal-light { + --text-color-1: rgba(0, 0, 0, .6); + --text-color-2: rgba(255, 255, 255, 1); + --disabled-color: rgba(0, 0, 0, 0.38); + --background-color-1: rgba(50, 134, 56, 1); + --background-color-2: rgba(194, 81, 0, 1); +} + +::ng-deep .dx-color-scheme-dark, +::ng-deep .dx-color-scheme-darkviolet, +::ng-deep .dx-color-scheme-darkmoon, +::ng-deep .dx-color-scheme-blue-dark, +::ng-deep .dx-color-scheme-saas-dark, +::ng-deep .dx-color-scheme-lime-dark, +::ng-deep .dx-color-scheme-orange-dark, +::ng-deep .dx-color-scheme-purple-dark, +::ng-deep .dx-color-scheme-teal-dark { + --text-color-1: rgba(255, 255, 255, 1); + --text-color-2: rgba(54, 54, 64, 1); + --disabled-color: rgba(255, 255, 255, 0.38); + --background-color-1: rgba(159, 213, 161, 1); + --background-color-2: rgba(255, 181, 127, 1); + +} + +::ng-deep .dx-scheduler-header .dx-toolbar .dx-button, +::ng-deep .dx-scheduler-header .dx-toolbar .dx-button .dx-icon { + color: var(--text-color-1); +} + ::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell { opacity: 1; - color: rgba(0, 0, 0, 0.3) !important; -} - -::ng-deep .dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { - color: rgba(0, 0, 0, .6); -} - -::ng-deep .dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell, -::ng-deep .dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { - color: rgba(255, 255, 255, 1); + color: var(--disabled-color) !important; } -::ng-deep .dx-scheduler-group-header-content, -::ng-deep .dx-scheduler-date-table-cell { - position: relative; +::ng-deep .dx-scheduler-work-space-month .dx-scheduler-date-table-cell { + color: var(--text-color-1); +} + +::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment, +::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment.dx-state-focused { + color: var(--text-color-2); + line-height: 22px; +} + +::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content { + padding-top: 0; } ::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper { @@ -39,12 +71,32 @@ padding-right: 6px; } -::ng-deep .avatar { - width: 155px; +::ng-deep .avatar { + width: 124px; float: left; overflow: hidden; position: relative; - height: 125px; + height: 124px; + border: 1px solid rgba(0, 0, 0, 0.24); + border-radius: 50%; + background-color: rgba(255, 255, 255, 1); +} + +::ng-deep .avatar img { + position: relative; + width: 126px; + height: 130px; + object-fit: contain; +} + +::ng-deep .avatar[title="John Heart"] img { + top: 5px; + left: 3px; +} + +::ng-deep .avatar[title="Greta Sims"] img { + top: 5px; + left: -7px; } ::ng-deep .name { @@ -55,52 +107,65 @@ } ::ng-deep .name h2 { - color: #fff; + color: var(--text-color-2); font-size: 28px; text-align: left; - padding: 0 0 5px 175px; + padding: 0 0 0 170px; margin: 0; + height: 40px; + line-height: 40px; } ::ng-deep .info { width: auto; text-align: left; height: 100%; - font-size: 11pt; + font-size: 14px; + line-height: 20px; font-weight: normal; - padding: 25px 20px; + padding: 25px 20px 25px 40px; + color: #707070; +} + +::ng-deep .dx-color-scheme-contrast .info { + color: #fff; } ::ng-deep .day-cell { + width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; } +::ng-deep .dx-scheduler-appointment { + color: rgba(255, 255, 255, 1); +} + ::ng-deep .employee-1 { - background-color: rgba(86, 202, 133, 0.1); + background-color: rgba(55, 126, 58, 0.08); } ::ng-deep .employee-2 { - background-color: rgba(255, 151, 71, 0.1); + background-color: rgba(194, 81, 0, 0.08); } ::ng-deep .employee-weekend-1 { - background-color: rgba(86, 202, 133, 0.2); + background-color: rgba(55, 126, 58, 0.12); } ::ng-deep .employee-weekend-2 { - background-color: rgba(255, 151, 71, 0.2); + background-color: rgba(194, 81, 0, 0.12); } ::ng-deep .training-background-0 { - background-image: url("../../../../images/gym/icon-abs.png"); + background-image: url("../../../../images/Scheduler/Overview/icon-abs.png"); } ::ng-deep .training-background-1 { - background-image: url("../../../../images/gym/icon-step.png"); + background-image: url("../../../../images/Scheduler/Overview/icon-step.png"); } ::ng-deep .training-background-2 { - background-image: url("../../../../images/gym/icon-fitball.png"); + background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png"); } diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html index 7e3bb9b44064..2cd0fee88166 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html @@ -8,7 +8,7 @@ [startDayHour]="8" [endDayHour]="18" [showAllDayPanel]="false" - [height]="600" + [height]="710" [groups]="['employeeID']" resourceCellTemplate="resourceCellTemplate" dataCellTemplate="dataCellTemplate" @@ -25,7 +25,7 @@

{{ employee.text }}

-
+
{{ employee.text }} photo
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts index ccb593f1e824..6a0b62221343 100644 --- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts +++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts @@ -27,15 +27,15 @@ export class Data { const employees: Employee[] = [{ text: 'John Heart', id: 1, - color: '#56ca85', - avatar: '../../../../images/gym/coach-man.png', + color: 'var(--background-color-1)', + avatar: '../../../../images/employees/19.png', age: 27, discipline: 'ABS, Fitball, StepFit', }, { - text: 'Sandra Johnson', + text: 'Greta Sims', id: 2, - color: '#ff9747', - avatar: '../../../../images/gym/coach-woman.png', + color: 'var(--background-color-2)', + avatar: '../../../../images/employees/31.png', age: 25, discipline: 'ABS, Fitball, StepFit', }]; diff --git a/apps/demos/Demos/Scheduler/Overview/React/App.tsx b/apps/demos/Demos/Scheduler/Overview/React/App.tsx index efb027610670..87977bb0326e 100644 --- a/apps/demos/Demos/Scheduler/Overview/React/App.tsx +++ b/apps/demos/Demos/Scheduler/Overview/React/App.tsx @@ -20,7 +20,7 @@ const App = () => ( views={views} defaultCurrentView="month" defaultCurrentDate={currentDate} - height={600} + height={710} showAllDayPanel={true} firstDayOfWeek={1} startDayHour={8} diff --git a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx index 2ea79a94aa97..99f4f0595e21 100644 --- a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx +++ b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx @@ -12,7 +12,7 @@ const ResourceCell = (props: ResourceCellProps) => {

{text}

-
+
{`${text} ( views={views} defaultCurrentView="month" defaultCurrentDate={currentDate} - height={600} + height={710} showAllDayPanel={true} firstDayOfWeek={1} startDayHour={8} diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js index 61681cc2fceb..6f080eb30b8a 100644 --- a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js +++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js @@ -16,7 +16,10 @@ const ResourceCell = (props) => { >

{text}

-
+
{`${text} diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue index c1b31e2ec7aa..c3e656a2ff4f 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue @@ -43,36 +43,41 @@ function getCurrentTraining(date, employeeID) { diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue index 13e00db3a192..e2d3b3ca4ef8 100644 --- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue +++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue @@ -6,7 +6,7 @@ >

{{ employee.text }}

-
+