<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:vcs='urn:import:org.rstudio.studio.client.workbench.views.vcs.common'
             xmlns:rs='urn:import:org.rstudio.core.client.widget'>

   <ui:style>
      .changelistTableBackground {
         position: relative;
         background-color: white;
         width: 100%;
         height: 100%;
         border: 1px solid #888;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -ms-box-sizing: border-box;
      }
      .commitMessageLabel {
         margin-top: 12px;
         margin-bottom: 3px;
      }
      .commitMessage {
         width: 100%;
         height: 80px;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -ms-box-sizing: border-box;
         resize: none;
      }
   </ui:style>

   <g:DockLayoutPanel>
      <g:north size="22"><!-- 19 is the height of SmallButton -->
         <g:HorizontalPanel ui:field="topHPanel_" width="100%">
            <g:Label ui:field="selectLabel_" text="Select items to commit:"/>
            <rs:SmallButton ui:field="btnClearSelection_"
                            text="Clear Selection"/>
         </g:HorizontalPanel>
      </g:north>
      <g:center>
         <vcs:ChangelistTable ui:field="changelist_" styleName="{style.changelistTableBackground}" />
      </g:center>
      <g:south size="125">
         <g:FlowPanel>
            <g:Label text="Commit message:" styleName="{style.commitMessageLabel}"/>
            <g:TextArea ui:field="message_" styleName="{style.commitMessage}"/>
         </g:FlowPanel>
      </g:south>
   </g:DockLayoutPanel>

</ui:UiBinder>