[11.0][ADD] web_view_transition

web_view_transition/__init__.py

@@ -0,0 +1 @@
+from . import models

web_view_transition/__manifest__.py

@@ -0,0 +1,21 @@
+# Odoo, Open Source Web View Transition
+# Copyright (C) 2019 Alexandre Díaz <dev@redneboa.es>
+#
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
+{
+    'name': "Web View Transition",
+    'category': "web",
+    'version': "11.0.1.0.0",
+    'author': "Alexandre Díaz, "
+              "Odoo Community Association (OCA)",
+    'website': 'https://github.com/OCA/Web',
+    'depends': ['base', 'web'],
+    'summary': 'This module adds transitions to display views',
+    'data': [
+        'view/web_view_transition.xml',
+        'view/inherited_view_users_form_simple_modif.xml',
+    ],
+    'license': 'AGPL-3',
+    'auto_install': False,
+    'installable': True,
+}

web_view_transition/models/__init__.py

@@ -0,0 +1,5 @@
+# Copyright 2018  Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from . import inherited_res_users
+from . import inherited_ir_http

web_view_transition/models/inherited_ir_http.py

@@ -0,0 +1,16 @@
+# Copyright 2019 Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import models
+from odoo.http import request
+
+
+class Http(models.AbstractModel):
+    _inherit = 'ir.http'
+
+    def session_info(self):
+        vals = super().session_info()
+        vals.update({
+            'view_transition_mode': request.env.user.view_transition_mode,
+        })
+        return vals

web_view_transition/models/inherited_res_users.py

@@ -0,0 +1,36 @@
+# Copyright 2019 Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import models, fields
+
+
+class ResUsers(models.Model):
+    _inherit = 'res.users'
+
+    view_transition_mode = fields.Selection([
+        ('scale-back-top', 'Scale (Back-Top)'),
+        ('scale-top-back', 'Scale (Top-Back)'),
+        ('skew', 'Skew'),
+        ('translate-left-right', 'Translate (Left-Right)'),
+        ('translate-right-left', 'Translate (Right-Left)'),
+        ('translate-top-down', 'Translate (Top-Down)'),
+        ('translate-down-top', 'Translate (Down-Top)'),
+        ('fade-in', 'Fade-In'),
+        ('circle-in', 'Circle-In'),
+        ('rotate-x-3d', 'Rotate X Top (3D)'),
+        ('rotate-y-3d', 'Rotate Y (3D)'),
+        ('rotate-x-2d', 'Rotate X'),
+    ], string="View Transition Mode")
+
+    def __init__(self, pool, cr):
+        """ Override of __init__ to add access rights.
+        Access rights are disabled by default, but allowed on some specific
+        fields defined in self.SELF_{READ/WRITE}ABLE_FIELDS.
+        """
+        super().__init__(pool, cr)
+        # duplicate list to avoid modifying the original reference
+        type(self).SELF_WRITEABLE_FIELDS = list(self.SELF_WRITEABLE_FIELDS)
+        type(self).SELF_WRITEABLE_FIELDS.extend(['view_transition_mode'])
+        # duplicate list to avoid modifying the original reference
+        type(self).SELF_READABLE_FIELDS = list(self.SELF_READABLE_FIELDS)
+        type(self).SELF_READABLE_FIELDS.extend(['view_transition_mode'])

web_view_transition/readme/DESCRIPTION.rst

@@ -0,0 +1 @@
+This module adds transitions (CSS Animations) to display views. Configurable by user.

web_view_transition/readme/USAGE.rst

@@ -0,0 +1,6 @@
+Go to user menu > Preferences > View Transition Mode
+
+  |config|
+
+
+.. |config| image:: ./images/config.gif

web_view_transition/static/src/css/transitions.less

@@ -0,0 +1,142 @@
+@keyframes o-view-transition-scale-back-top-animation {
+  from { transform: scale(0.1); }
+  to { transform: scale(1.0); }
+}
+@keyframes o-view-transition-scale-top-back-animation {
+  from { transform: scale(2.0); }
+  to { transform: scale(1.0); }
+}
+@keyframes o-view-transition-skew-animation {
+  from { transform: skewX(89deg); }
+  to { transform: skewX(0deg); }
+}
+
+@keyframes o-view-transition-translate-left-right-animation {
+  from { transform: translate(-100vw, 0); }
+  to { transform: translate(0, 0); }
+}
+
+@keyframes o-view-transition-translate-right-left-animation {
+  from { transform: translate(100vw,0); }
+  to { transform: translate(0, 0); }
+}
+
+@keyframes o-view-transition-translate-top-down-animation {
+  from { transform: translate(0, -100vh); }
+  to { transform: translate(0, 0); }
+}
+
+@keyframes o-view-transition-translate-down-top-animation {
+  from { transform: translate(0, 100vh); }
+  to { transform: translate(0, 0); }
+}
+
+@keyframes o-view-transition-fade-in-animation {
+  from { opacity: 0.0; }
+  to { opacity: 1.0; }
+}
+
+@keyframes o-view-transition-circle-in-animation {
+  0% {
+    overflow: hidden;
+    border-radius: 100%;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  99.9% {
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+    transform: translate(0, 0);
+    border-radius: 0;
+    overflow: auto;
+  }
+}
+
+@keyframes o-view-transition-rotate-x-3d-animation {
+  from {
+    transform: perspective(400px) rotateX(-90deg);
+    transform-origin: top center;
+  }
+  to {
+    transform: rotateX(0);
+    transform-origin: top center;
+  }
+}
+
+@keyframes o-view-transition-rotate-x-2d-animation {
+  from {
+    transform: rotateX(-90deg);
+  }
+  to {
+    transform: rotateX(0);
+  }
+}
+
+@keyframes o-view-transition-rotate-y-3d-animation {
+  from {
+    transform: perspective(400px) rotateY(-40deg) translateZ(-288px);
+  }
+  to {
+    transform: rotateY(0) translateZ(0);
+  }
+}
+
+
+.o-view-transition-scale-back-top {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-scale-back-top-animation;
+}
+
+.o-view-transition-scale-top-back {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-scale-top-back-animation;
+}
+
+.o-view-transition-skew {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-skew-animation;
+}
+
+.o-view-transition-translate-left-right {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-translate-left-right-animation;
+}
+
+.o-view-transition-translate-right-left {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-translate-right-left-animation;
+}
+
+.o-view-transition-translate-top-down {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-translate-top-down-animation;
+}
+
+.o-view-transition-translate-down-top {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-translate-down-top-animation;
+}
+
+.o-view-transition-fade-in {
+  animation: 0.3s cubic-bezier(.68,-0.55,.27,1.55) o-view-transition-fade-in-animation;
+}
+
+.o-view-transition-circle-in {
+  animation: 0.3s cubic-bezier(.6,.04,.98,.34) o-view-transition-circle-in-animation;
+}
+
+.o-view-transition-rotate-x-3d {
+  animation: 0.3s cubic-bezier(.65,.05,.36,1) o-view-transition-rotate-x-3d-animation;
+}
+
+.o-view-transition-rotate-y-3d {
+  animation: 0.3s cubic-bezier(.65,.05,.36,1) o-view-transition-rotate-y-3d-animation;
+}
+
+.o-view-transition-rotate-x-2d {
+  animation: 0.3s cubic-bezier(.65,.05,.36,1) o-view-transition-rotate-x-2d-animation;
+}

web_view_transition/static/src/js/view_manager.js

@@ -0,0 +1,20 @@
+// Copyright 2019 Alexandre Díaz <dev@redneboa.es>
+// License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
+odoo.define('web_view_transitions.ViewManager', function (require) {
+    "use strict";
+
+    var ViewManager = require('web.ViewManager');
+    var session = require('web.session');
+
+    ViewManager.include({
+        _display_view: function () {
+            this._super.apply(this, arguments);
+
+            if (this.active_view && session.view_transition_mode) {
+                this.active_view.$fragment.addClass(
+                    'o-view-transition-' + session.view_transition_mode);
+            }
+        },
+    });
+
+});

web_view_transition/view/inherited_view_users_form_simple_modif.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+
+<!--
+    Copyright 2019
+    @author Alexanre Díaz <dev@redneboa.es>
+    License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+
+<odoo>
+
+    <record id="view_users_form_simple_modif" model="ir.ui.view">
+        <field name="model">res.users</field>
+        <field name="inherit_id" ref="base.view_users_form_simple_modif" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='email']" position="after">
+                <field name="view_transition_mode" readonly="0" />
+            </xpath>
+        </field>
+    </record>
+
+</odoo>

web_view_transition/view/web_view_transition.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <template id="assets_backend" name="web_view_transition_assets" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" href="/web_view_transition/static/src/css/transitions.less"/>
+            <script type="text/javascript" src="/web_view_transition/static/src/js/view_manager.js"></script>
+        </xpath>
+    </template>
+</odoo>