-
Notifications
You must be signed in to change notification settings - Fork 600
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cherry-picks to release branch (#28492)
Co-authored-by: sergey arzamasov <[email protected]> Co-authored-by: Sergey Arzamasov <[email protected]> Co-authored-by: Alyar <[email protected]> Co-authored-by: Nikki Gonzales <[email protected]> Co-authored-by: Andrey Dolzhikov <[email protected]> Co-authored-by: Alex Lavrov <[email protected]> Co-authored-by: Vlada Skorohodova <[email protected]> Co-authored-by: Anton Kuznetsov <[email protected]> Co-authored-by: volvl <[email protected]> Co-authored-by: EugeniyKiyashko <[email protected]>
- Loading branch information
11 people
authored
Dec 5, 2024
1 parent
3e7e6fa
commit ea705d4
Showing
221 changed files
with
3,154 additions
and
2,229 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,67 @@ | ||
| <template> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="currentUser" | ||
| v-model:typing-users="userChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="userChatTypingStart()" | ||
| @typing-end="userChatTypingEnd()" | ||
| ></DxChat> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="supportAgent" | ||
| v-model:typing-users="supportChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="supportChatTypingStart()" | ||
| @typing-end="supportChatTypingEnd()" | ||
| ></DxChat> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="currentUser" | ||
| v-model:typing-users="userChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="userChatTypingStart()" | ||
| @typing-end="userChatTypingEnd()" | ||
| /> | ||
| <DxChat | ||
| v-model:items="messages" | ||
| v-model:user="supportAgent" | ||
| v-model:typing-users="supportChatTypingUsers" | ||
| @message-entered="onMessageEntered($event)" | ||
| @typing-start="supportChatTypingStart()" | ||
| @typing-end="supportChatTypingEnd()" | ||
| /> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| #app { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
| .dx-chat { | ||
| height: 710px; | ||
| } | ||
| .dx-avatar { | ||
| border: 1px solid var(--dx-color-border); | ||
| } | ||
| </style> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import DxChat from 'devextreme-vue/chat'; | ||
| import { messages, supportAgent, currentUser } from './data.ts'; | ||
| const userChatTypingUsers = ref([]); | ||
| const supportChatTypingUsers = ref([]); | ||
| function onMessageEntered(event) { | ||
| messages.value = [...messages.value, event.message]; | ||
| } | ||
| function userChatTypingStart() { | ||
| supportChatTypingUsers.value = [currentUser.value]; | ||
| } | ||
| function userChatTypingEnd() { | ||
| supportChatTypingUsers.value = []; | ||
| } | ||
| function supportChatTypingStart() { | ||
| userChatTypingUsers.value = [supportAgent.value]; | ||
| } | ||
| function supportChatTypingEnd() { | ||
| userChatTypingUsers.value = []; | ||
| } | ||
| import { ref } from 'vue'; | ||
| import DxChat from 'devextreme-vue/chat'; | ||
| import { | ||
| messages as initialMessages, | ||
| supportAgent, | ||
| currentUser, | ||
| } from './data.ts'; | ||
| const messages = ref(initialMessages); | ||
| const userChatTypingUsers = ref([]); | ||
| const supportChatTypingUsers = ref([]); | ||
| function onMessageEntered(event) { | ||
| messages.value = [...messages.value, event.message]; | ||
| } | ||
| function userChatTypingStart() { | ||
| supportChatTypingUsers.value = [currentUser]; | ||
| } | ||
| function userChatTypingEnd() { | ||
| supportChatTypingUsers.value = []; | ||
| } | ||
| function supportChatTypingStart() { | ||
| userChatTypingUsers.value = [supportAgent]; | ||
| } | ||
| function supportChatTypingEnd() { | ||
| userChatTypingUsers.value = []; | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| #app { | ||
| display: flex; | ||
| gap: 20px; | ||
| } | ||
| .dx-chat { | ||
| height: 710px; | ||
| } | ||
| .dx-avatar { | ||
| border: 1px solid var(--dx-color-border); | ||
| } | ||
| </style> |
100 changes: 100 additions & 0 deletions
100
apps/demos/Demos/Pagination/Overview/Angular/app/app.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
29 changes: 22 additions & 7 deletions
29
apps/demos/Demos/Pagination/Overview/Angular/app/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,22 @@ | ||
| <dx-data-grid | ||
| id="gridContainer" | ||
| [dataSource]="customers" | ||
| [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']" | ||
| [showBorders]="true" | ||
| > | ||
| </dx-data-grid> | ||
| <div class="container"> | ||
| <div | ||
| class="employees" | ||
| [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'" | ||
| > | ||
| @for (employee of pageEmployees; track employee.ID) { | ||
| <employee-card [employee]="employee"></employee-card> | ||
| } | ||
| </div> | ||
|
|
||
| <dx-pagination | ||
| [showInfo]="showInfo" | ||
| [showNavigationButtons]="showNavigationButtons" | ||
| [allowedPageSizes]="allowedPageSizes" | ||
| [itemCount]="itemCount" | ||
| [pageIndex]="pageIndex" | ||
| [pageSize]="pageSize" | ||
| (pageIndexChange)="onPageIndexChange($event)" | ||
| (pageSizeChange)="onPageSizeChange($event)" | ||
| > | ||
| </dx-pagination> | ||
| </div> |
Oops, something went wrong.