@stratusjs/angular 0.8.3 → 0.8.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.
- package/package.json +1 -1
- package/src/media-selector/media-selector.component.css +2 -0
- package/src/media-selector/media-selector.component.css.map +1 -1
- package/src/media-selector/media-selector.component.html +5 -1
- package/src/media-selector/media-selector.component.min.css +1 -1
- package/src/media-selector/media-selector.component.min.html +1 -1
- package/src/media-selector/media-selector.component.scss +5 -0
package/package.json
CHANGED
|
@@ -120,6 +120,8 @@ sa-media-selector .shapeholder,
|
|
|
120
120
|
|
|
121
121
|
.cdk-drag-placeholder {
|
|
122
122
|
opacity: 0.3;
|
|
123
|
+
background: rgba(0, 0, 0, 0.4);
|
|
124
|
+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
123
125
|
}
|
|
124
126
|
.cdk-drag-animating {
|
|
125
127
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/angular/src/media-selector/media-selector.component.scss"],"names":[],"mappings":"AACA;AAIE;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;EACE;EACA;;;AAIF;EACE;EACA;;;AASE;EACE;EACA;;;AAMR;AAEA;EACE;EACA;EACA;;;AAGF;AAKI;EACE;;
|
|
1
|
+
{"version":3,"sources":["packages/angular/src/media-selector/media-selector.component.scss"],"names":[],"mappings":"AACA;AAIE;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;EACE;EACA;;;AAIF;EACE;EACA;;;AASE;EACE;EACA;;;AAMR;AAEA;EACE;EACA;EACA;;;AAGF;AAKI;EACE;;AAQF;AAAA;EACE;EACA;;AAEF;AAAA;EAEE;EAEA;EACA;EACA;;AAIA;AAAA;EACE;;AAEF;AAAA;EACE;EACA;;AAMJ;AAAA;EAKE;EAEA;EAEA;EACA;EAIA;EAKA;EACA;EAiBA;;AAZA;AAAA;EACE;;AAGF;AAAA;EACE;;AAGF;AAAA;EACE;;AAKF;AAAA;EACE;;AAGJ;AAAA;EAIE;;AAOF;EACE;;;AAiBJ;EACE;EAGA;EACA;;AAEF;EACE;;AAGF;EAIE;;AAHA;EACE;;;AAMN;EACE;EACA;EACA;;;AAIF;AAIE;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAIJ;AAGE;EACE;;AAEF;EACE;;;AAIJ;AACA;EACE;;;AAEF;EACE","file":"media-selector.component.css","sourcesContent":["\n/* Styles for Both Media Selector and Media Selected Areas */\n\nsa-media-selector,\n.media-selected-box.cdk-drag-preview {\n .content-type {\n margin-bottom: 2px;\n md-icon,\n mat-icon {\n margin-right: 4px;\n height: 14px;\n width: 14px;\n min-height: 14px;\n min-width: 14px;\n }\n .content-type-name {\n font-weight: bold;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n }\n .no-image-icon {\n md-icon,\n mat-icon {\n height: 28px;\n width: 28px;\n min-height: 28px;\n min-width: 28px;\n svg g {\n fill: #FFF;\n }\n }\n }\n .shapeholder {\n width: 100%;\n display: block;\n }\n}\n.media-selected-box.cdk-drag-preview {\n .column-title h3 {\n margin: 0 0 5px;\n font-size: 16px;\n }\n}\n\n// the dragging class appears on the\n// placeholder of what is being dragged\n.media-selector {\n .cdk-drop-list {\n &.cdk-drop-list-dragging {\n .shapeholder {\n width: 80px;\n display: block;\n }\n }\n }\n}\n\n/* Draggable Media Selected List */\n\n.media-selector-wrapper {\n background: rgba(255, 255, 255, .4);\n margin-top: 20px;\n padding: 40px;\n}\n\n/* Based on Angular Material 8+ */\n\n.media-selector {\n .media-selected {\n // Note: an ampersand appears twice in this selector\n &-list.cdk-drop-list-dragging &-box:not(.cdk-drag-placeholder) {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n }\n // Note: I added a selector for the cdk-drag-placeholder class because we lose the outer container when dragging,\n // but it doesn't work.\n //.cdk-drag-placeholder,\n .media-selected,\n ul.media-selected {\n &-container {\n display:flex;\n flex-wrap: wrap;\n }\n &-list {\n //width: 1000px;\n max-width: 100%;\n //border: solid 1px #ccc;\n min-height: 60px;\n display: flex;\n flex-direction: row;\n //background: white;\n //border-radius: 4px;\n //overflow: hidden;\n &-grid {\n flex-wrap: wrap;\n }\n .shapeholder {\n width: 80px;\n display: block;\n }\n }\n }\n .media-selected,\n li.media-selected {\n &-box {\n //width: 75px;\n //height: 75px;\n //padding: 20px 10px;\n //width: 12.5%;\n padding: 4px;\n //border-right: solid 1px #ccc;\n color: rgba(0, 0, 0, 0.87);\n // FIXME: when this uses display:flex, the box collapses\n display: flex;\n flex-direction: row;\n //align-items: center;\n //justify-content: center;\n //justify-content: space-between;\n text-align: center;\n //border-radius: 4px;\n //position: relative;\n //box-sizing: border-box;\n //background: white;\n font-size: 14px;\n transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);\n //box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),\n //0 2px 2px 0 rgba(0, 0, 0, 0.14),\n //0 1px 5px 0 rgba(0, 0, 0, 0.12);\n // this forces the cells to grow to fit the row\n &-grow {\n flex-grow: 1;\n }\n // this forces all cells to wrap\n &-grid {\n flex-wrap: wrap;\n }\n // this forces all cells on one line instead of wrapping\n &-row {\n flex-basis: 0;\n }\n // this is the default cursor for boxes\n cursor: pointer;\n // this changes the cursor for movable boxes\n &.cdk-drag {\n cursor: move;\n }\n }\n &-box:active {\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n opacity: 0.6;\n }\n &-box:last-child {\n //border: none;\n }\n }\n .cdk-drop {\n &-list {\n display: flex;\n //padding-right: 10px;\n //padding-bottom: 10px;\n }\n }\n}\n\n.cdk-drag {\n &-preview {\n // Note: these are the original drag preview styles Angular+\n //box-sizing: border-box;\n //border-radius: 4px;\n //box-shadow: 2px 2px 4px rgba(0,0,0,.3)\n //box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\n //0 8px 10px 1px rgba(0, 0, 0, 0.14),\n //0 3px 14px 2px rgba(0, 0, 0, 0.12);\n }\n &-placeholder {\n opacity: 0.3;\n //opacity: 0.7;\n //opacity: 0;\n background: rgba(0, 0, 0, .4);\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n &-animating {\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n }\n // hide tooltip in preview (dragged element) and placeholder in the list\n &-preview, &-placeholder {\n .info-hover-container {\n display: none;\n }\n list-style: none;\n }\n}\n\n.custom-ghost-placeholder {\n background: rgba(0, 0, 0, .4);\n min-height: 60px;\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n/* Selected List Custom */\n\nsa-media-selector,\n.media-selected-box.cdk-drag-preview {\n .column-image,\n .column-title,\n .column-action {\n float: left;\n }\n}\n\n/* Full Size */\n\n.full {\n &-width {\n width: 100%;\n }\n &-height {\n height: 100%;\n }\n}\n\n/* Text Transforms */\n.uppercase {\n text-transform: uppercase;\n}\n.lowercase {\n text-transform: lowercase;\n}\n"]}
|
|
@@ -33,7 +33,11 @@
|
|
|
33
33
|
*ngFor="let selectedModel of dataSub | async; let i = index"
|
|
34
34
|
[cdkDropListData]="i"
|
|
35
35
|
>
|
|
36
|
-
|
|
36
|
+
<!--
|
|
37
|
+
Note: I've added the media-selected-list class to this element, which is not intentional for this design,
|
|
38
|
+
is a temporary solution to the issue of broken CSS when this item is dragged out of the parent above.
|
|
39
|
+
-->
|
|
40
|
+
<div class="media-selected-list-row media-selected-box media-selected-box-grid media-selected-list"
|
|
37
41
|
cdkDrag
|
|
38
42
|
[cdkDragData]="i"
|
|
39
43
|
(cdkDragEntered)="dragEntered($event)"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.media-selected-box.cdk-drag-preview .content-type,sa-media-selector .content-type{margin-bottom:2px}.media-selected-box.cdk-drag-preview .content-type mat-icon,.media-selected-box.cdk-drag-preview .content-type md-icon,sa-media-selector .content-type mat-icon,sa-media-selector .content-type md-icon{margin-right:4px;height:14px;width:14px;min-height:14px;min-width:14px}.media-selected-box.cdk-drag-preview .content-type .content-type-name,sa-media-selector .content-type .content-type-name{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon,.media-selected-box.cdk-drag-preview .no-image-icon md-icon,sa-media-selector .no-image-icon mat-icon,sa-media-selector .no-image-icon md-icon{height:28px;width:28px;min-height:28px;min-width:28px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon svg g,.media-selected-box.cdk-drag-preview .no-image-icon md-icon svg g,sa-media-selector .no-image-icon mat-icon svg g,sa-media-selector .no-image-icon md-icon svg g{fill:#fff}.media-selected-box.cdk-drag-preview .shapeholder,sa-media-selector .shapeholder{width:100%;display:block}.media-selected-box.cdk-drag-preview .column-title h3{margin:0 0 5px;font-size:16px}.media-selector .cdk-drop-list.cdk-drop-list-dragging .shapeholder{width:80px;display:block}.media-selector-wrapper{background:rgba(255,255,255,.4);margin-top:20px;padding:40px}.media-selector .media-selected-list.cdk-drop-list-dragging .media-selector .media-selected-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selector .media-selected-container,.media-selector ul.media-selected-container{display:flex;flex-wrap:wrap}.media-selector .media-selected-list,.media-selector ul.media-selected-list{max-width:100%;min-height:60px;display:flex;flex-direction:row}.media-selector .media-selected-list-grid,.media-selector ul.media-selected-list-grid{flex-wrap:wrap}.media-selector .media-selected-list .shapeholder,.media-selector ul.media-selected-list .shapeholder{width:80px;display:block}.media-selector .media-selected-box,.media-selector li.media-selected-box{padding:4px;color:rgba(0,0,0,.87);display:flex;flex-direction:row;text-align:center;font-size:14px;transition:box-shadow .2s cubic-bezier(0,0,.2,1);cursor:pointer}.media-selector .media-selected-box-grow,.media-selector li.media-selected-box-grow{flex-grow:1}.media-selector .media-selected-box-grid,.media-selector li.media-selected-box-grid{flex-wrap:wrap}.media-selector .media-selected-box-row,.media-selector li.media-selected-box-row{flex-basis:0}.media-selector .media-selected-box.cdk-drag,.media-selector li.media-selected-box.cdk-drag{cursor:move}.media-selector .media-selected-box:active,.media-selector li.media-selected-box:active{opacity:.6}.media-selector .cdk-drop-list{display:flex}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.cdk-drag-preview{list-style:none}.cdk-drag-placeholder .info-hover-container,.cdk-drag-preview .info-hover-container{display:none}.custom-ghost-placeholder{background:rgba(0,0,0,.4);min-height:60px;transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selected-box.cdk-drag-preview .column-action,.media-selected-box.cdk-drag-preview .column-image,.media-selected-box.cdk-drag-preview .column-title,sa-media-selector .column-action,sa-media-selector .column-image,sa-media-selector .column-title{float:left}.full-width{width:100%}.full-height{height:100%}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}
|
|
1
|
+
.media-selected-box.cdk-drag-preview .content-type,sa-media-selector .content-type{margin-bottom:2px}.media-selected-box.cdk-drag-preview .content-type mat-icon,.media-selected-box.cdk-drag-preview .content-type md-icon,sa-media-selector .content-type mat-icon,sa-media-selector .content-type md-icon{margin-right:4px;height:14px;width:14px;min-height:14px;min-width:14px}.media-selected-box.cdk-drag-preview .content-type .content-type-name,sa-media-selector .content-type .content-type-name{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon,.media-selected-box.cdk-drag-preview .no-image-icon md-icon,sa-media-selector .no-image-icon mat-icon,sa-media-selector .no-image-icon md-icon{height:28px;width:28px;min-height:28px;min-width:28px}.media-selected-box.cdk-drag-preview .no-image-icon mat-icon svg g,.media-selected-box.cdk-drag-preview .no-image-icon md-icon svg g,sa-media-selector .no-image-icon mat-icon svg g,sa-media-selector .no-image-icon md-icon svg g{fill:#fff}.media-selected-box.cdk-drag-preview .shapeholder,sa-media-selector .shapeholder{width:100%;display:block}.media-selected-box.cdk-drag-preview .column-title h3{margin:0 0 5px;font-size:16px}.media-selector .cdk-drop-list.cdk-drop-list-dragging .shapeholder{width:80px;display:block}.media-selector-wrapper{background:rgba(255,255,255,.4);margin-top:20px;padding:40px}.media-selector .media-selected-list.cdk-drop-list-dragging .media-selector .media-selected-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selector .media-selected-container,.media-selector ul.media-selected-container{display:flex;flex-wrap:wrap}.media-selector .media-selected-list,.media-selector ul.media-selected-list{max-width:100%;min-height:60px;display:flex;flex-direction:row}.media-selector .media-selected-list-grid,.media-selector ul.media-selected-list-grid{flex-wrap:wrap}.media-selector .media-selected-list .shapeholder,.media-selector ul.media-selected-list .shapeholder{width:80px;display:block}.media-selector .media-selected-box,.media-selector li.media-selected-box{padding:4px;color:rgba(0,0,0,.87);display:flex;flex-direction:row;text-align:center;font-size:14px;transition:box-shadow .2s cubic-bezier(0,0,.2,1);cursor:pointer}.media-selector .media-selected-box-grow,.media-selector li.media-selected-box-grow{flex-grow:1}.media-selector .media-selected-box-grid,.media-selector li.media-selected-box-grid{flex-wrap:wrap}.media-selector .media-selected-box-row,.media-selector li.media-selected-box-row{flex-basis:0}.media-selector .media-selected-box.cdk-drag,.media-selector li.media-selected-box.cdk-drag{cursor:move}.media-selector .media-selected-box:active,.media-selector li.media-selected-box:active{opacity:.6}.media-selector .cdk-drop-list{display:flex}.cdk-drag-placeholder{opacity:.3;background:rgba(0,0,0,.4);transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder,.cdk-drag-preview{list-style:none}.cdk-drag-placeholder .info-hover-container,.cdk-drag-preview .info-hover-container{display:none}.custom-ghost-placeholder{background:rgba(0,0,0,.4);min-height:60px;transition:transform 250ms cubic-bezier(0,0,.2,1)}.media-selected-box.cdk-drag-preview .column-action,.media-selected-box.cdk-drag-preview .column-image,.media-selected-box.cdk-drag-preview .column-title,sa-media-selector .column-action,sa-media-selector .column-image,sa-media-selector .column-title{float:left}.full-width{width:100%}.full-height{height:100%}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<mat-progress-bar mode="indeterminate" *ngIf="!styled"></mat-progress-bar><div class="media-selector" *ngIf="styled"><div class="media-component section-container selected-container border-default border-default-all border-radius-default"><p class="small-all-caps selected-media-label" [textContent]="'Selected ' + (type || 'Items')"></p><div class="media-content media-selected-container" cdkDropListGroup><div class="media-selected-list media-selected-list-grid" cdkDropList *ngFor="let selectedModel of dataSub | async; let i = index" [cdkDropListData]="i"><div class="media-selected-list-row media-selected-box media-selected-box-grid" cdkDrag [cdkDragData]="i" (cdkDragEntered)="dragEntered($event)"><div class="media-item selected-media-item" [id]="'libb_' + _.get(selectedModel, 'id') || id || uid" [ngClass]="{
|
|
1
|
+
<mat-progress-bar mode="indeterminate" *ngIf="!styled"></mat-progress-bar><div class="media-selector" *ngIf="styled"><div class="media-component section-container selected-container border-default border-default-all border-radius-default"><p class="small-all-caps selected-media-label" [textContent]="'Selected ' + (type || 'Items')"></p><div class="media-content media-selected-container" cdkDropListGroup><div class="media-selected-list media-selected-list-grid" cdkDropList *ngFor="let selectedModel of dataSub | async; let i = index" [cdkDropListData]="i"><div class="media-selected-list-row media-selected-box media-selected-box-grid media-selected-list" cdkDrag [cdkDragData]="i" (cdkDragEntered)="dragEntered($event)"><div class="media-item selected-media-item" [id]="'libb_' + _.get(selectedModel, 'id') || id || uid" [ngClass]="{
|
|
2
2
|
'image-thumb': _.get(selectedModel, 'mime') && _.get(selectedModel, 'mime').includes('image'),
|
|
3
3
|
'video-thumb' : _.get(selectedModel, 'mime') && _.get(selectedModel, 'mime').includes('video'),
|
|
4
4
|
'audio-thumb' : _.get(selectedModel, 'mime') && _.get(selectedModel, 'mime').includes('audio'),
|
|
@@ -74,6 +74,9 @@ sa-media-selector,
|
|
|
74
74
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
|
+
// Note: I added a selector for the cdk-drag-placeholder class because we lose the outer container when dragging,
|
|
78
|
+
// but it doesn't work.
|
|
79
|
+
//.cdk-drag-placeholder,
|
|
77
80
|
.media-selected,
|
|
78
81
|
ul.media-selected {
|
|
79
82
|
&-container {
|
|
@@ -177,6 +180,8 @@ sa-media-selector,
|
|
|
177
180
|
opacity: 0.3;
|
|
178
181
|
//opacity: 0.7;
|
|
179
182
|
//opacity: 0;
|
|
183
|
+
background: rgba(0, 0, 0, .4);
|
|
184
|
+
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
180
185
|
}
|
|
181
186
|
&-animating {
|
|
182
187
|
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|