<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (C) 2013 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<ui:UiBinder
    xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:x='urn:import:com.google.gerrit.client.ui'
    xmlns:clippy='urn:import:com.google.gwtexpui.clippy.client'>
  <ui:with field='ico' type='com.google.gerrit.client.GerritResources'/>
  <ui:image field="toggle" src="moreLess.png"/>
  <ui:style type='com.google.gerrit.client.change.CommitBox.Style'>
    @eval trimColor com.google.gerrit.client.Gerrit.getTheme().trimColor;

    .collapsed .scroll { height: 250px }
    .scroll, .more { width: 560px }
    .scroll {
      border-right: 1px solid trimColor;
      border-bottom: 1px solid trimColor;
    }

    .text {
      font-family: monospace;
      white-space: pre;
    }

    .more {
      height: 8px;
      line-height: 8px;
      text-align: center;
    }
    .moreButton {
      padding: 0 5px 0 5px;
      margin: 0;
      border: none;
      height: 8px;
      background-color: #F7F7F7;
    }
    .moreButton:focus {
      outline: none;
    }

    @sprite .toggle {
      gwt-image: "toggle";
      width: 13px;
      height: 8px;
      padding: 0;
    }
    .collapsed .toggle { background-position: -13px -8px }
    .expanded .toggle { background-position: 0px -8px }
    .collapsed button:hover .toggle { background-position: -13px 0px }
    .expanded button:hover .toggle { background-position: 0px 0px }

    .header {
      border-spacing: 0;
      padding: 0;
      width: 560px;
    }
    .header th { width: 72px; }
    .header td { white-space: nowrap; }
    .date { width: 132px; }

    .clippy {
      position: relative;
    }
    .clippy div {
      position: absolute;
      top: 0px;
      right: -16px;
    }
    <!-- To make room for the copyableLabel from the adjacent column -->
    .webLinkPanel a:first-child {
      margin-left:16px;
    }
    .webLinkPanel>a {
      margin-left:2px;
    }

    .parentWebLink a:first-child {
      margin-left:16px;
    }
    .parentWebLink>a {
      margin-left:2px;
    }

    .commit {
      margin-right: 3px;
      float: left;
    }

    .userPanel img {
      margin: 0 2px 0 0;
      width: 16px;
      height: 16px !important;
      vertical-align: bottom;
    }

    .parent {
      margin-right: 3px;
      float: left;
    }
    .parentNotCurrent {
      color: #FFA62F;   <!-- orange -->
      font-weight: bold;
    }

  </ui:style>
  <g:HTMLPanel>
    <g:ScrollPanel styleName='{style.scroll}' ui:field='scroll'>
      <g:HTML styleName='{style.text}' ui:field='text'/>
    </g:ScrollPanel>
    <div class='{style.more}'>
      <g:Button ui:field='more'
          styleName='{style.moreButton}'
          title='Expand/Collapse'>
        <ui:attribute name='title'/>
        <div class='{style.toggle}'/>
      </g:Button>
    </div>
    <table class='{style.header}'>
      <tr>
        <th><ui:msg>Author</ui:msg></th>
        <td>
          <g:FlowPanel ui:field='authorPanel' styleName='{style.userPanel}'>
            <x:InlineHyperlink ui:field='authorNameEmail'
              title='Search for changes by this user'>
              <ui:attribute name='title'/>
            </x:InlineHyperlink>
          </g:FlowPanel>
        </td>
        <td ui:field='authorDate' class='{style.date}' colspan="2"/>
      </tr>
      <tr>
        <th><ui:msg>Committer</ui:msg></th>
        <td>
          <g:FlowPanel ui:field='committerPanel' styleName='{style.userPanel}'>
            <x:InlineHyperlink ui:field='committerNameEmail'
              title='Search for changes by this user'>
              <ui:attribute name='title'/>
            </x:InlineHyperlink>
          </g:FlowPanel>
        </td>
        <td ui:field='committerDate' class='{style.date}' colspan="2"/>
      </tr>
      <tr>
        <th>
          <div class='{style.commit}'>
            <ui:msg>Commit</ui:msg>
          </div>
          <g:Image
              ui:field='mergeCommit'
              resource='{ico.merge}'
              visible='false'
              title='Merge Commit'>
            <ui:attribute name='title'/>
          </g:Image>
        </th>
        <td><clippy:CopyableLabel styleName='{style.clippy}' ui:field='commitName'/></td>
        <td>
            <g:FlowPanel ui:field='webLinkPanel' styleName='{style.webLinkPanel}'/>
        </td>
      </tr>
      <tr ui:field='firstParent' style='display: none'>
        <th>
          <div class='{style.parent}'>
            <ui:msg>Parent(s)</ui:msg>
          </div>
          <div ui:field='parentNotCurrentText'
              title='Not current - rebase possible'
              class='{style.parentNotCurrent}'
              style='display: none' aria-hidden='true'/>
        </th>
        <td>
          <g:FlowPanel ui:field='parentCommits'/>
        </td>
        <td>
          <g:FlowPanel ui:field='parentWebLinks' styleName='{style.parentWebLink}'/>
        </td>
      </tr>
      <tr>
        <th><ui:msg>Change-Id</ui:msg></th>
        <td><clippy:CopyableLabel styleName='{style.clippy}' ui:field='idText'/></td>
      </tr>
    </table>
  </g:HTMLPanel>
</ui:UiBinder>