Monthly Archives: July 2017

Turn an Ext JS 6 Segmented Button into an Activity Timeline with CSS

My Ext JS 6/Java project for the National Institutes of Standards (NIST) requires an “activity path” indicator. No such widget exists directly in Ext, so I created a CSS override to the ExtJS segmented button in order to give me what I needed. Ultimately I’ll make this more robust by converting it over to Sass and using Ext JS Sass variables, but the raw overrides are presented here for your consideration.

Ext JS button definition:

 {
   xtype: 'segmentedbutton',
   cls: 'timeline',
   height: 40,
   items: [
     {
       text: 'Step 1'
     },
     {
       text: 'Step 2'
     },
     {
       text: 'Step 3'
     }
   ]
}

CSS overrides:

<style>

    /* white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:before {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 2px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #fff;
	    z-index: 0;
	}

	.timeline .x-btn-default-small {
		border: 0px !important;
	}

	/* overlay right-facing triangle of standard button color, leaving
	edges of white right-facing triangle */
    .timeline .x-segmented-button-item-horizontal:after {
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    left: 0px;
	    top: 0px;
	    border-style: solid;
	    border-width: 19px 0 19px 19px;
	    border-color: transparent transparent transparent #5fa2dd;
	    z-index: 10;
	}

	/* white arrow overlay to left of first button */
	.timeline .x-segmented-button-item-horizontal:first-child:after {
		 border-color: transparent transparent transparent white;
	}

	.timeline .x-segmented-button-item-horizontal:first-child:after, .timeline .x-segmented-button-item-horizontal.x-btn-pressed:first-child:after {
		 border-color: transparent transparent transparent white !important;
	}

	.timelinebutton.x-btn-pressed:after {
	    border-left-color: #477aa6;
	}

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #477aa6;
 	}

 	.timeline .x-segmented-button-item-horizontal.x-btn-pressed:after {
 		border-color: transparent transparent transparent #5fa2dd;
 	}

 	/* eliminate right edge border that Ext JS puts into place. */
 	.timeline .x-btn-focus.x-btn-pressed {
 		box-shadow: none !important;
 	}

 	/* set hover of triangle to standard hover color of button */
 	.timeline .x-btn-over + .x-segmented-button-item-horizontal:after {
 		border-color: transparent transparent transparent #5795cb;
 	}
</style>