*/
.xv-popup {
background: #505050;
- margin: 0;
- max-height: 400px;
- width: 400px;
min-width: 320px;
- padding: 7px;
+ padding: 10px;
text-align: center;
}
+.xv-popup .message {
+ margin-bottom: 10px;
+ max-height: 500px;
+ max-width: 500px;
+}
.xv-popup.xv-groupbox-popup {
width: 320px;
margin: 0 4px 0 2px;
border: none;
}
/**
- Styles relating to Lists
-*/
-.xv-list-header {
- background-color: #d8d8d8;
- color: #fdfdfd;
- font-size: .6em;
- font-weight: bold;
- text-transform: uppercase;
- padding-top: 4px;
- padding-bottom: 4px;
- border-bottom: 1px solid #aaaaaa;
+ * Default ListItem styles when using a ModelDecorator.
+ */
+.xv-list .xv-model-decorator > .xv-list-item .xv-table {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
}
-.xv-list-header .xv-list-column.last {
- border-right: none;
+.xv-list .xv-model-decorator > .xv-list-item .xv-table .xv-cell {
+ display: table-cell;
}
-.xv-list-header .xv-list-column.name-column,
-.xv-list-header .xv-list-column.first,
-.xv-list-header .xv-list-column.second,
-.xv-list-header .xv-list-column.third,
-.xv-list-header .xv-list-column.short,
-.xv-list-header .xv-list-column.small,
-.xv-list-header .xv-list-column.medium,
-.xv-list-header .xv-list-column.descr {
- padding-left: 7px;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr {
+ /**
+ * Default styling for a model's id (as designated by 'idAttribute')
+ */
}
-/* List */
-.xv-list-column.line-number {
- width: 30px;
- text-align: right;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
+ color: #357ec7;
+ font-weight: bold;
+ cursor: pointer;
}
-.xv-list-column.name-column {
- width: 200px;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-name {
+ font-weight: bold;
}
-.xv-list-column.right-column {
- width: 100px;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-number {
text-align: right;
}
-.xv-list-column.short {
- width: 100px;
-}
-.xv-list-column.small {
- width: 125px;
-}
-.xv-list-column.medium {
- width: 150px;
-}
-.xv-list-column.first {
- width: 300px;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-money {
+ text-align: right;
}
-.xv-list-column.second {
- width: 200px;
+.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-date {
+ text-align: right;
}
-.xv-list-column.third {
- width: 100px;
+.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr {
+ color: white;
}
-.xv-list-column.money,
-.xv-list-column.quantity {
- width: 75px;
- text-align: right;
+.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr.xm-attribute-id {
+ color: #ff6529;
}
-.xv-list-column.descr {
- width: 200px;
+/**
+ Styles related to pickers, combo boxes, and relation widgets
+*/
+.onyx-picker-decorator .onyx-button {
+ padding: 12px 8px 12px 8px;
+ width: 150px;
}
-.xv-list-column.icon {
- width: 10px;
+.onyx-picker .onyx-menu-item {
+ text-align: left;
+ text-overflow: ellipsis;
}
-.xv-list {
- background: #f8f8f8;
+.picker-icon {
+ position: absolute;
+ right: 0;
+ margin: 0 10px 0 2px;
+ color: #070707;
}
-.xv-list .xv-list-item > * {
- display: inline-block;
- vertical-align: middle;
+.xv-picker-button {
+ text-align: left;
}
-.xv-list .xv-list-item {
- background-color: #fdfdfd;
- border-bottom: 1px solid #d7d7d7;
- min-height: 32px;
+.xv-picker-button .picker-content {
+ max-width: 100px;
+ overflow: hidden;
}
-.xv-list .xv-list-item.header {
- padding-top: 0;
+.xv-picker-button.disabled {
+ color: #777777;
}
-.xv-list .xv-list-item.inactive {
- background-color: #d8d8d8;
+.xv-picker-label {
color: #070707;
+ padding: 20px 8px 8px 8px;
+ text-align: right;
+ width: 130px;
}
-.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr {
- background: transparent;
-}
-.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr.placeholder {
- color: #d8d8d8;
+.xv-picker-label.disabled {
+ color: #777777;
}
-.xv-list .xv-list-item .xv-list-column .list-icon {
- padding: 2px;
- color: #666666;
- vertical-align: sub;
- border: 1px solid #efefef;
- -webkit-border-radius: 2px;
- -moz-border-radius: 2px;
- border-radius: 2px;
+.xv-combobox-note {
+ padding: 14px 3px 8px 3px;
+ text-align: left;
}
-.xv-list .xv-list-item.item-selected {
- background: #226b9a;
- background-color: #1f608c;
- background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
- background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
- background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
- background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
+/*
+ Styles relating to the grid box
+*/
+/* Entire box including the grid and the summary panel */
+.xv-grid-box {
+ /**
+ This is the most general grid row that
+ is not specific to read-only or selected
+ */
}
-.xv-list .xv-list-item.item-selected .xv-list-attr {
- color: #fdfdfd;
+.xv-grid-box.small-panel {
+ width: 600px;
}
-.xv-list .xv-list-item.item-selected .xv-list-attr.placeholder {
- font-style: italic;
- color: #99ccff;
+.xv-grid-box.medium-panel {
+ width: 700px;
}
-.xv-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
- color: #ff6529;
+.xv-grid-box.large-panel {
+ width: 800px;
}
-.xv-list .xv-list-item.item-selected .xv-list-attr.header {
- background: #99ccff;
+.xv-grid-box .enyo-list-page > *:first-child .xv-grid-row {
+ border-top: 0;
}
-.xv-list .xv-list-item .xv-list-item-gear {
- position: absolute;
- right: 0px;
- z-index: 999;
+.xv-grid-box .xv-above-grid-list {
+ border: 0;
}
-.xv-list.xv-grid-list {
+.xv-grid-box .xv-scroller {
background: #f8f8f8;
}
-.xv-list.xv-grid-list .xv-list-item > * {
- vertical-align: top;
+.xv-limit-description .xv-grid-box .xv-grid-attr.bold {
+ font-weight: bold;
}
-.xv-list.xv-grid-list .xv-list-item {
- padding-top: 7px !important;
- padding-bottom: 9px !important;
- border-bottom: 1px solid #aaaaaa !important;
- background: #f8f8f8;
+.xv-grid-box .xv-grid-attr.error {
+ color: #ff0000;
}
-.xv-list.xv-grid-list .xv-list-item.item-selected {
- background: #226b9a;
- background-color: #1f608c;
- background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
- background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
- background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
- background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
- background-repeat: repeat-x;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
+.xv-grid-box .xv-grid-attr.emphasis {
+ color: #009000;
}
-.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr {
- color: #fdfdfd;
+.xv-grid-box .xv-grid-attr.warn {
+ color: #ff9c00;
}
-.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.placeholder {
+.xv-grid-box .xv-grid-attr.italic {
font-style: italic;
- color: #99ccff;
}
-.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
- color: #ff6529;
+.xv-grid-box .xv-grid-attr.placeholder {
+ font-style: italic;
+ color: #93a1a1;
}
-.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.header {
- background: #99ccff;
+.xv-grid-box .xv-grid-attr.hyperlink {
+ color: blue;
}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column {
- vertical-align: top;
+.xv-grid-box .xv-gridbox-button {
+ color: #357ec7;
+ font-size: 18px;
+ border: none;
+ background: transparent;
}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
+.xv-grid-box .xv-grid-row {
font-size: 12px;
+ background-color: #d8d8d8;
+ border-bottom: 1px solid #aaaaaa;
+ vertical-align: top;
+ /**
+ This is the grid header row
+ */
}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.last {
- border-right: none;
+.xv-grid-box .xv-grid-row > * {
+ display: inline-block;
}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.name-column {
- padding-left: 7px;
+.xv-grid-box .xv-grid-row .xv-grid-header {
+ background-color: #d7d7d7;
+ color: #0e0e0e;
+ font-size: .8em;
+ font-weight: bold;
+ text-transform: uppercase;
+ padding-top: 4px;
}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.first {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.second {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.third {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.short {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.small {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.medium {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column.descr {
- padding-left: 7px;
-}
-.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
- padding: 0px;
-}
-.xv-list-attr {
- padding: 5px;
- font-size: .8em;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: #070707;
-}
-.xv-list-attr.header {
- padding: 4px;
- background: #d8d8d8;
- font-size: .7em;
- font-weight: bold;
- text-transform: uppercase;
- color: #fdfdfd;
-}
-.xv-list-attr.footer {
- padding: 4px;
- background: #d8d8d8;
- font-size: .7em;
- font-weight: bold;
- text-transform: uppercase;
- color: #070707;
-}
-.xv-list-attr.right {
- position: absolute;
- right: 10px;
-}
-.xv-list-attr.text-align-right {
- text-align: right;
-}
-.xv-list-attr.bold {
- font-weight: bold;
-}
-.xv-list-attr.error {
- color: #ff0000;
-}
-.xv-list-attr.emphasis {
- color: #009000;
-}
-.xv-list-attr.warn {
- color: #ff9c00;
-}
-.xv-list-attr.italic {
- font-style: italic;
-}
-.xv-list-attr.placeholder {
- font-style: italic;
- color: #777777;
-}
-.xv-list-attr.hyperlink {
- color: #357ec7;
- cursor: pointer;
-}
-.xv-list-attr.disabled {
- color: #777777;
-}
-/* Navigator */
-.xv-navigator-header {
- font-size: small;
- font-weight: bold;
- text-transform: uppercase;
- color: #ff6600;
- padding-left: 20px;
- border-bottom: 1px solid #0e0e0e;
-}
-.xv-workspace-header {
- color: #fdfdfd;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- padding: 8px 0 0 8px;
-}
-/**
- * Default ListItem styles when using a ModelDecorator.
- */
-.xv-list .xv-model-decorator > .xv-list-item .xv-table {
- display: table;
- width: 100%;
- table-layout: fixed;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-table .xv-cell {
- display: table-cell;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr {
- /**
- * Default styling for a model's id (as designated by 'idAttribute')
- */
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-id {
- color: #357ec7;
- font-weight: bold;
- cursor: pointer;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attribute-name {
- font-weight: bold;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-number {
- text-align: right;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-money {
- text-align: right;
-}
-.xv-list .xv-model-decorator > .xv-list-item .xv-list-column.xv-list-attr.xm-attributetype-date {
- text-align: right;
-}
-.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr {
- color: white;
-}
-.xv-list .xv-model-decorator > .xv-list-item.item-selected .xv-list-attr.xm-attribute-id {
- color: #ff6529;
-}
-/**
- Styles related to pickers, combo boxes, and relation widgets
-*/
-.onyx-picker-decorator .onyx-button {
- padding: 12px 8px 12px 8px;
- width: 150px;
-}
-.onyx-picker .onyx-menu-item {
- text-align: left;
- text-overflow: ellipsis;
-}
-.picker-icon {
- position: absolute;
- right: 0;
- margin: 0 10px 0 2px;
- color: #070707;
-}
-.xv-picker-button {
- text-align: left;
-}
-.xv-picker-button .picker-content {
- max-width: 100px;
- overflow: hidden;
-}
-.xv-picker-button.disabled {
- color: #777777;
-}
-.xv-picker-label {
- color: #070707;
- padding: 20px 8px 8px 8px;
- text-align: right;
- width: 130px;
-}
-.xv-picker-label.disabled {
- color: #777777;
-}
-.xv-combobox-note {
- padding: 14px 3px 8px 3px;
- text-align: left;
-}
-/*
- Styles relating to the grid box
-*/
-/* Entire box including the grid and the summary panel */
-.xv-grid-box {
- /**
- This is the most general grid row that
- is not specific to read-only or selected
- */
-}
-.xv-grid-box.small-panel {
- width: 600px;
-}
-.xv-grid-box.medium-panel {
- width: 700px;
-}
-.xv-grid-box.large-panel {
- width: 800px;
-}
-.xv-grid-box .enyo-list-page > *:first-child .xv-grid-row {
- border-top: 0;
-}
-.xv-grid-box .xv-above-grid-list {
- border: 0;
-}
-.xv-grid-box .xv-scroller {
- background: #f8f8f8;
-}
-.xv-limit-description .xv-grid-box .xv-grid-attr.bold {
- font-weight: bold;
-}
-.xv-grid-box .xv-grid-attr.error {
- color: #ff0000;
-}
-.xv-grid-box .xv-grid-attr.emphasis {
- color: #009000;
-}
-.xv-grid-box .xv-grid-attr.warn {
- color: #ff9c00;
-}
-.xv-grid-box .xv-grid-attr.italic {
- font-style: italic;
-}
-.xv-grid-box .xv-grid-attr.placeholder {
- font-style: italic;
- color: #93a1a1;
-}
-.xv-grid-box .xv-grid-attr.hyperlink {
- color: blue;
-}
-.xv-grid-box .xv-gridbox-button {
- color: #357ec7;
- font-size: 18px;
- border: none;
- background: transparent;
-}
-.xv-grid-box .xv-grid-row {
- font-size: 12px;
- background-color: #d8d8d8;
- border-bottom: 1px solid #aaaaaa;
- vertical-align: top;
- /**
- This is the grid header row
- */
-}
-.xv-grid-box .xv-grid-row > * {
- display: inline-block;
-}
-.xv-grid-box .xv-grid-row .xv-grid-header {
- background-color: #d7d7d7;
- color: #0e0e0e;
- font-size: .8em;
- font-weight: bold;
- text-transform: uppercase;
- padding-top: 4px;
-}
-.xv-grid-box .xv-grid-row .xv-grid-header.last {
- border-right: none;
+.xv-grid-box .xv-grid-row .xv-grid-header.last {
+ border-right: none;
}
.xv-grid-box .xv-grid-row > * {
padding: 6px 4px;
text-align: center;
font-size: 24px;
}
+/**
+ Styles relating to Lists
+*/
+.xv-list-header {
+ background-color: #d8d8d8;
+ color: #fdfdfd;
+ font-size: .6em;
+ font-weight: bold;
+ text-transform: uppercase;
+ padding-top: 4px;
+ padding-bottom: 4px;
+ border-bottom: 1px solid #aaaaaa;
+}
+.xv-list-header .xv-list-column.last {
+ border-right: none;
+}
+.xv-list-header .xv-list-column.name-column,
+.xv-list-header .xv-list-column.first,
+.xv-list-header .xv-list-column.second,
+.xv-list-header .xv-list-column.third,
+.xv-list-header .xv-list-column.short,
+.xv-list-header .xv-list-column.small,
+.xv-list-header .xv-list-column.medium,
+.xv-list-header .xv-list-column.descr {
+ padding-left: 7px;
+}
+/* List */
+.xv-list-column.line-number {
+ width: 30px;
+ text-align: right;
+}
+.xv-list-column.name-column {
+ width: 200px;
+}
+.xv-list-column.right-column {
+ width: 100px;
+ text-align: right;
+}
+.xv-list-column.short {
+ width: 100px;
+}
+.xv-list-column.small {
+ width: 125px;
+}
+.xv-list-column.medium {
+ width: 150px;
+}
+.xv-list-column.first {
+ width: 300px;
+}
+.xv-list-column.second {
+ width: 200px;
+}
+.xv-list-column.third {
+ width: 100px;
+}
+.xv-list-column.money,
+.xv-list-column.quantity {
+ width: 75px;
+ text-align: right;
+}
+.xv-list-column.descr {
+ width: 200px;
+}
+.xv-list-column.icon {
+ width: 10px;
+}
+.xv-list {
+ background: #f8f8f8;
+}
+.xv-list .xv-list-item > * {
+ display: inline-block;
+ vertical-align: middle;
+}
+.xv-list .xv-list-item {
+ background-color: #fdfdfd;
+ border-bottom: 1px solid #d7d7d7;
+ min-height: 32px;
+}
+.xv-list .xv-list-item.header {
+ padding-top: 0;
+}
+.xv-list .xv-list-item.inactive {
+ background-color: #d8d8d8;
+ color: #070707;
+}
+.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr {
+ background: transparent;
+}
+.xv-list .xv-list-item.inactive .xv-list-column .xv-list-attr.placeholder {
+ color: #d8d8d8;
+}
+.xv-list .xv-list-item .xv-list-column .list-icon {
+ padding: 2px;
+ color: #666666;
+ vertical-align: sub;
+ border: 1px solid #efefef;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+}
+.xv-list .xv-list-item.item-selected {
+ background: #226b9a;
+ background-color: #1f608c;
+ background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
+ background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
+}
+.xv-list .xv-list-item.item-selected .xv-list-attr {
+ color: #fdfdfd;
+}
+.xv-list .xv-list-item.item-selected .xv-list-attr.placeholder {
+ font-style: italic;
+ color: #99ccff;
+}
+.xv-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
+ color: #ff6529;
+}
+.xv-list .xv-list-item.item-selected .xv-list-attr.header {
+ background: #99ccff;
+}
+.xv-list .xv-list-item .xv-list-item-gear {
+ position: absolute;
+ right: 0px;
+ z-index: 999;
+}
+.xv-list.xv-grid-list {
+ background: #f8f8f8;
+}
+.xv-list.xv-grid-list .xv-list-item > * {
+ vertical-align: top;
+}
+.xv-list.xv-grid-list .xv-list-item {
+ padding-top: 7px !important;
+ padding-bottom: 9px !important;
+ border-bottom: 1px solid #aaaaaa !important;
+ background: #f8f8f8;
+}
+.xv-list.xv-grid-list .xv-list-item.item-selected {
+ background: #226b9a;
+ background-color: #1f608c;
+ background-image: -moz-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#226b9a), to(#1a4f77));
+ background-image: -webkit-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: -o-linear-gradient(top, #226b9a, #1a4f77);
+ background-image: linear-gradient(to bottom, #226b9a, #1a4f77);
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff226b9a', endColorstr='#ff1a4f77', GradientType=0);
+}
+.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr {
+ color: #fdfdfd;
+}
+.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.placeholder {
+ font-style: italic;
+ color: #99ccff;
+}
+.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.hyperlink {
+ color: #ff6529;
+}
+.xv-list.xv-grid-list .xv-list-item.item-selected .xv-list-attr.header {
+ background: #99ccff;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column {
+ vertical-align: top;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
+ font-size: 12px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.last {
+ border-right: none;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.name-column {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.first {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.second {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.third {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.short {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.small {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.medium {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column.descr {
+ padding-left: 7px;
+}
+.xv-list.xv-grid-list .xv-list-item .xv-list-column .xv-list-attr {
+ padding: 0px;
+}
+.xv-list-attr {
+ padding: 5px;
+ font-size: .8em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: #070707;
+}
+.xv-list-attr.header {
+ padding: 4px;
+ background: #d8d8d8;
+ font-size: .7em;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: #fdfdfd;
+}
+.xv-list-attr.footer {
+ padding: 4px;
+ background: #d8d8d8;
+ font-size: .7em;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: #070707;
+}
+.xv-list-attr.right {
+ position: absolute;
+ right: 10px;
+}
+.xv-list-attr.text-align-right {
+ text-align: right;
+}
+.xv-list-attr.bold {
+ font-weight: bold;
+}
+.xv-list-attr.error {
+ color: #ff0000;
+}
+.xv-list-attr.emphasis {
+ color: #009000;
+}
+.xv-list-attr.warn {
+ color: #ff9c00;
+}
+.xv-list-attr.italic {
+ font-style: italic;
+}
+.xv-list-attr.placeholder {
+ font-style: italic;
+ color: #777777;
+}
+.xv-list-attr.hyperlink {
+ color: #357ec7;
+ cursor: pointer;
+}
+.xv-list-attr.disabled {
+ color: #777777;
+}
+/* Navigator */
+.xv-navigator-header {
+ font-size: small;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: #ff6600;
+ padding-left: 20px;
+ border-bottom: 1px solid #0e0e0e;
+}
+.xv-workspace-header {
+ color: #fdfdfd;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding: 8px 0 0 8px;
+}
/**
Styles relating to widgets in the pullout
*/
{name: "startupProgressBar", kind: "onyx.ProgressBar",
classes: "xv-startup-progress onyx-progress-button", progress: 0}
]},
- {kind: "onyx.Popup", name: "notifyPopup", centered: true,
+ {kind: "onyx.Popup", name: "notifyPopup", classes: "xv-popup", centered: true,
onHide: "notifyHidden",
modal: true, floating: true, scrim: true, components: [
- {name: "notifyMessage"},
- {tag: "br"},
- {kind: "onyx.Button", content: "_ok".loc(), name: "notifyOk", ontap: "notifyTap",
- classes: "xv-popup-button", showing: false},
- {kind: "onyx.Button", content: "_yes".loc(), name: "notifyYes", ontap: "notifyTap",
- classes: "xv-popup-button", showing: false},
- {kind: "onyx.Button", content: "_no".loc(), name: "notifyNo", ontap: "notifyTap",
- classes: "xv-popup-button", showing: false},
- {kind: "onyx.Button", content: "_cancel".loc(), name: "notifyCancel", ontap: "notifyTap",
- classes: "xv-popup-button", showing: false}
+ {name: "notifyMessage", classes: "message"},
+ {classes: "xv-buttons", name: "notifyButtons", components: [
+ {kind: "onyx.Button", content: "_ok".loc(), name: "notifyOk", ontap: "notifyTap",
+ showing: false, classes: "text"},
+ {kind: "onyx.Button", content: "_yes".loc(), name: "notifyYes", ontap: "notifyTap",
+ showing: false, classes: "text"},
+ {kind: "onyx.Button", content: "_no".loc(), name: "notifyNo", ontap: "notifyTap",
+ showing: false, classes: "text"},
+ {kind: "onyx.Button", content: "_cancel".loc(), name: "notifyCancel", ontap: "notifyTap",
+ showing: false, classes: "text"}
+ ]}
]},
{kind: "onyx.Popup", name: "popupWorkspace", classes: "xv-popup xv-groupbox-popup", centered: true,
autoDismiss: false, modal: true, floating: true, scrim: true},
resizeHandler: function () {
this.inherited(arguments);
if (this.$.notifyPopup.showing) {
- this.$.notifyPopup.applyStyle("opacity", 1); // XXX not sure why this hack is necessary.
+ // This is a fix for an enyo bug that renders the popup as clear
+ this.$.notifyPopup.applyStyle("opacity", 1);
}
},
activate: function () {
return this.$.navigator;
},
getNotifyButtons: function () {
- return _.filter(this.$, function (control) {
- return control.name.substring(0, 6) === 'notify' && control.kind === 'onyx.Button';
- });
+ return this.$.notifyButtons.controls;
},
getStartupProgressBar: function () {
return this.$.startupProgressBar;
inEvent.type = inEvent.type || XM.Model.NOTICE;
// show the appropriate buttons
- _.each(this.$.notifyPopup.children, function (component) {
- if (component.kind !== "onyx.Button") {
- // not a button: do nothing.
- } else if (_.indexOf(typeToButtonMap[String(inEvent.type)], component.name) >= 0) {
- // in the show-me array, so show
- component.setShowing(true);
- } else {
- // not in the show-me array, so hide
- component.setShowing(false);
- }
+ _.each(this.getNotifyButtons(), function (component) {
+ component.setShowing(_.indexOf(typeToButtonMap[String(inEvent.type)], component.name) >= 0);
});
-
// allow custom button text
this.$.notifyYes.setContent(inEvent.yesLabel || "_yes".loc());
this.$.notifyNo.setContent(inEvent.noLabel || "_no".loc());
// it's the OK button unless it's a 2- or 3- way question, in which case it's YES
this._activeNotify = inEvent.type === XM.Model.QUESTION || inEvent.type === XM.Model.YES_NO_CANCEL ? 1 : 0;
_.each(this.getNotifyButtons(), function (button, index) {
- button.addRemoveClass("onyx-blue", index === that._activeNotify);
+ button.addRemoveClass("selected", index === that._activeNotify);
});
// delete out any previously added customComponents/customComponentControls
// Add the custom component
if (inEvent.component) {
inEvent.component.name = "customComponent";
- inEvent.component.addBefore = this.$.notifyOk;
+ // can add styling class here instead of inline css
+ inEvent.component.addBefore = this.$.notifyButtons;
this.$.notifyPopup.createComponent(inEvent.component);
- this.$.notifyPopup.$.customComponent.addStyles("color:black;");
if (inEvent.componentModel) {
this.$.notifyPopup.$.customComponent.setValue(inEvent.componentModel);
}
this._notifyDone = false;
this.$.notifyPopup.render();
this.$.notifyPopup.show();
- this.$.notifyPopup.applyStyle("opacity", 1); // XXX not sure why this hack is necessary.
+ // Without this fix, the popup renders transparent
+ this.$.notifyPopup.applyStyle("opacity", 1);
},
notifyHidden: function () {
if (!this._notifyDone) {
} else if (keyCode === 37 || (keyCode === 9 && isShift)) {
// left or shift-tab
- notifyButtons[activeIndex].removeClass("onyx-blue");
+ notifyButtons[activeIndex].removeClass("selected");
for (nextShowing = activeIndex - 1; nextShowing >= 0; nextShowing--) {
if (nextShowing === 0 && !notifyButtons[nextShowing].showing) {
// there are no showing buttons to the left
activeIndex = nextShowing;
}
this._activeNotify = activeIndex;
- notifyButtons[activeIndex].addClass("onyx-blue");
+ notifyButtons[activeIndex].addClass("selected");
} else if (keyCode === 39 || keyCode === 9) {
// right or tab
- notifyButtons[activeIndex].removeClass("onyx-blue");
+ notifyButtons[activeIndex].removeClass("selected");
for (nextShowing = activeIndex + 1; nextShowing < notifyButtons.length; nextShowing++) {
if (nextShowing + 1 === notifyButtons.length && !notifyButtons[nextShowing].showing) {
// there are no showing buttons to the right
}
this._activeNotify = activeIndex;
- notifyButtons[activeIndex].addClass("onyx-blue");
+ notifyButtons[activeIndex].addClass("selected");
}
},
/**
maxHeight: "400px",
horizontal: "hidden"
}, {owner: this});
- this.$.popupWorkspace.createComponent({name: "workspace", kind: inEvent.workspace, container: this.$.popupScroller});
+ this.$.popupWorkspace.createComponent({name: "workspace", kind: inEvent.workspace,
+ container: this.$.popupScroller});
+ // TODO: inline css - git rid of it!
this.$.popupWorkspace.$.workspace.addStyles("color:black;");
this.$.popupWorkspace.$.workspace.setValue(inEvent.model);
- this.$.popupWorkspace.createComponent({
+ // create button bar
+ this.$.popupWorkspace.createComponent({classes: "xv-buttons", name: "workspaceButtons"}, {owner: this});
+ this.$.workspaceButtons.createComponents([{
kind: "onyx.Button",
content: "_save".loc(),
name: "popupWorkspaceSave",
ontap: "popupWorkspaceTap",
- classes: "onyx-blue xv-popup-button"
- }, {owner: this});
- this.$.popupWorkspace.createComponent({
+ classes: "selected text"
+ },
+ {
kind: "onyx.Button",
content: "_cancel".loc(),
name: "popupWorkspaceCancel",
ontap: "popupWorkspaceTap",
- classes: "xv-popup-button"
- }, {owner: this});
-
+ classes: "text"
+ }], {owner: this});
this.$.popupWorkspace.render();
this.$.popupWorkspace.show();
- this.$.popupWorkspace.applyStyle("opacity", 1); // XXX not sure why this hack is necessary.
+ // Without this fix, the popup renders transparent
+ this.$.popupWorkspace.applyStyle("opacity", 1);
},
popupWorkspaceTap: function (inSender, inEvent) {
var model = this.$.popupWorkspace.$.workspace.value,