Formdesigner properties test

by hhcofcmds

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<div class="container">
    <h3>New Employee form</h3>   
<div class="row edited-row">
    <div class="span3">
        Person name
    </div>
    <div class="span9">
        <input type="text" placeholder="John doe"/>
    </div>
</div>
<div class="row edited-row">
    <div class="span3">
        Born
    </div>
    <div class="span9">
        <input type="text" placeholder="Washington"/>
    </div>
</div>
<div class="row edited-row">
    <div class="span3">
        Role
    </div>
    <div class="span9">
        <select>
            <option selected>Administrator</option>
            <option>Developer</option>
        </select>
    </div>
</div>
<div class="additional"> 
    <div class="properties">
        <div class="bubble data">
            <div>Person name</div>
            <div>John doe</div>
        </div>
        <div class="bubble validation">
            <div>Required</div>
            <div>Max: 50</div>
        </div>
        <div class="bubble binding">
            <div>Person name</div>
            <div>&nbsp;</div>
        </div>
    </div>
    <div class="edit-data bubble data detail">
        <div class="form-horizontal">
            <div class="control-group">
                <label class="control-label">Label</label>
                <div class="controls">
                    <input type="text" value="Person name"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Placeholder</label>
                <div class="controls">
                    <input type="text" value="John Doe"/>
                </div>
            </div>
            <button class="btn" id="close-edit-data">Ok</button>
        </div>
    </div>
    <div class="edit-validation bubble validation detail">
        <div class="form-horizontal">
            <div class="control-group">
                <label...

CSS

.container {
    padding-top: 30pt;
}
.properties {
    transition: margin-left 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
     -webkit-transform 300ms, opacity 300ms;
    margin-left: -600px;
    vertical-align: top;
    opacity: 0;
}

.properties.show {
    margin-left: 180px;
    opacity: 1;
}
.properties.deephide {
    -webkit-transform: scale(0.1, 0.1);
    margin-left: 40px;
    opacity: 0;
}

.bubble {
    border-radius: 20%;
    background: #eee;
    display: inline-block;
    height: 24pt;
    text-align: center;
    padding: 10pt;
    border: 1px solid light-gray;
    box-shadow: 2px 2px 2px lightgray;
    font-size: 10pt;
    cursor: pointer;
    transition: -webkit-transform 150ms, box-shadow;
}
.properties .bubble:hover {
    -webkit-transform: scale(1.1, 1.1);
    box-shadow: 3px 3px 3px gray;
}
.bubble.data {
    background: #7BC8A4;
}
.bubble.validation {
    background: #FFC65D;
}
.bubble.binding {
    background: #93648D;
}
.bubble.detail {
    height: auto;
    border-radius: 10px;
}
.bubble.detail {
    transition: -webkit-transform 300ms, opacity 300ms;
    margin-left: -1000px;
    opacity: 0.0;
    -webkit-transform: scale(1, 1);
}
.bubble.detail.show {
    margin-left: 0px;
    opacity: 1;
    -webkit-transform: scale(1, 1);
}
.additional {
    position: absolute;
    top: 0px;
    width: 100%;
}
.properties {
    position: absolute;
}
.bubble.detail {
    position: absolute;
}

JavaScript

$(".edited-row").click(function () {
    $(".properties").toggleClass("show").removeClass("deephide");
    $(".additional").css("top", ($(this).offset().top + $(this).height() - 5) + "px");
    $(".bubble.data").removeClass("show");
});

$(".properties .bubble.data").click(function() {
    $(".properties").addClass("deephide").removeClass("show");
    $(".edit-data").addClass("show");
});
$("#close-edit-data").click(function () {
    $(".edit-data").removeClass("show");
    $(".properties").removeClass("deephide");
});

$(".properties .bubble.validation").click(function() {
    $(".properties").addClass("deephide").removeClass("show");
    $(".edit-validation").addClass("show");
});
$("#close-edit-validation").click(function () {
    $(".edit-validation").removeClass("show");
    $(".properties").removeClass("deephide");
});

$(".properties .bubble.binding").click(function() {
    $(".properties").addClass("deephide").removeClass("show");
    $(".edit-binding").addClass("show");
});
$("#close-edit-binding").click(function () {
    $(".edit-binding").removeClass("show");
    $(".properties").removeClass("deephide");
});