| <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor |
| license agreements. See the NOTICE file distributed with this work for additional |
| information regarding copyright ownership. The ASF licenses this file to |
| you 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'> |
| <ui:image field="buttons" src="res/buttons.png" /> |
| |
| <ui:style type="org.apache.hupa.client.ui.ComposeView.Style"> |
| .box { |
| border: 1px solid #A3A3A3; |
| border-radius: 4px; |
| overflow: hidden; |
| box-shadow: 0 0 2px #999; |
| -o-box-shadow: 0 0 2px #999; |
| -webkit-box-shadow: 0 0 2px #999; |
| -moz-box-shadow: 0 0 2px #999; |
| background: white; |
| } |
| |
| .header { |
| border-radius: 4px 4px 0 0; |
| -webkit-box-shadow: 0 2px 3px 0 #999; |
| -moz-box-shadow: 0 2px 3px 0 #999; |
| box-shadow: 0 2px 3px 0 #999; |
| border-bottom: 0; |
| position: relative; |
| padding: 3px 0; |
| background: #f9f9f9; |
| background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), |
| color-stop(100%, #f0f0f0) ); |
| background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%); |
| background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%); |
| background: linear-gradient(top, #fff 0%, #f0f0f0 100%); |
| border-bottom: 1px solid #dfdfdf; |
| } |
| |
| .header td { |
| padding: 3px 8px; |
| } |
| |
| .header td textarea,.header td input[type="text"] { |
| width: 100%; |
| height: 13px; |
| resize: none; |
| font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; |
| font-size: 11px; |
| } |
| |
| .mailviewbottom { |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| width: 100%; |
| height: 26px; |
| } |
| |
| @sprite .iconlink { |
| gwt-image: 'buttons'; |
| background-position: -1000px 0; |
| width: auto; |
| height: auto; |
| display: inline-block; |
| color: #888; |
| text-decoration: none; |
| white-space: nowrap; |
| } |
| |
| .left { |
| float: left; |
| } |
| |
| .right { |
| float: right; |
| } |
| |
| .operation { |
| margin: 0 -1px; |
| } |
| |
| .add { |
| background-position: -7px -357px; |
| margin-right: 6px; |
| padding: 2px 8px 2px 20px; |
| } |
| |
| .cancel { |
| background-position: -7px -377px; |
| float: right; |
| position: relative; |
| text-indent: -5000px; |
| top: -2px; |
| width: 15px; |
| height: 17px; |
| } |
| |
| .formlinks { |
| padding: 0 4px; |
| } |
| |
| .hide { |
| display: none; |
| } |
| |
| .show { |
| display: inner-block; |
| } |
| |
| .headerTable { |
| display: table; |
| border-collapse: separate; |
| border-spacing: 2px; |
| border-color: gray; |
| width: 99%; |
| margin: 4px 0; |
| } |
| |
| .headerTable td { |
| color: #666; |
| cursor: default; |
| } |
| |
| .composeoptionsbox { |
| padding: 4px 8px 0 8px; |
| background: #d2d2d2; |
| border-bottom: 1px solid #e8e8e8; |
| -webkit-box-shadow: 0 2px 3px 0 #999; |
| -moz-box-shadow: 0 2px 3px 0 #999; |
| box-shadow: 0 2px 3px 0 #999; |
| white-space: nowrap; |
| } |
| |
| .composeattachments { |
| position: absolute; |
| right: 0; |
| top: 1px; |
| bottom: 0; |
| width: 240px; |
| background: #f0f0f0; |
| border-left: 1px solid #ddd; |
| padding: 8px; |
| overflow: auto; |
| } |
| |
| .composebodycontainer { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 260px; |
| bottom: 0; |
| } |
| |
| .statusbar { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 27px; |
| padding-left: 8px; |
| border-top: 1px solid #ddd; |
| border-radius: 0 0 4px 4px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| @external .gwt-RichTextToolbar; |
| .gwt-RichTextToolbar,.statusbar { |
| background: #eaeaea; |
| background: -moz-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaeaea), |
| color-stop(100%, #c8c8c8) ); |
| background: -o-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); |
| background: -ms-linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); |
| background: linear-gradient(top, #eaeaea 0%, #c8c8c8 100%); |
| } |
| |
| .uploader { |
| |
| } |
| |
| .uploaderCancel { |
| |
| } |
| |
| .uploaderFilename { |
| |
| } |
| |
| .attachButton { |
| width: 130px; |
| height: 27px; |
| outline: none; |
| } |
| |
| @sprite .attachImage { |
| gwt-image: 'buttons'; |
| background-position: -7px -353px; |
| width: 26px; |
| } |
| |
| @sprite .attachClip { |
| gwt-image: 'buttons'; |
| background-position: center -890px; |
| width: 24px; |
| margin-left: 6px; |
| margin-top: -4px; |
| } |
| |
| .attachImage,.attachText { |
| height: 16px; |
| cursor: pointer; |
| color: blue; |
| float: left; |
| padding-top: 7px; |
| } |
| |
| .attachClip,.attachClipText { |
| height: 27px; |
| cursor: pointer; |
| float: left; |
| padding-top: 7px; |
| } |
| </ui:style> |
| |
| <g:SplitLayoutPanel ui:field="thisPanel"> |
| <g:north size="150"> |
| <g:SimplePanel ui:field="header" addStyleNames="{style.header}"> |
| <g:FlexTable ui:field="headerTable" addStyleNames="{style.headerTable}" /> |
| </g:SimplePanel> |
| </g:north> |
| <g:center> |
| <g:DockLayoutPanel unit="PX" addStyleNames="{style.box}"> |
| <!-- <g:north size="23"> --> |
| <!-- <g:HTMLPanel addStyleNames="{style.composeoptionsbox}">composeOption</g:HTMLPanel> --> |
| <!-- </g:north> --> |
| <g:east size="257"> |
| <g:DockLayoutPanel> |
| <g:north size="25"> |
| <g:HTMLPanel addStyleNames="{style.statusbar}"> |
| <div class="{style.attachClip}" /> |
| <div class="{style.attachClipText}">Attachments</div> |
| </g:HTMLPanel> |
| </g:north> |
| <g:center> |
| <g:FlowPanel ui:field="attach" addStyleNames="{style.composeattachments}"> |
| <g:VerticalPanel> |
| <g:FocusPanel ui:field="attachButton" |
| addStyleNames="{style.attachButton}"> |
| <g:HTMLPanel> |
| <div class="{style.attachImage}" /> |
| <div class="{style.attachText}">Attach a File ...</div> |
| </g:HTMLPanel> |
| </g:FocusPanel> |
| </g:VerticalPanel> |
| </g:FlowPanel> |
| </g:center> |
| </g:DockLayoutPanel> |
| </g:east> |
| <g:center> |
| <g:DockLayoutPanel> |
| <g:north size="23"> |
| <g:SimplePanel ui:field="editorToolBar" /> |
| </g:north> |
| <g:center> |
| <g:SimplePanel ui:field="composeEditor" |
| addStyleNames="{style.composebodycontainer}" /> |
| </g:center> |
| </g:DockLayoutPanel> |
| </g:center> |
| <g:south size="28"> |
| <g:SimplePanel ui:field="composeStatusContainer" |
| addStyleNames="{style.mailviewbottom} {style.box}"> |
| <g:HTMLPanel addStyleNames="{style.statusbar}"></g:HTMLPanel> |
| </g:SimplePanel> |
| </g:south> |
| </g:DockLayoutPanel> |
| </g:center> |
| |
| </g:SplitLayoutPanel> |
| </ui:UiBinder> |