diff --git a/web_view_transition/README.rst b/web_view_transition/README.rst new file mode 100644 index 00000000..e69de29b diff --git a/web_view_transition/__init__.py b/web_view_transition/__init__.py new file mode 100644 index 00000000..0650744f --- /dev/null +++ b/web_view_transition/__init__.py @@ -0,0 +1 @@ +from . import models diff --git a/web_view_transition/__manifest__.py b/web_view_transition/__manifest__.py new file mode 100644 index 00000000..680672e1 --- /dev/null +++ b/web_view_transition/__manifest__.py @@ -0,0 +1,21 @@ +# Odoo, Open Source Web View Transition +# Copyright (C) 2019 Alexandre Díaz +# +# 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, +} diff --git a/web_view_transition/images/config.gif b/web_view_transition/images/config.gif new file mode 100644 index 00000000..eb410537 Binary files /dev/null and b/web_view_transition/images/config.gif differ diff --git a/web_view_transition/models/__init__.py b/web_view_transition/models/__init__.py new file mode 100644 index 00000000..014c2a25 --- /dev/null +++ b/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 diff --git a/web_view_transition/models/inherited_ir_http.py b/web_view_transition/models/inherited_ir_http.py new file mode 100644 index 00000000..06fddb66 --- /dev/null +++ b/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 diff --git a/web_view_transition/models/inherited_res_users.py b/web_view_transition/models/inherited_res_users.py new file mode 100644 index 00000000..aab8cd6a --- /dev/null +++ b/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']) diff --git a/web_view_transition/readme/DESCRIPTION.rst b/web_view_transition/readme/DESCRIPTION.rst new file mode 100644 index 00000000..9f39d076 --- /dev/null +++ b/web_view_transition/readme/DESCRIPTION.rst @@ -0,0 +1 @@ +This module adds transitions (CSS Animations) to display views. Configurable by user. diff --git a/web_view_transition/readme/USAGE.rst b/web_view_transition/readme/USAGE.rst new file mode 100644 index 00000000..61369b7a --- /dev/null +++ b/web_view_transition/readme/USAGE.rst @@ -0,0 +1,6 @@ +Go to user menu > Preferences > View Transition Mode + + |config| + + +.. |config| image:: ./images/config.gif diff --git a/web_view_transition/static/src/css/transitions.less b/web_view_transition/static/src/css/transitions.less new file mode 100644 index 00000000..9c563932 --- /dev/null +++ b/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; +} diff --git a/web_view_transition/static/src/js/view_manager.js b/web_view_transition/static/src/js/view_manager.js new file mode 100644 index 00000000..a7343086 --- /dev/null +++ b/web_view_transition/static/src/js/view_manager.js @@ -0,0 +1,20 @@ +// Copyright 2019 Alexandre Díaz +// 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); + } + }, + }); + +}); diff --git a/web_view_transition/view/inherited_view_users_form_simple_modif.xml b/web_view_transition/view/inherited_view_users_form_simple_modif.xml new file mode 100644 index 00000000..7a154430 --- /dev/null +++ b/web_view_transition/view/inherited_view_users_form_simple_modif.xml @@ -0,0 +1,21 @@ + + + + + + + + res.users + + + + + + + + + diff --git a/web_view_transition/view/web_view_transition.xml b/web_view_transition/view/web_view_transition.xml new file mode 100644 index 00000000..a5ae1af0 --- /dev/null +++ b/web_view_transition/view/web_view_transition.xml @@ -0,0 +1,9 @@ + + + +