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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s