Commit c94733d2990aa5312f64a9baf897ad025de00075
1 parent
4f3cbd94
paper-card modify
Showing
7 changed files
with
46 additions
and
55 deletions
controllets/paper-card-controllet/paper-card-controllet.html
| @@ -17,41 +17,40 @@ | @@ -17,41 +17,40 @@ | ||
| 17 | #paper_card_container { | 17 | #paper_card_container { |
| 18 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 18 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 19 | font-size: 16px; | 19 | font-size: 16px; |
| 20 | - background-color: white; | ||
| 21 | - position: relative; | ||
| 22 | - float: left; | ||
| 23 | - margin: 40px; | 20 | + line-height: 16px; |
| 24 | } | 21 | } |
| 25 | 22 | ||
| 26 | #content { | 23 | #content { |
| 27 | - padding: 4px 4px 0px 4px; | ||
| 28 | - position:relative; | 24 | + width: 100%; |
| 25 | + height: calc(100% - 64px); | ||
| 26 | + overflow: hidden; | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + #content.text { | ||
| 30 | + background-color: #FFFFCC; | ||
| 31 | + padding: 4px; | ||
| 32 | + width: calc(100% - 8px); | ||
| 33 | + height: calc(100% - 72px); | ||
| 29 | } | 34 | } |
| 30 | 35 | ||
| 31 | - .legend { | 36 | + #paper_card_container .legend { |
| 32 | position: relative; | 37 | position: relative; |
| 33 | - top: -48px; | 38 | + bottom: 48px; |
| 34 | height: 32px; | 39 | height: 32px; |
| 35 | padding: 16px 0px 0px 8px; | 40 | padding: 16px 0px 0px 8px; |
| 36 | - /*z-index: 1000;*/ | ||
| 37 | - background: rgba(0,0,0,0.8); | 41 | + background-color: rgba(0, 0, 0, 0.8); |
| 38 | color: white; | 42 | color: white; |
| 39 | font-weight: 700; | 43 | font-weight: 700; |
| 40 | word-wrap: break-word; | 44 | word-wrap: break-word; |
| 41 | } | 45 | } |
| 42 | 46 | ||
| 43 | - .footer { | ||
| 44 | - height: 16px; | ||
| 45 | - } | ||
| 46 | - | ||
| 47 | - .comment { | 47 | + #paper_card_container .footer { |
| 48 | + height: 64px; | ||
| 49 | + width: 100%; | ||
| 48 | position: relative; | 50 | position: relative; |
| 49 | - top: -50px; | ||
| 50 | - height: 50px; | ||
| 51 | - background-color: white; | ||
| 52 | - padding: 8px; | ||
| 53 | - font-size: small; | ||
| 54 | - color: #727272; | 51 | + bottom: 48px; |
| 52 | + padding: 4px; | ||
| 53 | + font-size: 12px; | ||
| 55 | word-wrap: break-word; | 54 | word-wrap: break-word; |
| 56 | overflow: hidden; | 55 | overflow: hidden; |
| 57 | } | 56 | } |
| @@ -63,7 +62,6 @@ | @@ -63,7 +62,6 @@ | ||
| 63 | } | 62 | } |
| 64 | 63 | ||
| 65 | paper-fab.open { | 64 | paper-fab.open { |
| 66 | - /*bottom: 28px;*/ | ||
| 67 | bottom: -20px; | 65 | bottom: -20px; |
| 68 | right: 8px; | 66 | right: 8px; |
| 69 | } | 67 | } |
| @@ -114,7 +112,7 @@ | @@ -114,7 +112,7 @@ | ||
| 114 | </style> | 112 | </style> |
| 115 | 113 | ||
| 116 | 114 | ||
| 117 | - <paper-material id="paper_card_container" elevation="{{elevation}}"> | 115 | + <paper-material id="paper_card_container" elevation="3"> |
| 118 | 116 | ||
| 119 | <paper-fab id="card_modify" class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab> | 117 | <paper-fab id="card_modify" class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab> |
| 120 | 118 | ||
| @@ -149,7 +147,7 @@ | @@ -149,7 +147,7 @@ | ||
| 149 | </div> | 147 | </div> |
| 150 | 148 | ||
| 151 | <div class="footer"> | 149 | <div class="footer"> |
| 152 | - <div class="comment">{{comment}}</div> | 150 | + {{comment}} |
| 153 | </div> | 151 | </div> |
| 154 | 152 | ||
| 155 | <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> | 153 | <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation"> |
| @@ -170,22 +168,17 @@ | @@ -170,22 +168,17 @@ | ||
| 170 | 168 | ||
| 171 | width: { | 169 | width: { |
| 172 | type: Number, | 170 | type: Number, |
| 173 | - observer: "_changeWidth" | 171 | + value: 200 |
| 174 | }, | 172 | }, |
| 175 | 173 | ||
| 176 | height: { | 174 | height: { |
| 177 | type: Number, | 175 | type: Number, |
| 178 | - observer: "_changeHeight" | ||
| 179 | - }, | ||
| 180 | - | ||
| 181 | - elevation:{ | ||
| 182 | - type: Number, | ||
| 183 | - value: 3 | 176 | + value: 200 |
| 184 | }, | 177 | }, |
| 185 | 178 | ||
| 186 | cardType:{ | 179 | cardType:{ |
| 187 | type: String, | 180 | type: String, |
| 188 | - value: "text" | 181 | + value: "" |
| 189 | }, | 182 | }, |
| 190 | 183 | ||
| 191 | cardTitle:{ | 184 | cardTitle:{ |
| @@ -200,10 +193,14 @@ | @@ -200,10 +193,14 @@ | ||
| 200 | 193 | ||
| 201 | }, | 194 | }, |
| 202 | 195 | ||
| 196 | + ready: function(){ | ||
| 197 | + this._resize(); | ||
| 198 | + }, | ||
| 199 | + | ||
| 203 | attached: function(){ | 200 | attached: function(){ |
| 204 | - if(this.cardType == "text"){ | ||
| 205 | - this.$.content.style.backgroundColor = "#FFFFCC"; | ||
| 206 | - } | 201 | + if(this.cardType == "text") |
| 202 | + this.$.content.className += this.$.content.className ? ' text' : 'text'; | ||
| 203 | + | ||
| 207 | $(this.$.fullscreen_container).perfectScrollbar(); | 204 | $(this.$.fullscreen_container).perfectScrollbar(); |
| 208 | 205 | ||
| 209 | this._translate(); | 206 | this._translate(); |
| @@ -225,17 +222,9 @@ | @@ -225,17 +222,9 @@ | ||
| 225 | this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); | 222 | this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]); |
| 226 | }, | 223 | }, |
| 227 | 224 | ||
| 228 | - _changeWidth: function(){ | ||
| 229 | - this.style.width = this.width + "px"; | ||
| 230 | - this.$.content.style.width = this.width - 8 + "px"; | ||
| 231 | - this.$.paper_card_container.style.width = this.width + "px"; | ||
| 232 | - }, | ||
| 233 | - | ||
| 234 | - _changeHeight: function(){ | ||
| 235 | - this.style.height = this.height + 64 + "px"; | ||
| 236 | - this.$.content.style.height = this.height - 4 + "px"; | ||
| 237 | - this.$.paper_card_container.style.height = this.height + "px"; | ||
| 238 | - $(this.$.content).perfectScrollbar(); | 225 | + _resize: function(){ |
| 226 | + $(this.$.paper_card_container).height(this.height); | ||
| 227 | + $(this.$.paper_card_container).width(this.width); | ||
| 239 | }, | 228 | }, |
| 240 | 229 | ||
| 241 | checkType: function(type, check){ | 230 | checkType: function(type, check){ |
datalets/barchart-datalet/barchart-datalet.html
| @@ -73,13 +73,13 @@ Example: | @@ -73,13 +73,13 @@ Example: | ||
| 73 | xAxis: { | 73 | xAxis: { |
| 74 | categories: this.properties.categories.value, | 74 | categories: this.properties.categories.value, |
| 75 | title: { | 75 | title: { |
| 76 | - text: this._component.yAxisLabel | 76 | + text: this._component.xAxisLabel |
| 77 | } | 77 | } |
| 78 | }, | 78 | }, |
| 79 | yAxis: { | 79 | yAxis: { |
| 80 | min: 0, | 80 | min: 0, |
| 81 | title: { | 81 | title: { |
| 82 | - text: this._component.xAxisLabel, | 82 | + text: this._component.yAxisLabel, |
| 83 | } | 83 | } |
| 84 | }, | 84 | }, |
| 85 | tooltip: { | 85 | tooltip: { |
datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
| @@ -73,13 +73,13 @@ Example: | @@ -73,13 +73,13 @@ Example: | ||
| 73 | xAxis: { | 73 | xAxis: { |
| 74 | categories: this.properties.categories.value, | 74 | categories: this.properties.categories.value, |
| 75 | title: { | 75 | title: { |
| 76 | - text: this._component.yAxisLabel | 76 | + text: this._component.xAxisLabel |
| 77 | } | 77 | } |
| 78 | }, | 78 | }, |
| 79 | yAxis: { | 79 | yAxis: { |
| 80 | min: 0, | 80 | min: 0, |
| 81 | title: { | 81 | title: { |
| 82 | - text: this._component.xAxisLabel, | 82 | + text: this._component.yAxisLabel, |
| 83 | }, | 83 | }, |
| 84 | }, | 84 | }, |
| 85 | tooltip: { | 85 | tooltip: { |
datalets/base-datalet/base-datalet.html
| @@ -67,6 +67,7 @@ Example : | @@ -67,6 +67,7 @@ Example : | ||
| 67 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; | 67 | font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 68 | padding-top: 2px; | 68 | padding-top: 2px; |
| 69 | border-top: 2px solid #B6B6B6; | 69 | border-top: 2px solid #B6B6B6; |
| 70 | + margin-top: 8px; | ||
| 70 | } | 71 | } |
| 71 | #base_datalet_rtp { | 72 | #base_datalet_rtp { |
| 72 | display: flex; | 73 | display: flex; |
| @@ -75,7 +76,7 @@ Example : | @@ -75,7 +76,7 @@ Example : | ||
| 75 | #rtp { | 76 | #rtp { |
| 76 | padding-top: 8px; | 77 | padding-top: 8px; |
| 77 | padding-right: 8px; | 78 | padding-right: 8px; |
| 78 | - font-size: small; | 79 | + font-size: 12px; |
| 79 | } | 80 | } |
| 80 | #rtpalogo { | 81 | #rtpalogo { |
| 81 | height: 32px; | 82 | height: 32px; |
| @@ -191,6 +192,7 @@ Example : | @@ -191,6 +192,7 @@ Example : | ||
| 191 | 192 | ||
| 192 | hideFooter: function() { | 193 | hideFooter: function() { |
| 193 | this.$.base_datalet_container.innerHTML = ""; | 194 | this.$.base_datalet_container.innerHTML = ""; |
| 195 | + this.$.base_datalet_container.style.margin = 0; | ||
| 194 | this.$.base_datalet_container.style.border = 0; | 196 | this.$.base_datalet_container.style.border = 0; |
| 195 | } | 197 | } |
| 196 | }); | 198 | }); |
datalets/datatable-datalet/js/DataTables/datatables.css
| @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child { | @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child { | ||
| 1722 | font-weight: normal; | 1722 | font-weight: normal; |
| 1723 | } | 1723 | } |
| 1724 | .dataTables_wrapper .ui-toolbar { | 1724 | .dataTables_wrapper .ui-toolbar { |
| 1725 | - padding: 16px; | 1725 | + padding: 8px;/*16*/ |
| 1726 | } | 1726 | } |
| 1727 | .dataTables_wrapper.no-footer .dataTables_scrollBody { | 1727 | .dataTables_wrapper.no-footer .dataTables_scrollBody { |
| 1728 | border-bottom: none; | 1728 | border-bottom: none; |
datalets/dynamic-datatable-datalet/js/DataTables/datatables.css
| @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child { | @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child { | ||
| 1722 | font-weight: normal; | 1722 | font-weight: normal; |
| 1723 | } | 1723 | } |
| 1724 | .dataTables_wrapper .ui-toolbar { | 1724 | .dataTables_wrapper .ui-toolbar { |
| 1725 | - padding: 16px; | 1725 | + padding: 8px;/*16*/ |
| 1726 | } | 1726 | } |
| 1727 | .dataTables_wrapper.no-footer .dataTables_scrollBody { | 1727 | .dataTables_wrapper.no-footer .dataTables_scrollBody { |
| 1728 | border-bottom: none; | 1728 | border-bottom: none; |
datalets/scatterchart-datalet/scatterchart-datalet.html
| @@ -96,12 +96,12 @@ Example: | @@ -96,12 +96,12 @@ Example: | ||
| 96 | }, | 96 | }, |
| 97 | xAxis: { | 97 | xAxis: { |
| 98 | title: { | 98 | title: { |
| 99 | - text: this._component.yAxisLabel | 99 | + text: this._component.xAxisLabel |
| 100 | } | 100 | } |
| 101 | }, | 101 | }, |
| 102 | yAxis: { | 102 | yAxis: { |
| 103 | title: { | 103 | title: { |
| 104 | - text: this._component.xAxisLabel, | 104 | + text: this._component.yAxisLabel, |
| 105 | } | 105 | } |
| 106 | }, | 106 | }, |
| 107 | credits: { | 107 | credits: { |