[IMP] web_editor: split website into web_editor (to use editor in backend for html field) and website

1 files changed, 376 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/css/snippets.sass b/addons/web_editor/static/src/css/snippets.sass
new file mode 100644
index 00000000000..752dabafc78
--- /dev/null
+++ b/addons/web_editor/static/src/css/snippets.sass
@@ -0,0 +1,376 @@
+@import "compass/css3"
+@import "compass/css3/user-interface"
+@import "compass/css3/transition"
+
+
+/* ---- SNIPPET EDITOR ---- {{{ */
+
+#oe_snippets
+    #o_left_bar, #o_arrow
+        position: fixed
+        top: 34px
+        left: 0px
+        bottom: 0
+        background: rgb(40,40,40)
+        +box-shadow(0px 10px 10px -10px black inset)
+    #o_arrow
+        z-index: 1009
+        width: 24px
+        opacity: 0.75
+        > *
+            position: absolute
+            color: white
+        div
+            @include transform( translateX(-36%) rotate(-90deg) )
+            top: 50%
+            white-space: nowrap
+        .fa
+            width: 100%
+            left: 40%
+    #o_left_bar
+        left:  -228px
+        z-index: 1010
+        width: 208px
+        @include transition(all 500ms ease)
+        ul
+            text-align: center
+            margin: 0
+            padding: 6px 0
+            list-style-type: none
+            li
+                display: inline-block
+                padding: 0 3px
+                a
+                    color: #aaa
+                .fa-stack
+                    overflow: hidden
+            li.active a.fa, li.active .fa-stack-1x
+                color: #428bca
+
+    &.o_open #o_left_bar
+        left: 0
+    .o_panel
+        margin: 0
+        border: 0
+        width: 208px
+    .o_panel_header
+        background: #dff0d8
+        padding: 1px 8px
+        color: #414141
+        text-align: center
+        .fa-stack
+            overflow: hidden
+            font-size: 1em
+    .o_panel_body
+        white-space: normal
+        background: black
+        padding: 7px 3px
+        > div
+            background: rgb(0,0,0)
+            label
+                width: 44px
+                color: #fff
+                padding-left: 10px
+
+                div
+                    width: 100px
+                    text-align: center
+                    @include transform( translate(-39px, 44px) , rotate(-90deg) )
+                    @include transform-origin(50%)
+
+.oe_snippet
+    display: inline-block
+    vertical-align: top
+    width: 93px
+    margin-left: 3px
+    margin-right: 3px
+    margin-top: 1px
+    position: relative
+    overflow: hidden
+    +user-select(none)
+    cursor: move
+    .oe_snippet_thumbnail
+        text-align: center
+        height: 100%
+        background: transparent
+        color: white
+        position: relative
+        &:hover
+            .oe_snippet_thumbnail_img
+                @include transform( scale(.95,.95))
+        .oe_snippet_thumbnail_title
+            font-size: 12px
+            display: block
+            +text-shadow(0 0 2px rgb(0,0,0))
+        .oe_snippet_thumbnail_img
+            height: 74px
+            width: 92px
+            background-size: cover
+            @include transform( scale(1,1))
+        span, div
+            line-height: 18px
+    & > :not(.oe_snippet_thumbnail)
+        display: none !important
+    &.disable
+        .oe_snippet_thumbnail
+            background-color: rgba(255, 0, 0, 0.75)
+        .oe_snippet_thumbnail_img
+            opacity: 0.8
+#oe_snippets .oe_snippet_thumbnail
+    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))
+
+// }}}}
+
+/* ---- SNIPPETS DROP ZONES ---- {{{ */
+
+.oe_drop_zone.oe_insert
+    display: block
+    height: 48px
+    margin: 0px
+    margin-top: -4px
+    margin-bottom: -44px
+    @include transition(margin 250ms linear)
+    width: 100%
+    position: absolute
+    z-index: 1000
+    &:not(.oe_vertical):before
+        content: ""
+        display: block
+        border-top: dashed 2px rgba(209, 178, 255, 0.72)
+        position: relative
+        top: 0px
+    &.oe_hover:before
+        border-top: dashed 2px rgba(116, 255, 161, 0.72)
+    &.oe_vertical
+        width: 48px
+        float: left
+        position: relative
+        margin: 0px -24px !important
+    &.oe_vertical_text
+        width: 48px
+        float: none
+        display: inline-block
+        position: relative
+        margin: 0px -24px !important
+    &.oe_overlay
+        +border-radius(3px)
+        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
+        //background-size: 100px 100px
+        background: rgba(153, 0, 255,.5)
+
+.oe_drop_zone, .oe_drop_zone_style
+    border: none
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
+    //background-size: 100px 100px
+    background: rgba(153, 0, 255, .3)
+    +border-radius(4px)
+    &.oe_hover
+        background: rgba(0, 255, 133, .3)
+        z-index: 1001
+
+.oe_drop_zone_style
+    color: white
+    height: 48px
+    margin-bottom: 32px
+    padding-top: 12px
+
+// }}}
+
+/* ---- SNIPPET MANIPULATOR ----  {{{ */
+
+.resize_editor_busy
+    background-color: rgba(0,0,0,0.3)
+
+.oe_overlay
+    display: none
+    height: 0
+    position: absolute
+    background: transparent
+    z-index: 1001
+    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
+    +border-radius(3px)
+    @include transition(opacity 100ms linear)
+    +box-sizing(border-box)
+    &.oe_active
+        display: block
+    .oe_handle
+        display: block !important
+        position: absolute
+        top: 50%
+        left: 50%
+        +box-sizing(border-box)
+        width: 16px
+        height: 16px
+        margin: -2px
+        > div
+            z-index: 1
+            position: absolute
+            border-style: dashed
+            border-width: 1px
+            border-color: #666666
+            +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset)
+        &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button
+            z-index: 2
+            position: relative
+            top: 50%
+            left: 50%
+            display: block
+            background: rgba(255, 255, 255, 1)
+            border: solid 1px rgba(0, 0, 0, .2)
+            +border-radius(5px)
+            width: 18px
+            height: 18px
+            margin: -9px
+            padding-left: 1px
+            font-size: 14px
+            line-height: 14px
+            font-family: FontAwesome
+            color: rgba(0,0,0,.5)
+            @include transition(background 100ms linear)
+        &.e, &.w, &.s, &.n
+            &:hover:before
+                background: rgba(0, 0, 0, .5)
+                color: #fff
+                +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+        &.e, &.w
+            top: 4px
+            height: 100%
+            &:before
+                content: "\f07e"
+                line-height: 16px
+            > div
+                width: 0
+                height: 100%
+                top: 2px
+                left: 8px
+        &.e
+            left: auto
+            right: -6px
+            cursor: w-resize
+        &.w
+            left: -6px
+            cursor: e-resize
+        &.s, &.n
+            left: 2px
+            width: 100%
+            &:before
+                content: "\f07d"
+                text-align: center
+                padding: 1px
+            > div
+                width: 100%
+                height: 0
+                top: 7px
+                left: 1px
+        &.s
+            top: auto
+            cursor: n-resize
+        &.n
+            cursor: s-resize
+            > div
+                top: 5px
+        &.size
+            z-index: 3
+            top: auto
+            left: 50%
+            bottom: -6px
+            margin-left: -50px
+            .oe_handle_button
+                position: relative
+                z-index: 3
+                text-align: center
+                margin-left: -52px
+                margin-top: -10px
+                left: 0px
+                &:hover
+                    background: rgba(30, 30, 30, .8)
+                    color: #fff
+                    +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
+            .size
+                position: absolute
+                width: 64px
+                cursor: row-resize
+                top: 9px
+                margin-left: 52px
+                padding: 0 5px
+            .auto_size
+                position: absolute
+                width: 100px
+                top: 9px
+                cursor: pointer
+        &.readonly
+            cursor: auto !important
+            &:before, &.size
+                display: none !important
+
+    .icon.btn
+        display: inline-block
+
+    .oe_overlay_options
+        position: absolute
+        left: 50% !important
+        text-align: center
+        top: -20px
+        z-index: 1002
+        > .btn-group
+            left: -50%
+            white-space: nowrap
+            > a
+                cursor: pointer
+                display: inline-block
+                float: none
+                margin: 0 -3px
+            > div
+                float: left
+        .btn, a
+            cursor: pointer
+        .dropdown
+            display: inline-block
+        .dropdown-menu
+            text-align: left
+            min-width: 180px
+        .dropdown-menu select,.dropdown-menu input
+            display: block
+
+    &.block-w-left .w:before
+        content: "\F061" !important
+    &.block-w-right .w:before
+        content: "\F060" !important
+    &.block-w-left.block-w-right .w:before
+        display: none !important
+    &.block-e-left .e:before
+        content: "\F061" !important
+    &.block-e-right .e:before
+        content: "\F060" !important
+    &.block-e-left.block-e-right .e:before
+        display: none !important
+
+    &.block-s-top .s:before
+        content: "\F063" !important
+    &.block-s-bottom .s:before
+        content: "\f062" !important
+    &.block-n-top .n:before
+        content: "\F063" !important
+    &.block-n-bottom .n:before
+        content: "\f062" !important
+
+    &.o_keypress
+        opacity: 0
+        -webkit-transition: .8s
+        -moz-transition: .8s
+        -o-transition: .8s
+        -transition: .8s
+
+
+.s-resize-important, .s-resize-important *
+    cursor: s-resize !important
+.n-resize-important, .n-resize-important *
+    cursor: n-resize !important
+.e-resize-important, .e-resize-important *
+    cursor: e-resize !important
+.w-resize-important, .w-resize-important *
+    cursor: w-resize !important
+.move-important, .move-important *
+    cursor: move !important
+
+// }}}