client/src/main/java/org/apache/hupa/client/ui/ComposeView.ui.xml

<!-- 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>