Skip to content

Commit

Permalink
fix(content-entries): rpopup-widget style
Browse files Browse the repository at this point in the history
  • Loading branch information
@amirch1
amirch1 committed Jun 28, 2017
1 parent 8ea88d1 commit ba85b50
Show file tree
Hide file tree
Showing 14 changed files with 361 additions and 298 deletions.
68 changes: 35 additions & 33 deletions src/applications/content-entries-app/entry/entry-captions/entry-captions-edit.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,44 @@
<div class="kEditWin kOverrideFAIcons" #captionsEdit>
<kFileDialog #fileDialog [filter]="'.xml,.srt'" (onFileSelected)="_onFileSelected($event)"></kFileDialog>
<form [formGroup]="captionsEditForm" novalidate>
<div class="kEditTitle">{{ (_newCaption ? 'applications.content.entryDetails.captions.add' : 'applications.content.entryDetails.captions.editCaption') | translate}}</div>
<div class="kDivider"></div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.label' | translate}}</span>
<input formControlName="label" type="text" pInputText/>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.language' | translate}}</span>
<p-dropdown [options]="_languages" [autoWidth]="false" formControlName="language"></p-dropdown>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.type' | translate}}</span>
<p-dropdown *ngIf="_newCaption" [options]="_captionFormats" [autoWidth]="false" formControlName="format"></p-dropdown>
<span *ngIf="!_newCaption">{{_getCaptionFormatLabel(currentCaption?.format)}}</span>
</div>
<div class="kRow" *ngIf="_newCaption">
<span class="kLabel">{{'applications.content.entryDetails.captions.add' | translate}}</span>
<p-radioButton name="uploadMethod" value="upload" formControlName="uploadMethod" label="{{'applications.content.entryDetails.captions.upload' | translate}}" (click)="_resetUpload()"></p-radioButton>
<p-radioButton name="uploadMethod" value="fromUrl" formControlName="uploadMethod" label="{{'applications.content.entryDetails.captions.fromUrl' | translate}}" [style]="{'margin-left': '12px'}" (click)="_resetUpload()"></p-radioButton>
</div>
<div class="kHeader">
<span class="kTitle">{{ (_newCaption ? 'applications.content.entryDetails.captions.add' : 'applications.content.entryDetails.captions.editCaption') | translate}}</span>
</div>

<div class="kContainer">
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.label' | translate}}</span>
<input formControlName="label" type="text" pInputText/>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.language' | translate}}</span>
<p-dropdown [options]="_languages" [autoWidth]="false" formControlName="language"></p-dropdown>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.captions.type' | translate}}</span>
<p-dropdown *ngIf="_newCaption" [options]="_captionFormats" [autoWidth]="false" formControlName="format"></p-dropdown>
<span *ngIf="!_newCaption">{{_getCaptionFormatLabel(currentCaption?.format)}}</span>
</div>
<div class="kRow" *ngIf="_newCaption">
<span class="kLabel">{{'applications.content.entryDetails.captions.add' | translate}}</span>
<p-radioButton name="uploadMethod" value="upload" formControlName="uploadMethod" label="{{'applications.content.entryDetails.captions.upload' | translate}}" (click)="_resetUpload()"></p-radioButton>
<p-radioButton name="uploadMethod" value="fromUrl" formControlName="uploadMethod" label="{{'applications.content.entryDetails.captions.fromUrl' | translate}}" [style]="{'margin-left': '12px'}" (click)="_resetUpload()"></p-radioButton>
</div>

<div class="kUpload" *ngIf="_newCaption && captionsEditForm.get('uploadMethod').value === 'upload'">
<button type="button" class="kButtonDefault kUploadButton" pButton label="{{'applications.content.entryDetails.captions.uploadFile' | translate}}" (click)="_uploadCaption()"></button>
<span class="kUploadFileName" [kTooltip]="_uploadFileName">{{_uploadFileName}}</span>
</div>
<div *ngIf="_newCaption && captionsEditForm.get('uploadMethod').value === 'fromUrl'">
<input class="kCaptionUrl" placeholder="{{'applications.content.entryDetails.captions.urlPlaceholder' | translate}}" formControlName="captionUrl" type="text" (blur)="_validate('captionUrl')" pInputText/>
<span class="kInvalid">{{_validationErrorMsg}}</span>
</div>
</div>

<div class="kUpload" *ngIf="_newCaption && captionsEditForm.get('uploadMethod').value === 'upload'">
<button type="button" class="kButtonDefault kUploadButton" pButton label="{{'applications.content.entryDetails.captions.uploadFile' | translate}}" (click)="_uploadCaption()"></button>
<span class="kUploadFileName" [kTooltip]="_uploadFileName">{{_uploadFileName}}</span>
</div>
<div *ngIf="_newCaption && captionsEditForm.get('uploadMethod').value === 'fromUrl'">
<input class="kCaptionUrl" placeholder="{{'applications.content.entryDetails.captions.urlPlaceholder' | translate}}" formControlName="captionUrl" type="text" (blur)="_validate('captionUrl')" pInputText/>
<span class="kInvalid">{{_validationErrorMsg}}</span>
</div>

<div class="kFooter">
<div class="kDivider"></div>
<div class="kRow kCenter">
<button *ngIf="!_newCaption" type="button" class="kButtonBranded kDoneBtn" (click)="_saveAndClose()" pButton label="{{'applications.content.entryDetails.related.done' | translate}}"></button>
<button *ngIf="_newCaption" type="button" [disabled]="!_allowSave()" class="kButtonBranded kDoneBtn" (click)="_saveAndClose()" pButton label="{{'applications.content.entryDetails.captions.add' | translate}}"></button>
</div>
<button *ngIf="!_newCaption" type="button" class="kButtonBranded" (click)="_saveAndClose()" pButton label="{{'applications.content.entryDetails.related.done' | translate}}"></button>
<button *ngIf="_newCaption" type="button" [disabled]="!_allowSave()" class="kButtonBranded" (click)="_saveAndClose()" pButton label="{{'applications.content.entryDetails.captions.add' | translate}}"></button>
</div>

</form>
Expand Down
67 changes: 30 additions & 37 deletions src/applications/content-entries-app/entry/entry-captions/entry-captions-edit.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
@import 'app-theme/_variables.scss';

.kEditWin{
display: flex;
flex-direction: column;
padding-top: 20px;
.kCenter{
justify-content: center;
}
.kEditTitle{
font-size: 24px;
font-weight: 700;
text-align: center;
width: 100%;
}
.kHeader {
height: 78px;
width: 100%;
text-align: center;
padding-top: 24px;
box-sizing: border-box;
border-bottom: 1px solid $kGrayscale4;
.kTitle {
color: #333333;
font-size: 24px;
font-weight: 700;
}
}
.kContainer{
margin: 12px;
height: 258px;
}
.kFooter{
height: 66px;
border-top: 1px solid $kGrayscale4;
display: flex;
align-items: center;
justify-content: center;
button{
height: 34px;
}
}

.kRow{
display: flex;
flex-direction: row;
Expand All @@ -26,30 +42,7 @@
width: 100%;
}
}
.kDivider{
width: 100%;
height: 1px;
margin-top: 24px;
margin-left: -12px;
padding-right: 40px;
background-color: $kGrayscale4;
}

.kFooter{
position: absolute;
bottom: 12px;
right: 0px;
left: 0px;
.kDivider{
margin-left: 0px;
padding-right: 0px;
}
}
.kDoneBtn{
height: 34px;
font-weight: 400;
margin-top: -10px;
}
.kUpload{
display: flex;
align-items: center;
Expand All @@ -64,7 +57,7 @@
.kCaptionUrl{
margin-top: 18px;
margin-left: 120px;
width: 210px;
width: 234px;
}
.kUploadFileName{
white-space: nowrap;
Expand All @@ -81,5 +74,5 @@
}

:host /deep/ .ui-dropdown.ui-widget{
width: 216px;
width: 234px;
}
42 changes: 24 additions & 18 deletions ...lications/content-entries-app/entry/entry-flavours/drm-details/drm-details.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
<div class="kDRMDetails kOverrideFAIcons">
<span class="kHeader">{{'applications.content.entryDetails.flavours.drm.header' | translate}}</span>
<span class="kTitle">{{currentFlavor?.name}}</span>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.assetId' | translate}}</span>
<span>{{currentFlavor?.drm.id}}</span>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.start' | translate}}</span>
<span>{{currentFlavor?.drm.startTime | kDate}}</span>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.end' | translate}}</span>
<span>{{currentFlavor?.drm.endTime | kDate}}</span>
</div>
<span>{{'applications.content.entryDetails.flavours.drm.mbr' | translate}}</span>
<div class="kSources">
<span class="kRow" *ngFor="let source of currentFlavor?.drm.flavorSources">{{source}}</span>
</div>
<div class="kHeader">
<span class="kTitle">{{'applications.content.entryDetails.flavours.drm.header' | translate}}</span>
</div>

<div class="kContainer">
<span class="kName">{{currentFlavor?.name}}</span>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.assetId' | translate}}</span>
<span>{{currentFlavor?.drm.id}}</span>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.start' | translate}}</span>
<span>{{currentFlavor?.drm.startTime | kDate}}</span>
</div>
<div class="kRow">
<span class="kLabel">{{'applications.content.entryDetails.flavours.drm.end' | translate}}</span>
<span>{{currentFlavor?.drm.endTime | kDate}}</span>
</div>
<span>{{'applications.content.entryDetails.flavours.drm.mbr' | translate}}</span>
<div class="kSources">
<span class="kRow" *ngFor="let source of currentFlavor?.drm.flavorSources">{{source}}</span>
</div>
</div>

</div>
36 changes: 23 additions & 13 deletions ...lications/content-entries-app/entry/entry-flavours/drm-details/drm-details.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,28 @@
@import 'app-theme/_variables.scss';

.kDRMDetails{
display: flex;
flex-direction: column;
padding-top: 30px;
.kHeader{
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
}
.kTitle{
font-weight: 700;
margin-bottom: 30px;
}
.kHeader {
height: 78px;
width: 100%;
text-align: center;
padding-top: 24px;
box-sizing: border-box;
border-bottom: 1px solid $kGrayscale4;
.kTitle {
color: #333333;
font-size: 24px;
font-weight: 700;
}
}
.kContainer{
margin: 12px;
height: 70px;
}
.kName{
font-weight: 700;
margin-bottom: 30px;
display: block;
}
.kRow{
display: flex;
margin-bottom: 12px;
Expand All @@ -26,7 +36,7 @@
background-color: $kGrayscale6;
border: 1px solid white;
border-radius: 3px;
width: 100%;
box-sizing: border-box;
height: 150px;
margin-top: 6px;
margin-bottom: 12px;
Expand Down
2 changes: 1 addition & 1 deletion src/applications/content-entries-app/entry/entry-flavours/entry-flavours.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
<kDRMDetails [currentFlavor]="_selectedFlavor"></kDRMDetails>
</kPopupWidget>

<kPopupWidget #previewPopup [popupWidth]="500" [popupHeight]="640" [modal]="true">
<kPopupWidget #previewPopup [popupWidth]="500" [popupHeight]="644" [modal]="true">
<kFlavorPreview [currentFlavor]="_selectedFlavor" [parentPopupWidget]="previewPopup" [currentEntry]="_handler.data"></kFlavorPreview>
</kPopupWidget>

Expand Down
12 changes: 8 additions & 4 deletions ...tions/content-entries-app/entry/entry-flavours/flavor-import/flavor-import.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<div class="kFlavorImport">
<span class="kHeader">{{'applications.content.entryDetails.flavours.update' | translate}} - {{currentFlavor?.name}}</span>
<span>{{'applications.content.entryDetails.flavours.fileUrl' | translate}}</span>
<input class="kFlavorUrl" placeholder="{{'applications.content.entryDetails.flavours.urlPlaceholder' | translate}}" type="text" [(ngModel)]="_flavorURL" (blur)="_validate()" (keyup)="_onChange()" pInputText/>
<span class="kInvalid">{{_validationErrorMsg}}</span>
<div class="kHeader">
<span class="kTitle">{{'applications.content.entryDetails.flavours.update' | translate}} - {{currentFlavor?.name}}</span>
</div>
<div class="kContainer">
<span>{{'applications.content.entryDetails.flavours.fileUrl' | translate}}</span>
<input class="kFlavorUrl" placeholder="{{'applications.content.entryDetails.flavours.urlPlaceholder' | translate}}" type="text" [(ngModel)]="_flavorURL" (blur)="_validate()" (keyup)="_onChange()" pInputText/>
<span class="kInvalid">{{_validationErrorMsg}}</span>
</div>
<div class="kFooter">
<button type="button" class="kButtonBranded" [disabled]="_flavorURL === '' || _validationErrorMsg.length" (click)="_saveAndClose()" pButton label="{{'applications.content.entryDetails.flavours.actions.import' | translate}}"></button>
</div>
Expand Down
42 changes: 24 additions & 18 deletions ...tions/content-entries-app/entry/entry-flavours/flavor-import/flavor-import.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,32 @@
@import 'app-theme/_variables.scss';

.kFlavorImport{
display: flex;
flex-direction: column;
padding-top: 30px;
.kHeader {
font-size: 16px;
font-weight: 700;
margin-bottom: 30px;
height: 78px;
width: 100%;
text-align: center;
padding-top: 32px;
box-sizing: border-box;
border-bottom: 1px solid $kGrayscale4;
.kTitle {
color: #333333;
font-size: 16px;
font-weight: 700;
}
}
.kContainer{
margin: 12px;
height: 70px;
}
.kFooter{
text-align: center;
height: 66px;
border-top: 1px solid $kGrayscale4;
button{
margin-top: 16px;
height: 34px;
}
}
.kFlavorUrl{
margin-top: 6px;
width: 100%;
Expand All @@ -18,17 +36,5 @@
font-size: 12px;
font-weight: 700;
}
.kFooter{
text-align: center;
height: 46px;
border-top: 1px solid $kGrayscale4;
position: absolute;
bottom: 0;
right: 28px;
left: 12px;
button{
margin-top: 8px;
}
}
}

Loading

0 comments on commit ba85b50

Please sign in to comment.