Fix panel header icon behavior for new custorder
had to work around a buefy bug..?
This commit is contained in:
		
							parent
							
								
									b8389c72bb
								
							
						
					
					
						commit
						2c7f2c0fcd
					
				
					 1 changed files with 48 additions and 30 deletions
				
			
		|  | @ -65,21 +65,30 @@ | |||
|       <b-collapse class="panel" :class="customerPanelType" | ||||
|                   :open.sync="customerPanelOpen"> | ||||
| 
 | ||||
|         <div slot="trigger" | ||||
|              slot-scope="props" | ||||
|              class="panel-heading" | ||||
|              role="button"> | ||||
|           <b-icon pack="fas" | ||||
|             ## TODO: this icon toggling should work, according to | ||||
|             ## Buefy docs, but i could not ever get it to work. | ||||
|             ## what am i missing? | ||||
|             ## https://buefy.org/documentation/collapse/ | ||||
|             ## :icon="props.open ? 'caret-down' : 'caret-right'"> | ||||
|             ## (for now we just always show caret-right instead) | ||||
|             icon="caret-right"> | ||||
|           </b-icon> | ||||
|           <strong v-html="customerPanelHeader"></strong> | ||||
|         </div> | ||||
|         <template #trigger="props"> | ||||
|           <div class="panel-heading" | ||||
|                role="button"> | ||||
| 
 | ||||
|             ## TODO: for some reason buefy will "reuse" the icon | ||||
|             ## element in such a way that its display does not | ||||
|             ## refresh.  so to work around that, we use different | ||||
|             ## structure for the two icons, so buefy is forced to | ||||
|             ## re-draw | ||||
| 
 | ||||
|             <b-icon v-if="props.open" | ||||
|                     pack="fas" | ||||
|                     icon="angle-down"> | ||||
|             </b-icon> | ||||
| 
 | ||||
|             <span v-if="!props.open"> | ||||
|               <b-icon pack="fas" | ||||
|                       icon="angle-right"> | ||||
|               </b-icon> | ||||
|             </span> | ||||
| 
 | ||||
|             <strong v-html="customerPanelHeader"></strong> | ||||
|           </div> | ||||
|         </template> | ||||
| 
 | ||||
|         <div class="panel-block"> | ||||
|           <div style="width: 100%;"> | ||||
|  | @ -460,21 +469,30 @@ | |||
|       <b-collapse class="panel" | ||||
|                   open> | ||||
| 
 | ||||
|         <div slot="trigger" | ||||
|              slot-scope="props" | ||||
|              class="panel-heading" | ||||
|              role="button"> | ||||
|           <b-icon pack="fas" | ||||
|             ## TODO: this icon toggling should work, according to | ||||
|             ## Buefy docs, but i could not ever get it to work. | ||||
|             ## what am i missing? | ||||
|             ## https://buefy.org/documentation/collapse/ | ||||
|             ## :icon="props.open ? 'caret-down' : 'caret-right'"> | ||||
|             ## (for now we just always show caret-right instead) | ||||
|             icon="caret-right"> | ||||
|           </b-icon> | ||||
|           <strong v-html="itemsPanelHeader"></strong> | ||||
|         </div> | ||||
|         <template #trigger="props"> | ||||
|           <div class="panel-heading" | ||||
|                role="button"> | ||||
| 
 | ||||
|             ## TODO: for some reason buefy will "reuse" the icon | ||||
|             ## element in such a way that its display does not | ||||
|             ## refresh.  so to work around that, we use different | ||||
|             ## structure for the two icons, so buefy is forced to | ||||
|             ## re-draw | ||||
| 
 | ||||
|             <b-icon v-if="props.open" | ||||
|                     pack="fas" | ||||
|                     icon="angle-down"> | ||||
|             </b-icon> | ||||
| 
 | ||||
|             <span v-if="!props.open"> | ||||
|               <b-icon pack="fas" | ||||
|                       icon="angle-right"> | ||||
|               </b-icon> | ||||
|             </span> | ||||
| 
 | ||||
|             <strong v-html="itemsPanelHeader"></strong> | ||||
|           </div> | ||||
|         </template> | ||||
| 
 | ||||
|         <div class="panel-block"> | ||||
|           <div> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Lance Edgar
						Lance Edgar