superdesk-ui-framework 3.1.2 → 3.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +68 -55
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +3 -0
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/styles/_big-icon-font.scss +2 -0
  10. package/app/styles/_drag-handle.scss +2 -2
  11. package/app/styles/_icon-font.scss +3 -0
  12. package/app/styles/_sd-tag-input.scss +10 -5
  13. package/app/styles/_tag-labels.scss +10 -1
  14. package/app-typescript/components/Tag.tsx +6 -2
  15. package/app-typescript/components/avatar/avatar-group.tsx +1 -1
  16. package/app-typescript/index.ts +1 -1
  17. package/dist/examples.bundle.css +191 -0
  18. package/dist/examples.bundle.js +57676 -21445
  19. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +1 -1
  20. package/dist/react/DragHandleDocs.tsx +5 -5
  21. package/dist/react/Tags.tsx +27 -22
  22. package/dist/sd_big-icons.eot +0 -0
  23. package/dist/sd_big-icons.svg +68 -55
  24. package/dist/sd_big-icons.ttf +0 -0
  25. package/dist/sd_big-icons.woff +0 -0
  26. package/dist/sd_icons.eot +0 -0
  27. package/dist/sd_icons.svg +3 -0
  28. package/dist/sd_icons.ttf +0 -0
  29. package/dist/sd_icons.woff +0 -0
  30. package/dist/superdesk-ui.bundle.css +478 -9
  31. package/dist/superdesk-ui.bundle.js +57538 -21309
  32. package/dist/vendor.bundle.js +55 -55
  33. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +1 -1
  34. package/examples/pages/react/DragHandleDocs.tsx +5 -5
  35. package/examples/pages/react/Tags.tsx +27 -22
  36. package/package.json +2 -1
  37. package/react/components/Tag.d.ts +2 -1
  38. package/react/components/Tag.js +5 -1
  39. package/react/components/avatar/avatar-group.js +2 -2
  40. package/react/index.d.ts +1 -1
  41. package/react/index.js +3 -3
  42. package/app-typescript/components/Spacer.tsx +0 -79
  43. package/react/components/Spacer.d.ts +0 -30
  44. package/react/components/Spacer.js +0 -86
Binary file
Binary file
Binary file
@@ -196,4 +196,7 @@
196
196
  <glyph unicode="&#xe6ba;" glyph-name="text-block" d="M896 543.95v-191.9c0-53.012-43.038-96.050-96.050-96.050h-575.9c-53.012 0-96.050 43.038-96.050 96.050v191.9c0 53.012 43.039 96.050 96.050 96.050h575.9c53.012 0 96.050-43.038 96.050-96.050zM256 384h512v128h-512zM128 768h768v128h-768zM128 0h768v128h-768z" />
197
197
  <glyph unicode="&#xe6bb;" glyph-name="graphic-cancel" d="M656.538 167.882c-43.904-135.078-170.894-232.834-320.534-232.834-185.972 0-336.956 150.984-336.956 336.956 0 149.586 97.684 276.536 232.686 320.486l-231.668 231.562 67.868 67.896 888.476-888.064-67.866-67.898zM256 840.58v119.42h768v-768h-119.12l-113.858 113.806c-14.682 221.54-191.856 398.648-413.422 413.232z" />
198
198
  <glyph unicode="&#xe6bc;" glyph-name="play-cancel" d="M192.74 631.466l-192.674 192.586 67.868 67.896 888.476-888.064-67.866-67.898-341.312 341.152-318.874-191.324c-3.724-2.234-7.988-3.416-12.332-3.416-13.15 0-23.97 10.82-23.97 23.97v0.032zM385.242 711.398c-0.79 0.79-0.866 2.042-0.18 2.922 0.688 0.878 1.922 1.106 2.878 0.532 76.324-45.866 409.842-246.29 409.842-246.29 7.204-4.328 11.624-12.142 11.624-20.546 0-8.41-4.424-16.226-11.636-20.554l-80.274-48.164s-269.93 269.806-332.254 332.1z" />
199
+ <glyph unicode="&#xe6bd;" glyph-name="thumb-up" d="M401.454 64h302.546c40.288 0 78.226 18.968 102.4 51.2l128 170.666c16.618 22.158 25.6 49.106 25.6 76.8v130.134c0 45.76-36.654 83.2-81.454 83.2h-256.99l39.914 232.224c0 17.056-6.924 32.864-17.92 44.096l-43.172 43.68c-44.686-47.712-166.516-188.124-233.942-266.16-30.038-34.764-46.436-79.106-46.436-125.048v-357.592c0-45.76 36.654-83.2 81.454-83.2zM224 64c17.674 0 32 14.326 32 32v448c0 17.674-14.326 32-32 32h-128c-17.673 0-32-14.326-32-32v-448c0-17.674 14.327-32 32-32z" />
200
+ <glyph unicode="&#xe6be;" glyph-name="thumb-down" d="M622.546 832h-302.546c-40.288 0-78.226-18.969-102.4-51.2l-128-170.666c-16.617-22.156-25.6-49.106-25.6-76.8v-130.134c0-45.76 36.655-83.2 81.455-83.2h256.989l-39.914-232.224c0-17.056 6.924-32.864 17.92-44.096l43.172-43.68c44.686 47.712 166.516 188.124 233.942 266.16 30.038 34.764 46.436 79.106 46.436 125.048v357.592c0 45.76-36.654 83.2-81.454 83.2zM800 832c-17.674 0-32-14.327-32-32v-448c0-17.674 14.326-32 32-32h128c17.674 0 32 14.326 32 32v448c0 17.673-14.326 32-32 32z" />
201
+ <glyph unicode="&#xe6bf;" glyph-name="open-ai" d="M956.774 540.898c23.4 69.776 15.25 146.036-22.35 209.586-56.528 97.272-170.376 147.334-281.594 123.73-62.576 68.738-157.756 99.346-249.254 80.151s-165.906-85.080-195.090-172.753c-73.094-14.785-135.933-59.92-173.006-123.73-57.318-97.010-44.172-219.442 32.077-302.706-23.663-69.776-15.513-146.038 22.086-209.588 56.792-97.27 170.639-147.334 281.857-123.728 49.43-54.992 120.42-86.118 195.090-85.858 113.848 0 214.812 72.37 249.518 179.498 73.094 14.784 135.932 59.918 173.006 123.728 56.528 96.752 43.382 218.666-32.34 301.67zM566.59 2.924c-45.486 0-89.394 15.564-124.364 44.356l6.048 3.372 206.66 117.762c10.518 5.966 16.828 17.12 17.090 29.052v287.664l87.292-49.804c0.788-0.518 1.578-1.296 1.578-2.334v-238.12c-0.264-106.090-87.030-191.688-194.304-191.948zM148.801 179.050c-22.875 38.908-31.025 84.302-23.138 128.656l6.047-3.63 206.923-117.764c10.516-5.966 23.4-5.966 33.654 0l252.672 143.702v-99.606c0-1.036-0.526-2.074-1.314-2.594l-209.29-119.058c-93.076-52.916-211.918-21.53-265.555 70.294zM94.113 623.124c22.875 39.168 59.158 68.998 102.278 84.302v-242.27c-0.263-11.932 6.311-23.086 16.827-28.792l251.358-143.184-87.292-49.802c-1.052-0.518-2.104-0.518-3.156 0l-209.025 118.8c-92.813 53.176-124.627 170.16-71.253 261.984v-1.038zM812.164 458.672l-252.41 144.48 87.292 49.542c1.052 0.52 2.104 0.52 3.156 0l209.026-119.058c65.206-37.094 102.804-108.166 96.494-182.092s-55.214-137.736-125.942-163.676v242.27c-0.526 11.932-7.098 22.568-17.616 28.534zM898.93 587.588l-6.048 3.632-206.396 118.8c-10.518 5.966-23.402 5.966-33.918 0l-252.41-143.702v99.606c0 1.038 0.264 2.074 1.316 2.594l209.026 118.8c65.468 37.093 146.712 33.721 208.5-8.819s93.338-116.725 80.456-189.873v-1.038zM352.306 411.204l-87.292 49.542c-0.788 0.52-1.576 1.298-1.576 2.336v237.6c0 74.445 43.644 142.145 112.006 173.532 68.36 31.646 148.816 21.27 206.922-26.198l-6.046-3.372-206.66-117.763c-10.518-5.966-16.828-17.12-17.092-29.052zM399.632 512.106l112.534 64.068 112.794-64.068v-127.88l-112.268-64.068-112.796 64.068z" />
199
202
  </font></defs></svg>
Binary file
Binary file
@@ -115,6 +115,8 @@ $sd-big-icon-font: (
115
115
  tag: "\e634",
116
116
  rundown: "\e635",
117
117
  checkmark-circle: "\e636",
118
+ open-ai: "\e637",
119
+ general-ai: "\e638",
118
120
  );
119
121
 
120
122
  @each $name, $value in $sd-big-icon-font {
@@ -9,12 +9,12 @@
9
9
  background-color: transparent;
10
10
  .drag-handle-dots {
11
11
  transition: all 0.1s ease;
12
- opacity: 0.4;
12
+ opacity: 0.55;
13
13
  }
14
14
  &:hover {
15
15
  cursor: grab;
16
16
  .drag-handle-dots {
17
- opacity: 0.8;
17
+ opacity: 0.85;
18
18
  }
19
19
  }
20
20
  &:active {
@@ -297,6 +297,9 @@ $sd-icon-font: (
297
297
  text-block: "\e6ba",
298
298
  graphic-cancel: "\e6bb",
299
299
  play-cancel: "\e6bc",
300
+ thumb-up: "\e6bd",
301
+ thumb-down: "\e6be",
302
+ open-ai: "\e6bf",
300
303
  );
301
304
 
302
305
  @each $name, $value in $sd-icon-font {
@@ -84,7 +84,6 @@ tags-input,
84
84
  &:hover {
85
85
  cursor: pointer;
86
86
  }
87
-
88
87
  .tags-input__remove-button {
89
88
  height: 1.8rem;
90
89
  width: 1.8rem;
@@ -103,7 +102,6 @@ tags-input,
103
102
  cursor: pointer;
104
103
  transition: background-color .2s ease-out, color .1s ease-out, opacity .1s ease-out;
105
104
  margin-inline-end: -1rem;
106
- margin-inline-start: 0.8rem;
107
105
 
108
106
  [class^="icon-"], [class*=" icon-"] {
109
107
  color: var(--color-text-light);
@@ -143,13 +141,20 @@ tags-input,
143
141
  display: flex;
144
142
  flex-direction: row;
145
143
  align-items: center;
146
- gap: var(--space--2);
144
+ gap: var(--space--1);
147
145
 
148
146
  span {
149
147
  flex-grow: 1;
150
148
  }
151
149
  }
152
150
  }
151
+ &.tags-input__tag-item--draggable {
152
+ border-radius: $border-radius__base--small;
153
+ padding-inline-start: 6px;
154
+ .drag-handle-wrapper {
155
+ margin-inline-end: 6px;
156
+ }
157
+ }
153
158
  }
154
159
 
155
160
  .tags-input__tag-item--readonly {
@@ -468,7 +473,7 @@ tags-input,
468
473
  .tags-input__helper-box {
469
474
  display: flex;
470
475
  align-items: center;
471
- gap: var(--space--2);
476
+ gap: var(--space--1);
472
477
  }
473
478
  }
474
479
 
@@ -663,7 +668,7 @@ tags-input,
663
668
  display: flex;
664
669
  width: 100%;
665
670
  align-items: center;
666
- gap: var(--space--2);
671
+ gap: var(--space--1);
667
672
  }
668
673
 
669
674
  .tags-input__remove-button {
@@ -131,7 +131,16 @@ $tag-label-lineheight: 100% !default;
131
131
  }
132
132
 
133
133
  .tag-label--square {
134
- border-radius: $border-radius__base--x-small;
134
+ border-radius: $border-radius__base--small;
135
+ padding-inline-start: var(--space--1);
136
+ }
137
+
138
+ .tag-label--draggable {
139
+ border-radius: $border-radius__base--small;
140
+ padding-inline-start: 6px;
141
+ .drag-handle-wrapper {
142
+ margin-inline-end: 6px;
143
+ }
135
144
  }
136
145
 
137
146
  // ----------------- SEARCH TAGS -----------------
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
+ import { DragHandle } from './DragHandle';
3
4
 
4
5
  interface IProps {
5
6
  text: string;
@@ -8,20 +9,22 @@ interface IProps {
8
9
  shade?: 'light' | 'darker' | 'highlight1' | 'highlight2' | 'inverse'; // default light
9
10
  shape?: 'round' | 'square'; // default round
10
11
  readOnly?: boolean;
12
+ draggable?: boolean;
11
13
  onClick(): void;
12
14
  }
13
15
 
14
- export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }: IProps) => {
16
+ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label, draggable }: IProps) => {
15
17
  let classes = classNames('tag-label', {
16
18
  [`tag-label--${shade}`]: shade && shade !== 'light',
17
19
  'tag-label--square': shape === 'square',
18
-
20
+ 'tag-label--draggable': draggable === true,
19
21
  });
20
22
  return (
21
23
  <>
22
24
  {label
23
25
  ?
24
26
  <span className={classes} key={keyValue}>
27
+ {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
25
28
  <span className='tag-label--text-wrapper'>
26
29
  <span className='tag-label--text-label'>
27
30
  {label}:
@@ -36,6 +39,7 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label }:
36
39
  </span>
37
40
  :
38
41
  <span className={classes} key={keyValue}>
42
+ {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
39
43
  <span className='tag-label--text'>
40
44
  {text}
41
45
  </span>
@@ -4,7 +4,7 @@ import {Avatar, IPropsAvatar} from './avatar';
4
4
  import {AvatarWrapper} from './avatar-wrapper';
5
5
  import {AvatarContentNumber} from './avatar-number';
6
6
  import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
7
- import { Spacer } from '../Spacer';
7
+ import {Spacer} from '@superdesk/common';
8
8
  import {WithPopover} from '../WithPopover';
9
9
 
10
10
  export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;
@@ -99,7 +99,7 @@ export { ContentListItem } from './components/Lists/ContentList';
99
99
  export { MultiSelect } from './components/MultiSelect';
100
100
  export { ResizablePanels } from './components/ResizablePanels';
101
101
  export { WithPopover } from './components/WithPopover';
102
- export { Spacer, SpacerBlock } from './components/Spacer';
102
+ export { Spacer, SpacerBlock } from '@superdesk/common';
103
103
  export { ResizeObserverComponent } from './components/ResizeObserverComponent';
104
104
  export { DragHandleDots } from './components/DragHandleDots';
105
105
  export { DragHandle } from './components/DragHandle';
@@ -12008,6 +12008,135 @@ doc-react-playground {
12008
12008
  --icon-base-size: 64px
12009
12009
  ; }
12010
12010
 
12011
+ .icon-thumb-up:before {
12012
+ content: ""; }
12013
+
12014
+ .icon-thumb-up.color--default {
12015
+ color: var(--color-icon-default); }
12016
+
12017
+ .icon-thumb-up.color--primary {
12018
+ color: var(--sd-colour-primary) !important; }
12019
+
12020
+ .icon-thumb-up.color--success {
12021
+ color: var(--sd-colour-success) !important; }
12022
+
12023
+ .icon-thumb-up.color--warning {
12024
+ color: var(--sd-colour-warning) !important; }
12025
+
12026
+ .icon-thumb-up.color--alert {
12027
+ color: var(--sd-colour-alert) !important; }
12028
+
12029
+ .icon-thumb-up.color--highlight {
12030
+ color: var(--sd-colour-highlight) !important; }
12031
+
12032
+ .icon-thumb-up.color--light {
12033
+ color: var(--color-text-lighter) !important; }
12034
+
12035
+ .icon-thumb-up.color--white {
12036
+ color: #e2e5e9 !important; }
12037
+
12038
+ .icon-thumb-up.scale--1\.5x {
12039
+ --icon-base-size: 24px
12040
+ ; }
12041
+
12042
+ .icon-thumb-up.scale--2x {
12043
+ --icon-base-size: 32px
12044
+ ; }
12045
+
12046
+ .icon-thumb-up.scale--3x {
12047
+ --icon-base-size: 48px
12048
+ ; }
12049
+
12050
+ .icon-thumb-up.scale--4x {
12051
+ --icon-base-size: 64px
12052
+ ; }
12053
+
12054
+ .icon-thumb-down:before {
12055
+ content: ""; }
12056
+
12057
+ .icon-thumb-down.color--default {
12058
+ color: var(--color-icon-default); }
12059
+
12060
+ .icon-thumb-down.color--primary {
12061
+ color: var(--sd-colour-primary) !important; }
12062
+
12063
+ .icon-thumb-down.color--success {
12064
+ color: var(--sd-colour-success) !important; }
12065
+
12066
+ .icon-thumb-down.color--warning {
12067
+ color: var(--sd-colour-warning) !important; }
12068
+
12069
+ .icon-thumb-down.color--alert {
12070
+ color: var(--sd-colour-alert) !important; }
12071
+
12072
+ .icon-thumb-down.color--highlight {
12073
+ color: var(--sd-colour-highlight) !important; }
12074
+
12075
+ .icon-thumb-down.color--light {
12076
+ color: var(--color-text-lighter) !important; }
12077
+
12078
+ .icon-thumb-down.color--white {
12079
+ color: #e2e5e9 !important; }
12080
+
12081
+ .icon-thumb-down.scale--1\.5x {
12082
+ --icon-base-size: 24px
12083
+ ; }
12084
+
12085
+ .icon-thumb-down.scale--2x {
12086
+ --icon-base-size: 32px
12087
+ ; }
12088
+
12089
+ .icon-thumb-down.scale--3x {
12090
+ --icon-base-size: 48px
12091
+ ; }
12092
+
12093
+ .icon-thumb-down.scale--4x {
12094
+ --icon-base-size: 64px
12095
+ ; }
12096
+
12097
+ .icon-open-ai:before {
12098
+ content: ""; }
12099
+
12100
+ .icon-open-ai.color--default {
12101
+ color: var(--color-icon-default); }
12102
+
12103
+ .icon-open-ai.color--primary {
12104
+ color: var(--sd-colour-primary) !important; }
12105
+
12106
+ .icon-open-ai.color--success {
12107
+ color: var(--sd-colour-success) !important; }
12108
+
12109
+ .icon-open-ai.color--warning {
12110
+ color: var(--sd-colour-warning) !important; }
12111
+
12112
+ .icon-open-ai.color--alert {
12113
+ color: var(--sd-colour-alert) !important; }
12114
+
12115
+ .icon-open-ai.color--highlight {
12116
+ color: var(--sd-colour-highlight) !important; }
12117
+
12118
+ .icon-open-ai.color--light {
12119
+ color: var(--color-text-lighter) !important; }
12120
+
12121
+ .icon-open-ai.color--white {
12122
+ color: #e2e5e9 !important; }
12123
+
12124
+ .icon-open-ai.scale--1\.5x {
12125
+ --icon-base-size: 24px
12126
+ ; }
12127
+
12128
+ .icon-open-ai.scale--2x {
12129
+ --icon-base-size: 32px
12130
+ ; }
12131
+
12132
+ .icon-open-ai.scale--3x {
12133
+ --icon-base-size: 48px
12134
+ ; }
12135
+
12136
+ .icon-open-ai.scale--4x {
12137
+ --icon-base-size: 64px
12138
+ ; }
12139
+
12011
12140
  .icn-mix {
12012
12141
  position: relative;
12013
12142
  display: inline-flex !important;
@@ -16105,3 +16234,65 @@ doc-react-playground {
16105
16234
 
16106
16235
  .big-icon--checkmark-circle:before {
16107
16236
  content: ""; }
16237
+
16238
+ .big-icon--open-ai {
16239
+ content: ""; }
16240
+ .big-icon--open-ai.color--default {
16241
+ color: #2c323a; }
16242
+ .big-icon--open-ai.color--primary {
16243
+ color: var(--sd-colour-primary) !important; }
16244
+ .big-icon--open-ai.color--success {
16245
+ color: var(--sd-colour-success) !important; }
16246
+ .big-icon--open-ai.color--warning {
16247
+ color: var(--sd-colour-warning) !important; }
16248
+ .big-icon--open-ai.color--alert {
16249
+ color: var(--sd-colour-alert) !important; }
16250
+ .big-icon--open-ai.color--highlight {
16251
+ color: var(--sd-colour-highlight) !important; }
16252
+ .big-icon--open-ai.color--light {
16253
+ color: var(--color-text-lighter) !important; }
16254
+ .big-icon--open-ai.color--white {
16255
+ color: #e2e5e9 !important; }
16256
+ .big-icon--open-ai.scale--2x {
16257
+ --big-icon-size: 52px
16258
+ ; }
16259
+ .big-icon--open-ai.scale--3x {
16260
+ --big-icon-size: 78px
16261
+ ; }
16262
+ .big-icon--open-ai.scale--4x {
16263
+ --big-icon-size: 104px
16264
+ ; }
16265
+
16266
+ .big-icon--open-ai:before {
16267
+ content: ""; }
16268
+
16269
+ .big-icon--general-ai {
16270
+ content: ""; }
16271
+ .big-icon--general-ai.color--default {
16272
+ color: #2c323a; }
16273
+ .big-icon--general-ai.color--primary {
16274
+ color: var(--sd-colour-primary) !important; }
16275
+ .big-icon--general-ai.color--success {
16276
+ color: var(--sd-colour-success) !important; }
16277
+ .big-icon--general-ai.color--warning {
16278
+ color: var(--sd-colour-warning) !important; }
16279
+ .big-icon--general-ai.color--alert {
16280
+ color: var(--sd-colour-alert) !important; }
16281
+ .big-icon--general-ai.color--highlight {
16282
+ color: var(--sd-colour-highlight) !important; }
16283
+ .big-icon--general-ai.color--light {
16284
+ color: var(--color-text-lighter) !important; }
16285
+ .big-icon--general-ai.color--white {
16286
+ color: #e2e5e9 !important; }
16287
+ .big-icon--general-ai.scale--2x {
16288
+ --big-icon-size: 52px
16289
+ ; }
16290
+ .big-icon--general-ai.scale--3x {
16291
+ --big-icon-size: 78px
16292
+ ; }
16293
+ .big-icon--general-ai.scale--4x {
16294
+ --big-icon-size: 104px
16295
+ ; }
16296
+
16297
+ .big-icon--general-ai:before {
16298
+ content: ""; }