initial commit 2

2 files changed, 308 insertions, 0 deletions

diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
new file mode 100644
index 00000000..8c4d9d89
--- /dev/null
+++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss
@@ -0,0 +1,294 @@
+// MOBILE LAYOUT CUSTOMIZATIONS
+@include media-breakpoint-down(sm) {
+    #o_employee_right {
+        .o_org_chart_title {
+            font-size: 20px;
+            padding: 5px 0;
+            border-bottom: 1px solid $o-hr-org-chart-border-color;
+        }
+    }
+}
+
+// SMALL DESKTOP LAYOUT
+@include media-breakpoint-up(md) {
+    #o_work_employee_container {
+        display: flex;
+        width: 100%;
+    }
+    #o_work_employee_main {
+        flex: 1 1 60%;
+    }
+    #o_employee_right {
+        flex: 0 1 35%;
+        margin-left: 2%;
+        padding-left: 2%;
+        border-left: 1px solid $o-hr-org-chart-border-color;
+
+        .o_org_chart_title {
+            color: gray('600')
+        }
+    }
+}
+
+// MEDIUM DESKTOP LAYOUT
+@include media-breakpoint-up(lg) {
+    #o_employee_right {
+        flex: 0 1 33%;
+    }
+}
+
+// LARGE DESKTOP LAYOUT
+@include media-breakpoint-up(xl) {
+    #o_employee_right {
+        flex: 0 1 30%;
+    }
+}
+
+#o_employee_right {
+    $tmp-gap-base: $o-hr-org-chart-entry-pic-size*0.7;
+
+    // ORGANIGRAM LINES
+    .o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down {
+        position: relative;
+        width: 100%;
+    }
+
+    .o_org_chart_group_up {
+        &:before {
+            @include o-hr-org-chart-line;
+            border-left-width: $o-hr-org-chart-entry-line-w;
+            height: calc(100% + #{$o-hr-org-chart-entry-pic-size*0.5}) ;
+            @include o-position-absolute(
+                $top: $o-hr-org-chart-entry-pic-size*0.1 + 5px,
+                $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5
+            );
+        }
+        .o_org_chart_entry:last-of-type {
+            &:before {
+                @include o-hr-org-chart-line;
+                border-width: 0 0 $o-hr-org-chart-entry-line-w $o-hr-org-chart-entry-line-w;
+                @include size(($o-hr-org-chart-entry-pic-size*0.5) - ($o-hr-org-chart-entry-v-gap*2), $o-hr-org-chart-entry-pic-size*0.5 + $o-hr-org-chart-entry-v-gap*2 );
+                @include o-position-absolute(
+                    $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5,
+                    $top: 100%
+                );
+            }
+        }
+    }
+
+    .o_org_chart_group_up + .o_org_chart_entry_self {
+        margin-left: $tmp-gap-base;
+
+        & + .o_org_chart_group_down {
+            padding-left: $tmp-gap-base*2;
+
+            &:before {
+                margin-left: $tmp-gap-base;
+            }
+        }
+    }
+
+    .o_org_chart_group_down {
+        padding-left: $tmp-gap-base;
+
+        &:before {
+            @include o-hr-org-chart-line;
+            border-left-width: $o-hr-org-chart-entry-line-w;
+            height: 100%;
+            @include o-position-absolute(
+                $top: $o-hr-org-chart-entry-v-gap*-1,
+                $left: $tmp-gap-base*0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5
+            );
+        }
+
+        .o_org_chart_entry {
+            &:before {
+                @include o-hr-org-chart-line;
+                border-top-width:  $o-hr-org-chart-entry-line-w;
+                @include size($tmp-gap-base, 0);
+                @include o-position-absolute(
+                    $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5,
+                    $top: $o-hr-org-chart-entry-pic-size*0.5
+                );
+            }
+
+            &:last-of-type {
+                &:before {
+                    height: 50%;
+                }
+
+            }
+
+            &.o_org_chart_more {
+                margin-top: $o-hr-org-chart-entry-v-gap;
+
+                &:before {
+                    top: 15px;
+                }
+            }
+        }
+    }
+
+    // ORGANIGRAM DESIGN
+    .o_org_chart_entry {
+        margin-bottom: $o-hr-org-chart-entry-v-gap;
+        overflow: visible;
+        margin-top: 0;
+
+        &, .o_media_left, .media-body {
+            position: relative;
+        }
+
+        .o_media_left {
+            padding-right: 10px;
+        }
+
+        .media-body {
+            vertical-align: middle;
+
+            .badge {
+                float: right;
+                cursor: pointer;
+                margin-right: 5px;
+                color: gray('600');
+                background: $o-hr-org-chart-bg;
+                border: 1px solid gray('600');
+                &:hover {
+                    color: $o-brand-primary;
+                    border-color: $o-brand-primary;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            strong {
+                display: block;
+                line-height: 1.2;
+                font-size: 11px;
+                color: lighten(gray('600'), 15%);
+            }
+        }
+
+        .o_media_object {
+            display: block;
+            width: $o-hr-org-chart-entry-pic-size*0.8;
+            height: $o-hr-org-chart-entry-pic-size*0.8;
+            margin: $o-hr-org-chart-entry-pic-size*0.1;
+            box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w darken($o-hr-org-chart-bg, 20%);
+            background-size: cover;
+            background-position: center center;
+            background-color: $o-view-background-color;
+
+            &.card {
+                height: 20px;
+                box-shadow: none;
+                border-color: transparent;
+                padding: 0;
+                position: relative;
+                color: $body-color;
+
+                .o_org_chart_show_more {
+                    line-height: 13px;
+                }
+
+                &:hover {
+                    border-color: $o-hr-org-chart-entry-border-color;
+                    color:$o-brand-primary;
+                }
+            }
+        }
+
+        &.o_org_chart_entry_manager, &.o_org_chart_entry_sub {
+            .o_media_left {
+                padding-right: 0;
+            }
+            .media-body > a {
+                padding-left: 10px;
+                max-width: 100%;
+                display: block;
+
+                .o_media_heading {
+                    color: lighten(gray('600'), 5%);
+                    font-size: 13px;
+                }
+            }
+
+            &:hover {
+                .o_media_object {
+                    box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6);
+                }
+                .media-body > a {
+                    .o_media_heading {
+                        color: $o-brand-primary;
+                    }
+                    strong {
+                        color: lighten(gray('600'), 5%);
+                    }
+                }
+            }
+        }
+
+        &.o_org_chart_entry_self {
+            &:not(:first-child) {
+                margin-top: $o-hr-org-chart-entry-v-gap*1.5;
+            }
+
+            strong {
+                color: $text-muted;
+            }
+
+            .o_media_object {
+                width: $o-hr-org-chart-entry-pic-size;
+                height: $o-hr-org-chart-entry-pic-size;
+                margin: 0;
+                border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-primary;
+                box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white;
+            }
+
+            .media-body {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+// POP OVER
+.o_org_chart_popup.popover {
+    max-width: 400px;
+    margin-right: 5px;
+
+    .popover-header {
+        height: 47px;
+        line-height: 33px;
+        padding-right: 50px;
+
+        > a {
+            @include o-position-absolute($right: 14px);
+        }
+
+        span {
+            @include size(30px, 30px);
+            margin-right: 10px;
+            border-radius: 100%;
+            background-position: center;
+            background-size: cover;
+            float: left;
+            box-shadow: 0 1px 1px;
+        }
+    }
+    .table {
+        margin-bottom: 0;
+    }
+}
+
+// Right to Left specific style to flip the popover arrow
+.o_rtl {
+    .o_org_chart_popup.popover .arrow {
+        left: 100%;
+        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
+        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
+        -o-transform: matrix(-1, 0, 0, 1, 0, 0);
+        transform: matrix(-1, 0, 0, 1, 0, 0);
+    }
+}
diff --git a/addons/hr_org_chart/static/src/scss/variables.scss b/addons/hr_org_chart/static/src/scss/variables.scss
new file mode 100644
index 00000000..142ebf9a
--- /dev/null
+++ b/addons/hr_org_chart/static/src/scss/variables.scss
@@ -0,0 +1,14 @@
+$o-hr-org-chart-bg: white;
+$o-hr-org-chart-border-color: $o-brand-secondary;
+
+$o-hr-org-chart-entry-v-gap: 6px;
+$o-hr-org-chart-entry-pic-size: 46px;
+$o-hr-org-chart-entry-line-w: 1px;
+$o-hr-org-chart-entry-border-color: darken($o-hr-org-chart-bg, 25%);
+
+// MIXINS
+@mixin o-hr-org-chart-line {
+    content: '';
+    background-color: $o-hr-org-chart-bg;
+    border: 0px solid $o-hr-org-chart-entry-border-color;
+}