AjmalCybro
2 years ago
62 changed files with 1726 additions and 0 deletions
@ -0,0 +1,47 @@ |
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg |
|||
:target: https://www.gnu.org/licenses/agpl-3.0-standalone.html |
|||
:alt: License: AGPL-3 |
|||
|
|||
Field Time Picker |
|||
================= |
|||
Time picker for fields, using Wickedpicker. |
|||
|
|||
Installation & Configuration |
|||
============================ |
|||
Once the module has been installed, a time picker may be used to read time input in character fields. |
|||
use 'widget="timepicker"' when defining the fields in XML for those that you need to use as time fields. |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
License |
|||
------- |
|||
Affero General Public License, Version 3 (AGPL v3) |
|||
(https://www.gnu.org/licenses/agpl-3.0-standalone.html) |
|||
|
|||
Credits |
|||
------- |
|||
Developer: (V15) - Mruthul Raj ,Contact: odoo@cybrosys.com |
|||
|
|||
Bug Tracker |
|||
=========== |
|||
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://cybrosys.com |
|||
|
|||
Maintainer |
|||
========== |
|||
.. image:: https://cybrosys.com/images/logo.png |
|||
:target: https://cybrosys.com |
|||
|
|||
This module is maintained by Cybrosys Technologies. |
|||
|
|||
For support and more information, please visit `Our Website <https://cybrosys.com/>`__ |
|||
|
|||
Further information |
|||
=================== |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,21 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Mruthul Raj(<https://www.cybrosys.com>) |
|||
# |
|||
# This program is free software: you can modify |
|||
# it under the terms of the GNU Affero General Public License (AGPL) as |
|||
# published by the Free Software Foundation, either version 3 of the |
|||
# License, or (at your option) any later version. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU Affero General Public License for more details. |
|||
# |
|||
# You should have received a copy of the GNU Affero General Public License |
|||
# along with this program. If not, see <https://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
@ -0,0 +1,52 @@ |
|||
# -*- coding: utf-8 -*- |
|||
# ############################################################################# |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Mruthul Raj(<https://www.cybrosys.com>) |
|||
# |
|||
# This program is free software: you can modify |
|||
# it under the terms of the GNU Affero General Public License (AGPL) as |
|||
# published by the Free Software Foundation, either version 3 of the |
|||
# License, or (at your option) any later version. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU Affero General Public License for more details. |
|||
# |
|||
# You should have received a copy of the GNU Affero General Public License |
|||
# along with this program. If not, see <https://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
{ |
|||
'name': 'Field Time Picker', |
|||
'version': '15.0.1.0.0', |
|||
'category': 'Extra Tools', |
|||
'summary': 'Time Picker Using Wickedpicker', |
|||
'description': 'The Field Time Picker is a module that provides a time ' |
|||
'picker widget designed for character fields in a web' |
|||
' application. It leverages the Wickedpicker library to' |
|||
' offer a user-friendly and intuitive way to select time ' |
|||
'values.', |
|||
'author': 'Cybrosys Techno Solutions', |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': 'https://www.cybrosys.com/', |
|||
'depends': ['base'], |
|||
"assets": { |
|||
'web.assets_backend': [ |
|||
'field_timepicker/static/wickedpicker/dist/wickedpicker.min.css', |
|||
'field_timepicker/static/wickedpicker/dist/wickedpicker.min.js', |
|||
'field_timepicker/static/src/js/time_widget.js', |
|||
], |
|||
'web.assets_qweb': [ |
|||
'field_timepicker/static/src/xml/timepicker.xml', |
|||
] |
|||
}, |
|||
'images': ['static/description/banner.jpg'], |
|||
'license': 'AGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
## Module <field_timepicker> |
|||
|
|||
#### 17.08.2023 |
|||
#### Version 15.0.1.0.0 |
|||
#### ADD |
|||
- Initial Commit for Field Time Picker |
|||
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 589 B |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 967 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
@ -0,0 +1,638 @@ |
|||
<div style="background-color: #714B67; height: 810px; width: 100%; padding: 15px; position: relative;"> |
|||
<!-- TITLE BAR --> |
|||
<div class="d-flex align-items-center justify-content-between" |
|||
style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;"> |
|||
<img src="assets/misc/cybrosys-logo.png" width="42" height="42" |
|||
style="width: 42px; height: 42px;"/> |
|||
<div> |
|||
<div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;" |
|||
class="mr-2"> |
|||
<i class="fa fa-check mr-1"></i>Community |
|||
</div> |
|||
<div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;" |
|||
class="mr-2"> |
|||
<i class="fa fa-check mr-1"></i>Enterprise |
|||
</div> |
|||
<div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;" |
|||
class="mr-2"> |
|||
<i class="fa fa-check mr-1"></i>Odoo.sh |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-sm-12 col-md-12 col-lg-12"> |
|||
<!-- APP HERO --> |
|||
<h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;"> |
|||
Field Time Picker </h1> |
|||
<p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;"> |
|||
Add Time Picker Widget That Can Be Used With Character Type |
|||
Fields In Odoo</p> |
|||
<!-- END OF APP HERO --> |
|||
<img src="./assets/screenshots/hero.gif" class="img-responsive" |
|||
width="100%" height="auto"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="d-flex align-items-center" |
|||
style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;"> |
|||
<div class="d-flex justify-content-center align-items-center mr-2" |
|||
style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;"> |
|||
<img src="assets/misc/compass.png"/> |
|||
</div> |
|||
<h2 class="mt-2" |
|||
style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;"> |
|||
Explore This Module</h2> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<a href="#overview" style="text-decoration: none !important;"> |
|||
<div class="row" |
|||
style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;"> |
|||
<div class="col-8"> |
|||
<h3 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;"> |
|||
Overview</h3> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;"> |
|||
Learn more about this module</p> |
|||
</div> |
|||
<div class="col-4 text-right d-flex justify-content-end align-items-center"> |
|||
<i class="fa fa-chevron-right" |
|||
style="color: #714B67 !important;"></i> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<a href="#features" style="text-decoration: none !important;"> |
|||
<div class="row" |
|||
style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;"> |
|||
<div class="col-8"> |
|||
<h3 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;"> |
|||
Features</h3> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;"> |
|||
View features of this module</p> |
|||
</div> |
|||
<div class="col-4 text-right d-flex justify-content-end align-items-center"> |
|||
<i class="fa fa-chevron-right" |
|||
style="color: #714B67 !important;"></i> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<a href="#screenshots" |
|||
style="text-decoration: none !important;"> |
|||
<div class="row" |
|||
style="background-color: #f5f2f5 !important; border-radius: 10px !important; margin: 1rem !important; padding: 1.5em !important; height: 100px !important;"> |
|||
<div class="col-8"> |
|||
<h3 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.2rem !important;"> |
|||
Screenshots</h3> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #714B67 !important; font-size: 0.9rem !important;"> |
|||
See key screenshots of this module</p> |
|||
</div> |
|||
<div class="col-4 text-right d-flex justify-content-end align-items-center"> |
|||
<i class="fa fa-chevron-right" |
|||
style="color: #714B67 !important;"></i> |
|||
</div> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="row" id="overview"> |
|||
<div class="col-md-12" |
|||
style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important"> |
|||
<h2 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;"> |
|||
<i class="fa fa-pie-chart mr-2"></i>Overview |
|||
</h2> |
|||
</div> |
|||
|
|||
<div class="col-sm-12 py-4"> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important; line-height: 30px !important;"> |
|||
The module allows the user to add time picker widget that |
|||
can be used with character type fields in Odoo |
|||
using the jQuery plugin 'Wicked picker'. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
<div class="row" id="features"> |
|||
<div class="col-md-12" |
|||
style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important"> |
|||
<h2 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;"> |
|||
<i class="fa fa-star mr-2"></i>Features |
|||
</h2> |
|||
</div> |
|||
|
|||
<div class="col-md-6 pl-3 d-flex"> |
|||
<div> |
|||
<img src="assets/icons/check.png"> |
|||
</div> |
|||
<div> |
|||
<h4 |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;"> |
|||
|
|||
Time picker for character fields</h4> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6 pl-3 d-flex"> |
|||
<div> |
|||
<img src="assets/icons/check.png"> |
|||
</div> |
|||
<div> |
|||
<h4 |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;"> |
|||
|
|||
Time picker in 24-hour format</h4> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="row" id="screenshots"> |
|||
<div class="col-md-12" |
|||
style="border-bottom: 1px solid #d5d5d5 !important; margin: 2rem 0 !important"> |
|||
<h2 |
|||
style="font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; color: #714B67 !important; font-size: 1.5rem !important;"> |
|||
<i class="fa fa-image mr-2"></i>Screenshots |
|||
</h2> |
|||
</div> |
|||
<div class="col-lg-12 my-2"> |
|||
<h4 class="mt-2" |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;"> |
|||
Time Picker Widget</h4> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;"> |
|||
Just add widget='timepicker' to character field. |
|||
</p> |
|||
<img src="assets/screenshots/1.png" |
|||
class="img-responsive img-thumbnail border" width="100%" |
|||
height="auto"/> |
|||
</div> |
|||
<div class="col-lg-12 my-2"> |
|||
<h4 class="mt-2" |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 600 !important; color: #282F33 !important; font-size: 1.3rem !important;"> |
|||
Time Picker</h4> |
|||
<p |
|||
style="font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; color: #282F33 !important; font-size: 1rem !important;"> |
|||
You will get Timepicker like this. |
|||
|
|||
</p> |
|||
<img src="assets/screenshots/2.png" |
|||
class="img-responsive img-thumbnail border" width="100%" |
|||
height="auto"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- RELATED PRODUCTS --> |
|||
<div class="d-flex align-items-center" |
|||
style="border-bottom: 2px solid #714B67; padding: 15px 0px;"> |
|||
<div class="d-flex justify-content-center align-items-center mr-2" |
|||
style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;"> |
|||
<img src="assets/misc/categories.png"/> |
|||
</div> |
|||
<h2 class="mt-2" |
|||
style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;"> |
|||
Related |
|||
Products |
|||
</h2> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-sm-12"> |
|||
<div id="demo1" class="row carousel slide" data-ride="carousel"> |
|||
<!-- The slideshow --> |
|||
<div class="carousel-inner" style="padding: 30px;"> |
|||
<div class="carousel-item" |
|||
style="min-height: 198.656px;"> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/edit_label/" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/edit.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/dynamic_product_fields/" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/dynamic.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/employee_dynamic_fields/" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/employee.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="carousel-item active" |
|||
style="min-height: 198.656px;"> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/one2many_search/" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/search.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/dynamic_sale_order_fields/#" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/sale.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" |
|||
style="float:left"> |
|||
<a href="https://apps.odoo.com/apps/modules/15.0/remove_studio_field/" |
|||
target="_blank"> |
|||
<div style="border-radius:10px"> |
|||
<img class="img img-responsive center-block" |
|||
style="border-radius: 0px;" |
|||
src="assets/modules/studio.png"> |
|||
</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- Left and right controls --> |
|||
<a class="carousel-control-prev" href="#demo1" |
|||
data-slide="prev" |
|||
style="width:35px; color:#000"> <span |
|||
class="carousel-control-prev-icon"><i |
|||
class="fa fa-chevron-left" |
|||
style="font-size:24px"></i></span> |
|||
</a> <a class="carousel-control-next" href="#demo1" |
|||
data-slide="next" style="width:35px; color:#000"> |
|||
<span class="carousel-control-next-icon"><i |
|||
class="fa fa-chevron-right" |
|||
style="font-size:24px"></i></span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- END OF RELATED PRODUCTS --> |
|||
|
|||
<!-- OUR SERVICES --> |
|||
<section class="container" style="margin-top: 6rem !important;"> |
|||
<div class="row"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center"> |
|||
<h2 style="color: #212529 !important;">Our Services</h2> |
|||
<hr |
|||
style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/cogs.png" class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Customization</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/wrench.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Implementation</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/lifebuoy.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Support</h6> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/user.png" class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Hire |
|||
Odoo |
|||
Developer</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #54a0ff !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/puzzle.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Integration</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/update.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Migration</h6> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/consultation.png" |
|||
class="img-responsive" height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Consultancy</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/training.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Implementation</h6> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4"> |
|||
<div class="d-flex justify-content-center align-items-center mx-3 my-3" |
|||
style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;"> |
|||
<img src="assets/icons/license.png" |
|||
class="img-responsive" |
|||
height="48px" width="48px"> |
|||
</div> |
|||
<h6 class="text-center" |
|||
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;"> |
|||
Odoo |
|||
Licensing Consultancy</h6> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- END OF OUR SERVICES --> |
|||
|
|||
<!-- OUR INDUSTRIES --> |
|||
<section class="container" style="margin-top: 6rem !important;"> |
|||
<div class="row"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center"> |
|||
<h2 style="color: #212529 !important;">Our Industries</h2> |
|||
<hr |
|||
style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/trading-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Trading |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Easily procure |
|||
and |
|||
sell your products</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/pos-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
POS |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Easy |
|||
configuration |
|||
and convivial experience</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/education-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Education |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
A platform for |
|||
educational management</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/manufacturing-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Manufacturing |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Plan, track and |
|||
schedule your operations</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/ecom-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
E-commerce & Website |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Mobile |
|||
friendly, |
|||
awe-inspiring product pages</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/service-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Service Management |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Keep track of |
|||
services and invoice</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/restaurant-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Restaurant |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
Run your bar or |
|||
restaurant methodically</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-3"> |
|||
<div class="my-4 d-flex flex-column justify-content-center" |
|||
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;"> |
|||
<img src="./assets/icons/hotel-black.png" |
|||
class="img-responsive mb-3" height="48px" |
|||
width="48px"> |
|||
<h5 |
|||
style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;"> |
|||
Hotel Management |
|||
</h5> |
|||
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;"> |
|||
An |
|||
all-inclusive |
|||
hotel management application</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</section> |
|||
|
|||
<!-- END OF OUR INDUSTRIES --> |
|||
|
|||
<!-- FOOTER --> |
|||
<!-- Footer Section --> |
|||
<section class="container" style="margin: 5rem auto 2rem;"> |
|||
<div class="row" style="max-width:1540px;"> |
|||
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center"> |
|||
<h2 style="color: #212529 !important;">Need Help?</h2> |
|||
<hr |
|||
style="border: 3px solid #714B67 !important; background-color: #714B67 !important; width: 80px !important; margin-bottom: 2rem !important;"/> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Contact Cards --> |
|||
<div class="row d-flex justify-content-center align-items-center" |
|||
style="max-width:1540px; margin: 0 auto 2rem auto;"> |
|||
|
|||
<div class="col-lg-12" |
|||
style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; "> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-lg-6"> |
|||
<a href="mailto:odoo@cybrosys.com" target="_blank" |
|||
class="btn btn-block mb-2 deep_hover" |
|||
style="text-decoration: none; background-color: #4d4d4d; color: #FFF; border-radius: 4px;"><i |
|||
class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<a href="https://api.whatsapp.com/send?phone=918606827707" |
|||
target="_blank" |
|||
class="btn btn-block mb-2 deep_hover" |
|||
style="text-decoration: none; background-color: #25D366; color: #FFF; border-radius: 4px;"><i |
|||
class="fa fa-whatsapp mr-2"></i>WhatsApp</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- End of Contact Cards --> |
|||
</section> |
|||
<!-- Footer --> |
|||
<section class="oe_container" style="padding: 2rem 3rem 1rem;"> |
|||
<div class="row" |
|||
style="max-width:1540px; margin: 0 auto; margin-right: 3rem; "> |
|||
<!-- Logo --> |
|||
<div class="col-lg-12 d-flex justify-content-center align-items-center" |
|||
style="margin-top: 3rem;"> |
|||
<img src="https://www.cybrosys.com/images/logo.png" |
|||
width="200px" height="auto"/> |
|||
</div> |
|||
<!-- End of Logo --> |
|||
<div class="col-lg-12"> |
|||
<hr |
|||
style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;"> |
|||
<!-- End of Footer Section --> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- END OF FOOTER --> |
|||
@ -0,0 +1,74 @@ |
|||
odoo.define('field_timepicker.timepicker', function(require) { |
|||
"use strict"; |
|||
var field_registry = require('web.field_registry'); |
|||
var Field = require('web.basic_fields') |
|||
.FieldChar; |
|||
var Dialog = require('web.Dialog'); |
|||
var global_show_time = null; |
|||
var FieldTimePicker = Field.extend({ |
|||
template: 'FieldTimePicker', |
|||
widget_class: 'oe_form_field_time', |
|||
/** |
|||
* Renders the widget in readonly mode |
|||
* |
|||
*/ |
|||
_renderReadonly: function() { |
|||
var show_value = this._formatValue(this.value); |
|||
this.$el.text(show_value); |
|||
global_show_time = show_value; |
|||
}, |
|||
/** |
|||
* Returns the value of the widget |
|||
* |
|||
* returns:Widget value |
|||
*/ |
|||
_getValue: function() { |
|||
var $input = this.$el.find('input'); |
|||
return $input.val(); |
|||
}, |
|||
/** |
|||
* Renders the widget in edit mode |
|||
* |
|||
*/ |
|||
_renderEdit: function() { |
|||
this._super.apply(this, arguments); |
|||
var show_value = this._formatValue(this.value); |
|||
this.$el.find('input')[0].value=show_value; |
|||
var self = this; |
|||
this.$el.on('click', '.timepickerg', function() { |
|||
self._onClickTimePicker(); |
|||
}); |
|||
/** |
|||
* Call the click function. |
|||
*/ |
|||
setTimeout(function() { |
|||
self._onClickTimePicker(); |
|||
}, 50); |
|||
}, |
|||
_onClickTimePicker: function() { |
|||
/** |
|||
* Function to be executed when the "timepicker" class is clicked. |
|||
* It renders the field as an editable timepicker widget if the formatType is "char". |
|||
*/ |
|||
if (this.formatType === "char") { |
|||
var $input = this.$el.find('input'); |
|||
var options = { |
|||
twentyFour: true, |
|||
title: 'Timepicker', |
|||
showSeconds: true, |
|||
}; |
|||
if (global_show_time) { |
|||
options['now'] = global_show_time; |
|||
} |
|||
$input.wickedpicker(options); |
|||
} else { |
|||
Dialog.alert(this, "Timepicker widget only works with 'Char' field type"); |
|||
return false; |
|||
} |
|||
}, |
|||
}); |
|||
field_registry.add('timepicker', FieldTimePicker); |
|||
return { |
|||
FieldTimePicker: FieldTimePicker |
|||
}; |
|||
}); |
|||
@ -0,0 +1,20 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
<!--This XML file contains templates for creating form components in the web application.--> |
|||
<templates id="timepicker" xml:space="preserve"> |
|||
<t t-name="FieldTimePicker"> |
|||
<span t-if="widget.mode !== 'readonly'"> |
|||
<div class="input-group timepicker-component"> |
|||
<input type="text" |
|||
t-att-id="widget.id_for_label" |
|||
t-att-tabindex="widget.attrs.tabindex" |
|||
t-att-autofocus="widget.attrs.autofocus" |
|||
t-att-placeholder="widget.attrs.placeholder" |
|||
t-att-maxlength="widget.field.size" |
|||
class="timepickerg form-control" |
|||
/> |
|||
<span class="input-group-addon" style="display:none;"><i/></span> |
|||
</div> |
|||
</span> |
|||
<span t-if="widget.mode === 'readonly'"/> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,11 @@ |
|||
.sass-cache |
|||
*.html |
|||
jquery-1.11.3.min.js |
|||
.idea |
|||
sass |
|||
jasmine |
|||
spec |
|||
node_modules |
|||
node_module/* |
|||
gulpfile.js |
|||
package.json |
|||
@ -0,0 +1,21 @@ |
|||
The MIT License |
|||
|
|||
Copyright (c) 2015-2016 Eric Gagnon http://ericjgagnon.github.io/wickedpicker/ |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy |
|||
of this software and associated documentation files (the "Software"), to deal |
|||
in the Software without restriction, including without limitation the rights |
|||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|||
copies of the Software, and to permit persons to whom the Software is |
|||
furnished to do so, subject to the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be included in |
|||
all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|||
THE SOFTWARE. |
|||
@ -0,0 +1,79 @@ |
|||
# Wickedpicker |
|||
|
|||
## wickedpicker.js - A simple jQuery timepicker |
|||
|
|||
## Requirements |
|||
|
|||
* [jQuery](http://jquery.com/download/) (>= 1.9) |
|||
|
|||
## Installation |
|||
```shell |
|||
$ bower install wickedpicker |
|||
``` |
|||
|
|||
## Usage |
|||
|
|||
#### In your HTML |
|||
```html |
|||
<body> |
|||
.... |
|||
<input type="text" name="timepicker" class="timepicker"/> |
|||
.... |
|||
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> |
|||
<script type="text/javascript" src="wickedpicker.js"></script> |
|||
</body> |
|||
``` |
|||
|
|||
#### In your JavaScript file |
|||
```javascript |
|||
$('.timepicker').wickedpicker(); |
|||
``` |
|||
|
|||
#### Options |
|||
```javascript |
|||
var options = { |
|||
now: "12:35", //hh:mm 24 hour format only, defaults to current time |
|||
twentyFour: false, //Display 24 hour format, defaults to false |
|||
upArrow: 'wickedpicker__controls__control-up', //The up arrow class selector to use, for custom CSS |
|||
downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS |
|||
close: 'wickedpicker__close', //The close class selector to use, for custom CSS |
|||
hoverState: 'hover-state', //The hover state class to use, for custom CSS |
|||
title: 'Timepicker', //The Wickedpicker's title, |
|||
showSeconds: false, //Whether or not to show seconds, |
|||
timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds) |
|||
secondsInterval: 1, //Change interval for seconds, defaults to 1, |
|||
minutesInterval: 1, //Change interval for minutes, defaults to 1 |
|||
beforeShow: null, //A function to be called before the Wickedpicker is shown |
|||
afterShow: null, //A function to be called after the Wickedpicker is closed/hidden |
|||
show: null, //A function to be called when the Wickedpicker is shown |
|||
clearable: false, //Make the picker's input clearable (has clickable "x") |
|||
}; |
|||
$('.timepicker').wickedpicker(options); |
|||
``` |
|||
|
|||
#### Methods |
|||
|
|||
'time' get the current time inside of the input element that has a wickedpicker attached to it. |
|||
```javascript |
|||
$('.timepicker').wickedpicker('time'); |
|||
``` |
|||
|
|||
If multiple input fields have the same class and instantiate a wickedpicker then pass the index of the timepicker |
|||
you'd like to select |
|||
```javascript |
|||
$('.timepicker').wickedpicker('time', 0); |
|||
``` |
|||
|
|||
#### Functionality |
|||
The Wickedpicker opens when the bound input is clicked, or focused on (try tabbing), and it can be closed by either |
|||
clicking the X, by clicking outside of it, or by pressing esc. The arrows icons increase or decrease their |
|||
associated time values or toggle the meridiem. The values can also be changed using the up and down keys when |
|||
focused on. To move to the next value just press the left or right arrow key. |
|||
|
|||
For more checkout |
|||
[Wickedpicker gh-pages](http://ericjgagnon.github.io/wickedpicker/) |
|||
|
|||
## License |
|||
|
|||
Copyright (c) 2015-2016 Eric Gagnon Licensed under the MIT license. |
|||
|
|||
@ -0,0 +1,29 @@ |
|||
{ |
|||
"name": "wickedpicker", |
|||
"version": "0.0.4", |
|||
"description": "A simple jQuery timepicker plugin.", |
|||
"main": [ |
|||
"./dist/wickedpicker.min.js", |
|||
"./dist/wickedpicker.min.css" |
|||
], |
|||
"authors": [ |
|||
"Eric Gagnon", |
|||
"Ruben Seyferth" |
|||
], |
|||
"moduleType": "globals", |
|||
"license": "MIT", |
|||
"keywords": [ |
|||
"jQuery", |
|||
"timepicker", |
|||
"wickedpicker" |
|||
], |
|||
"homepage": "http://ericjgagnon.github.io/wickedpicker/", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "git://github.com/ericjgagnon/wickedpicker.git" |
|||
}, |
|||
"dependencies": { |
|||
"jquery": ">= 1.9.0" |
|||
}, |
|||
"private": false |
|||
} |
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,624 @@ |
|||
/** |
|||
* wickedpicker v0.4.1 - A simple jQuery timepicker. |
|||
* Copyright (c) 2015-2016 Eric Gagnon - http://github.com/wickedRidge/wickedpicker
|
|||
* License: MIT |
|||
*/ |
|||
|
|||
(function ($, window, document) { |
|||
|
|||
"use strict"; |
|||
|
|||
if (typeof String.prototype.endsWith != 'function') { |
|||
/* |
|||
* Checks if this string end ends with another string |
|||
* |
|||
* @param {string} the string to be checked |
|||
* |
|||
* @return {bool} |
|||
*/ |
|||
String.prototype.endsWith = function (string) { |
|||
return string.length > 0 && this.substring(this.length - string.length, this.length) === string; |
|||
} |
|||
} |
|||
|
|||
/* |
|||
* Returns if the user agent is mobile |
|||
* |
|||
* @return {bool} |
|||
*/ |
|||
var isMobile = function () { |
|||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); |
|||
}; |
|||
|
|||
var today = new Date(); |
|||
|
|||
var pluginName = "wickedpicker", |
|||
defaults = { |
|||
now: today.getHours() + ':' + today.getMinutes(), |
|||
twentyFour: false, |
|||
upArrow: 'wickedpicker__controls__control-up', |
|||
downArrow: 'wickedpicker__controls__control-down', |
|||
close: 'wickedpicker__close', |
|||
hoverState: 'hover-state', |
|||
title: 'Timepicker', |
|||
showSeconds: false, |
|||
timeSeparator: ' : ', |
|||
secondsInterval: 1, |
|||
minutesInterval: 1, |
|||
beforeShow: null, |
|||
afterShow: null, |
|||
show: null, |
|||
clearable: false, |
|||
closeOnClickOutside: true, |
|||
onClickOutside: function() {}, |
|||
}; |
|||
|
|||
/* |
|||
* @param {object} The input object the timepicker is attached to. |
|||
* @param {object} The object containing options |
|||
*/ |
|||
function Wickedpicker(element, options) { |
|||
this.element = $(element); |
|||
this.options = $.extend({}, defaults, options); |
|||
|
|||
this.element.addClass('hasWickedpicker'); |
|||
this.element.attr('onkeypress', 'return false;'); |
|||
this.element.attr('aria-showingpicker', 'false'); |
|||
this.createPicker(); |
|||
this.timepicker = $('.wickedpicker'); |
|||
this.up = $('.' + this.options.upArrow.split(/\s+/).join('.')); |
|||
this.down = $('.' + this.options.downArrow.split(/\s+/).join('.')); |
|||
this.separator = $('.wickedpicker__controls__control--separator'); |
|||
this.hoursElem = $('.wickedpicker__controls__control--hours'); |
|||
this.minutesElem = $('.wickedpicker__controls__control--minutes'); |
|||
this.secondsElem = $('.wickedpicker__controls__control--seconds'); |
|||
this.meridiemElem = $('.wickedpicker__controls__control--meridiem'); |
|||
this.close = $('.' + this.options.close.split(/\s+/).join('.')); |
|||
|
|||
//Create a new Date object based on the default or passing in now value
|
|||
var time = this.timeArrayFromString(this.options.now); |
|||
this.options.now = new Date(today.getFullYear(), today.getMonth(), today.getDate(), time[0], time[1], time[2]); |
|||
this.selectedHour = this.parseHours(this.options.now.getHours()); |
|||
this.selectedMin = this.parseSecMin(this.options.now.getMinutes()); |
|||
this.selectedSec = this.parseSecMin(this.options.now.getSeconds()); |
|||
this.selectedMeridiem = this.parseMeridiem(this.options.now.getHours()); |
|||
this.setHoverState(); |
|||
this.attach(element); |
|||
this.setText(element); |
|||
} |
|||
|
|||
$.extend(Wickedpicker.prototype, { |
|||
|
|||
/* |
|||
* Show given input's timepicker |
|||
* |
|||
* @param {object} The input being clicked |
|||
*/ |
|||
showPicker: function (element) { |
|||
//If there is a beforeShow function, then call it with the input calling the timepicker and the
|
|||
// timepicker itself
|
|||
if (typeof this.options.beforeShow === 'function') { |
|||
this.options.beforeShow(element, this.timepicker); |
|||
} |
|||
var timepickerPos = $(element).offset(); |
|||
|
|||
$(element).attr({'aria-showingpicker': 'true', 'tabindex': -1}); |
|||
this.setText(element); |
|||
this.showHideMeridiemControl(); |
|||
if (this.getText(element) !== this.getTime()) { |
|||
|
|||
// Check meridiem
|
|||
var text = this.getText(element); |
|||
var re = /\s[ap]m$/i; |
|||
var meridiem = re.test(text) ? text.substr(-2, 2) : null; |
|||
var inputTime = text.replace(re, '').split(this.options.timeSeparator); |
|||
var newTime = {}; |
|||
newTime.hours = inputTime[0]; |
|||
newTime.minutes = inputTime[1]; |
|||
newTime.meridiem = meridiem; |
|||
if (this.options.showSeconds) { |
|||
newTime.seconds = inputTime[2]; |
|||
} |
|||
this.setTime(newTime); |
|||
} |
|||
this.timepicker.css({ |
|||
'z-index': this.element.css('z-index') + 1, |
|||
position: 'absolute', |
|||
left: timepickerPos.left, |
|||
top: timepickerPos.top + $(element)[0].offsetHeight |
|||
}).show(); |
|||
//If there is a show function, then call it with the input calling the timepicker and the
|
|||
// timepicker itself
|
|||
if (typeof this.options.show === 'function') { |
|||
this.options.show(element, this.timepicker); |
|||
} |
|||
|
|||
this.handleTimeAdjustments(element); |
|||
}, |
|||
|
|||
/* |
|||
* Hides the timepicker that is currently shown if it is not part of the timepicker |
|||
* |
|||
* @param {Object} The DOM object being clicked on the page |
|||
* |
|||
* BeinnLora: added trigger function to call on closing/hiding timepicker. |
|||
*/ |
|||
hideTimepicker: function (element) { |
|||
this.timepicker.hide(); |
|||
if (typeof this.options.afterShow === 'function') { |
|||
this.options.afterShow(element, this.timepicker); |
|||
} |
|||
var pickerHidden = { |
|||
start: function () { |
|||
var setShowPickerFalse = $.Deferred(); |
|||
$('[aria-showingpicker="true"]').attr('aria-showingpicker', 'false'); |
|||
return setShowPickerFalse.promise(); |
|||
} |
|||
}; |
|||
|
|||
function setTabIndex(index) { |
|||
setTimeout(function () { |
|||
$('[aria-showingpicker="false"]').attr('tabindex', index); |
|||
}, 400); |
|||
} |
|||
|
|||
pickerHidden.start().then(setTabIndex(0)); |
|||
}, |
|||
|
|||
/* |
|||
* Create a new timepicker. A single timepicker per page |
|||
*/ |
|||
createPicker: function () { |
|||
if ($('.wickedpicker').length === 0) { |
|||
var picker = '<div class="wickedpicker"><p class="wickedpicker__title">' + this.options.title + '<span class="wickedpicker__close"></span></p><ul class="wickedpicker__controls"><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--hours" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li><li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--minutes" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span></li>'; |
|||
if (this.options.showSeconds) { |
|||
picker += '<li class="wickedpicker__controls__control--separator"><span class="wickedpicker__controls__control--separator-inner">:</span></li><li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--seconds" tabindex="-1">00</span><span class="' + this.options.downArrow + '"></span> </li>'; |
|||
} |
|||
picker += '<li class="wickedpicker__controls__control"><span class="' + this.options.upArrow + '"></span><span class="wickedpicker__controls__control--meridiem" tabindex="-1">AM</span><span class="' + this.options.downArrow + '"></span></li></ul></div>'; |
|||
$('body').append(picker); |
|||
this.attachKeyboardEvents(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Hides the meridiem control if this timepicker is a 24 hour clock |
|||
*/ |
|||
showHideMeridiemControl: function () { |
|||
if (this.options.twentyFour === false) { |
|||
$(this.meridiemElem).parent().show(); |
|||
} |
|||
else { |
|||
$(this.meridiemElem).parent().hide(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Hides the seconds control if this timepicker has showSeconds set to true |
|||
*/ |
|||
showHideSecondsControl: function () { |
|||
if (this.options.showSeconds) { |
|||
$(this.secondsElem).parent().show(); |
|||
} |
|||
else { |
|||
$(this.secondsElem).parent().hide(); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Bind the click events to the input |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
attach: function (element) { |
|||
var self = this; |
|||
|
|||
if (this.options.clearable) { |
|||
self.makePickerInputClearable(element); |
|||
} |
|||
|
|||
$(element).attr('tabindex', 0); |
|||
$(element).on('click focus', function (event) { |
|||
//Prevent multiple firings
|
|||
if ($(self.timepicker).is(':hidden')) { |
|||
self.showPicker($(this)); |
|||
window.lastTimePickerControl = $(this); //Put the reference on this timepicker into global scope for unsing that in afterShow function
|
|||
$(self.hoursElem).focus(); |
|||
} |
|||
}); |
|||
|
|||
|
|||
//Handle click events for closing Wickedpicker
|
|||
var clickHandler = function (event) { //TODO: Fix double firing
|
|||
//Only fire the hide event when you have to
|
|||
if ($(self.timepicker).is(':visible')) { |
|||
//Clicking the X
|
|||
if ($(event.target).is(self.close)) { |
|||
self.hideTimepicker(window.lastTimePickerControl); |
|||
} else if ($(event.target).closest(self.timepicker).length || $(event.target).closest($('.hasWickedpicker')).length) { //Clicking the Wickedpicker or one of it's inputs
|
|||
event.stopPropagation(); |
|||
} else { //Everything else
|
|||
if (typeof self.options.onClickOutside === 'function') { |
|||
self.options.onClickOutside(); |
|||
} |
|||
else { |
|||
console.warn("Type of onClickOutside must be a function"); |
|||
} |
|||
|
|||
if (!self.options.closeOnClickOutside) { |
|||
return; |
|||
} |
|||
self.hideTimepicker(window.lastTimePickerControl); |
|||
} |
|||
window.lastTimePickerControl = null; |
|||
} |
|||
}; |
|||
$(document).off('click', clickHandler).on('click', clickHandler); |
|||
}, |
|||
|
|||
/** |
|||
* Added keyboard functionality to improve usabil |
|||
*/ |
|||
attachKeyboardEvents: function () { |
|||
$(document).on('keydown', $.proxy(function (event) { |
|||
switch (event.keyCode) { |
|||
case 9: |
|||
if (event.target.className !== 'hasWickedpicker') { |
|||
$(this.close).trigger('click'); |
|||
} |
|||
break; |
|||
case 27: |
|||
$(this.close).trigger('click'); |
|||
break; |
|||
case 37: //Left arrow
|
|||
if (event.target.className !== this.hoursElem[0].className) { |
|||
$(event.target).parent().prevAll('li').not(this.separator.selector).first().children()[1].focus(); |
|||
} else { |
|||
$(event.target).parent().siblings(':last').children()[1].focus(); |
|||
} |
|||
break; |
|||
case 39: //Right arrow
|
|||
if (event.target.className !== this.meridiemElem[0].className) { |
|||
$(event.target).parent().nextAll('li').not(this.separator.selector).first().children()[1].focus(); |
|||
} else { |
|||
$(event.target).parent().siblings(':first').children()[1].focus(); |
|||
} |
|||
break; |
|||
case 38: //Up arrow
|
|||
$(':focus').prev().trigger('click'); |
|||
break; |
|||
case 40: //Down arrow
|
|||
$(':focus').next().trigger('click'); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
}, this)); |
|||
}, |
|||
|
|||
/* |
|||
* Set the time on the timepicker |
|||
* |
|||
* @param {object} The date being set |
|||
*/ |
|||
setTime: function (time) { |
|||
this.setHours(time.hours); |
|||
this.setMinutes(time.minutes); |
|||
this.setMeridiem(time.meridiem); |
|||
if (this.options.showSeconds) { |
|||
this.setSeconds(time.seconds); |
|||
} |
|||
}, |
|||
|
|||
/* |
|||
* Get the time from the timepicker |
|||
*/ |
|||
getTime: function () { |
|||
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())]; |
|||
}, |
|||
|
|||
/* |
|||
* Set the timpicker's hour(s) value |
|||
* |
|||
* @param {string} hours |
|||
*/ |
|||
setHours: function (hours) { |
|||
var hour = new Date(); |
|||
hour.setHours(hours); |
|||
var hoursText = this.parseHours(hour.getHours()); |
|||
this.hoursElem.text(hoursText); |
|||
this.selectedHour = hoursText; |
|||
}, |
|||
|
|||
/* |
|||
* Get the hour(s) value from the timepicker |
|||
* |
|||
* @return {integer} |
|||
*/ |
|||
getHours: function () { |
|||
var hours = new Date(); |
|||
hours.setHours(this.hoursElem.text()); |
|||
return hours.getHours(); |
|||
}, |
|||
|
|||
/* |
|||
* Returns the correct hour value based on the type of clock, 12 or 24 hour |
|||
* |
|||
* @param {integer} The hours value before parsing |
|||
* |
|||
* @return {string|integer} |
|||
*/ |
|||
parseHours: function (hours) { |
|||
return (this.options.twentyFour === false) ? ((hours + 11) % 12) + 1 : (hours < 10) ? '0' + hours : hours; |
|||
}, |
|||
|
|||
/* |
|||
* Sets the timpicker's minutes value |
|||
* |
|||
* @param {string} minutes |
|||
*/ |
|||
setMinutes: function (minutes) { |
|||
var minute = new Date(); |
|||
minute.setMinutes(minutes); |
|||
var minutesText = minute.getMinutes(); |
|||
var min = this.parseSecMin(minutesText); |
|||
this.minutesElem.text(min); |
|||
this.selectedMin = min; |
|||
}, |
|||
|
|||
/* |
|||
* Get the minutes value from the timepicker |
|||
* |
|||
* @return {integer} |
|||
*/ |
|||
getMinutes: function () { |
|||
var minutes = new Date(); |
|||
minutes.setMinutes(this.minutesElem.text()); |
|||
return minutes.getMinutes(); |
|||
}, |
|||
|
|||
|
|||
/* |
|||
* Return a human-readable minutes/seconds value |
|||
* |
|||
* @param {string} value seconds or minutes |
|||
* |
|||
* @return {string|integer} |
|||
*/ |
|||
parseSecMin: function (value) { |
|||
return ((value < 10) ? '0' : '') + value; |
|||
}, |
|||
|
|||
/* |
|||
* Set the timepicker's meridiem value, AM or PM |
|||
* |
|||
* @param {string} The new meridiem |
|||
*/ |
|||
setMeridiem: function (inputMeridiem) { |
|||
var newMeridiem = ''; |
|||
if (inputMeridiem === undefined) { |
|||
var meridiem = this.getMeridiem(); |
|||
newMeridiem = (meridiem === 'PM') ? 'AM' : 'PM'; |
|||
} else { |
|||
newMeridiem = inputMeridiem; |
|||
} |
|||
this.meridiemElem.text(newMeridiem); |
|||
this.selectedMeridiem = newMeridiem; |
|||
}, |
|||
|
|||
/* |
|||
* Get the timepicker's meridiem value, AM or PM |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
getMeridiem: function () { |
|||
return this.meridiemElem.text(); |
|||
}, |
|||
|
|||
/* |
|||
* Set the timepicker's seconds value |
|||
* |
|||
* @param {string} seconds |
|||
*/ |
|||
setSeconds: function (seconds) { |
|||
var second = new Date(); |
|||
second.setSeconds(seconds); |
|||
var secondsText = second.getSeconds(); |
|||
var sec = this.parseSecMin(secondsText); |
|||
this.secondsElem.text(sec); |
|||
this.selectedSec = sec; |
|||
}, |
|||
|
|||
/* |
|||
* Get the timepicker's seconds value |
|||
* |
|||
* return {string} |
|||
*/ |
|||
getSeconds: function () { |
|||
var seconds = new Date(); |
|||
seconds.setSeconds(this.secondsElem.text()); |
|||
return seconds.getSeconds(); |
|||
}, |
|||
|
|||
/* |
|||
* Get the correct meridiem based on the hours given |
|||
* |
|||
* @param {string|integer} hours |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
parseMeridiem: function (hours) { |
|||
return (hours > 11) ? 'PM' : 'AM'; |
|||
}, |
|||
|
|||
/* |
|||
* Handles time incrementing and decrementing and passes |
|||
* the operator, '+' or '-', the input to be set after the change |
|||
* and the current arrow clicked, to decipher if hours, ninutes, or meridiem. |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
handleTimeAdjustments: function (element) { |
|||
var timeOut = 0; |
|||
//Click and click and hold timepicker incrementer and decrementer
|
|||
$(this.up).add(this.down).off('mousedown click touchstart').on('mousedown click', { |
|||
'Wickedpicker': this, |
|||
'input': element |
|||
}, function (event) { |
|||
if(event.which!=1) return false; |
|||
var operator = (this.className.indexOf('up') > -1) ? '+' : '-'; |
|||
var passedData = event.data; |
|||
if (event.type == 'mousedown') { |
|||
timeOut = setInterval($.proxy(function (args) { |
|||
args.Wickedpicker.changeValue(operator, args.input, this); |
|||
}, this, {'Wickedpicker': passedData.Wickedpicker, 'input': passedData.input}), 200); |
|||
} else { |
|||
passedData.Wickedpicker.changeValue(operator, passedData.input, this); |
|||
} |
|||
}).bind('mouseup touchend', function () { |
|||
clearInterval(timeOut); |
|||
}); |
|||
}, |
|||
|
|||
/* |
|||
* Change the timepicker's time base on what is clicked |
|||
* |
|||
* @param {string} The + or - operator |
|||
* @param {object} The timepicker's associated input to be set post change |
|||
* @param {object} The DOM arrow object clicked, determines if it is hours, |
|||
* minutes, or meridiem base on the operator and its siblings |
|||
*/ |
|||
changeValue: function (operator, input, clicked) { |
|||
var target = (operator === '+') ? clicked.nextSibling : clicked.previousSibling; |
|||
var targetClass = $(target).attr('class'); |
|||
if (targetClass.endsWith('hours')) { |
|||
this.setHours(eval(this.getHours() + operator + 1)); |
|||
} else if (targetClass.endsWith('minutes')) { |
|||
this.setMinutes(eval(this.getMinutes() + operator + this.options.minutesInterval)); |
|||
} else if (targetClass.endsWith('seconds')) { |
|||
this.setSeconds(eval(this.getSeconds() + operator + this.options.secondsInterval)); |
|||
} else { |
|||
this.setMeridiem(); |
|||
} |
|||
this.setText(input); |
|||
}, |
|||
|
|||
|
|||
/* |
|||
* Sets the give input's text to the current timepicker's time |
|||
* |
|||
* @param {object} The input element |
|||
*/ |
|||
setText: function (input) { |
|||
$(input).val(this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec)).change(); |
|||
}, |
|||
|
|||
/* |
|||
* Get the given input's value |
|||
* |
|||
* @param {object} The input element |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
getText: function (input) { |
|||
return $(input).val(); |
|||
}, |
|||
|
|||
/* |
|||
* Returns the correct time format as a string |
|||
* |
|||
* @param {string} hour |
|||
* @param {string} minutes |
|||
* @param {string} meridiem |
|||
* |
|||
* @return {string} |
|||
*/ |
|||
formatTime: function (hour, min, meridiem, seconds) { |
|||
var formattedTime = hour + this.options.timeSeparator + min; |
|||
if (this.options.showSeconds) { |
|||
formattedTime += this.options.timeSeparator + seconds; |
|||
} |
|||
if (this.options.twentyFour === false) { |
|||
formattedTime += ' ' + meridiem; |
|||
} |
|||
return formattedTime; |
|||
}, |
|||
|
|||
/** |
|||
* Apply the hover class to the arrows and close icon fonts |
|||
*/ |
|||
setHoverState: function () { |
|||
var self = this; |
|||
if (!isMobile()) { |
|||
$(this.up).add(this.down).add(this.close).hover(function () { |
|||
$(this).toggleClass(self.options.hoverState); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* Wrapping the given input field with the clearable container |
|||
* , add a span that will contain the x, and bind the clear |
|||
* input event to the span |
|||
* |
|||
* @param input |
|||
*/ |
|||
makePickerInputClearable: function(input) { |
|||
$(input).wrap('<div class="clearable-picker"></div>').after('<span data-clear-picker>×</span>'); |
|||
|
|||
//When the x is clicked, clear its sibling input field
|
|||
$('[data-clear-picker]').on('click', function(event) { |
|||
$(this).siblings('.hasWickedpicker').val(''); |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* Convert the options time string format |
|||
* to an array |
|||
* |
|||
* returns => [hours, minutes, seconds] |
|||
* |
|||
* @param stringTime |
|||
* @returns {*} |
|||
*/ |
|||
timeArrayFromString: function (stringTime) { |
|||
if (stringTime.length) { |
|||
var time = stringTime.split(':'); |
|||
time[2] = (time.length < 3) ? '00' : time[2]; |
|||
return time; |
|||
} |
|||
return false; |
|||
}, |
|||
|
|||
//public functions
|
|||
/* |
|||
* Returns the requested input element's value |
|||
*/ |
|||
_time: function () { |
|||
var inputValue = $(this.element).val(); |
|||
return (inputValue === '') ? this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec) : inputValue; |
|||
}, |
|||
_hide: function() { |
|||
this.hideTimepicker(this.element); |
|||
} |
|||
}); |
|||
|
|||
//optional index if multiple inputs share the same class
|
|||
$.fn[pluginName] = function (options, index) { |
|||
if (!$.isFunction(Wickedpicker.prototype['_' + options])) { |
|||
return this.each(function () { |
|||
if (!$.data(this, "plugin_" + pluginName)) { |
|||
$.data(this, "plugin_" + pluginName, new Wickedpicker(this, options)); |
|||
} |
|||
}); |
|||
} |
|||
else if ($(this).hasClass('hasWickedpicker')) { |
|||
if (index !== undefined) { |
|||
return $.data($(this)[index], 'plugin_' + pluginName)['_' + options](); |
|||
} |
|||
else { |
|||
return $.data($(this)[0], 'plugin_' + pluginName)['_' + options](); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
})(jQuery, window, document); |
|||
@ -0,0 +1,90 @@ |
|||
.wickedpicker { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
box-shadow: 0 0 0 1px rgba(14, 41, 57, 0.12), 0 2px 5px rgba(14, 41, 57, 0.44), inset 0 -1px 2px rgba(14, 41, 57, 0.15); |
|||
background: #fefefe; |
|||
margin: 0 auto; |
|||
border-radius: 0.1px; |
|||
width: 270px; |
|||
height: 130px; |
|||
font-size: 14px; |
|||
display: none; } |
|||
.wickedpicker__title { |
|||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); |
|||
background-image: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); |
|||
position: relative; |
|||
background: #f2f2f2; |
|||
margin: 0 auto; |
|||
border-bottom: 1px solid #e5e5e5; |
|||
padding: 12px 11px 10px 15px; |
|||
color: #4C4C4C; |
|||
font-size: inherit; } |
|||
.wickedpicker__close { |
|||
-webkit-transform: translateY(-25%); |
|||
-moz-transform: translateY(-25%); |
|||
-ms-transform: translateY(-25%); |
|||
-o-transform: translateY(-25%); |
|||
transform: translateY(-25%); |
|||
position: absolute; |
|||
top: 25%; |
|||
right: 10px; |
|||
color: #34495e; |
|||
cursor: pointer; } |
|||
.wickedpicker__close:before { |
|||
content: '\00d7'; } |
|||
.wickedpicker__controls { |
|||
padding: 10px 0; |
|||
line-height: normal; |
|||
margin: 0; } |
|||
.wickedpicker__controls__control, .wickedpicker__controls__control--separator { |
|||
vertical-align: middle; |
|||
display: inline-block; |
|||
font-size: inherit; |
|||
margin: 0 auto; |
|||
width: 35px; |
|||
letter-spacing: 1.3px; } |
|||
.wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
|||
color: #34495e; |
|||
position: relative; |
|||
display: block; |
|||
margin: 3px auto; |
|||
font-size: 18px; |
|||
cursor: pointer; } |
|||
.wickedpicker__controls__control-up:before { |
|||
content: '\e800'; } |
|||
.wickedpicker__controls__control-down:after { |
|||
content: '\e801'; } |
|||
.wickedpicker__controls__control--separator { |
|||
width: 5px; } |
|||
|
|||
.text-center, .wickedpicker__title, .wickedpicker__controls, .wickedpicker__controls__control, .wickedpicker__controls__control--separator, .wickedpicker__controls__control-up, .wickedpicker__controls__control-down { |
|||
text-align: center; } |
|||
|
|||
.hover-state { |
|||
color: #3498db; } |
|||
|
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url("../fonts/fontello.eot?52602240"); |
|||
src: url("../fonts/fontello.eot?52602240#iefix") format("embedded-opentype"), url("../fonts/fontello.woff?52602240") format("woff"), url("../fonts/fontello.ttf?52602240") format("truetype"), url("../fonts/fontello.svg?52602240#fontello") format("svg"); |
|||
font-weight: normal; |
|||
font-style: normal; } |
|||
|
|||
.fontello:before, .wickedpicker__controls__control-up:before, .fontello-after:after, .wickedpicker__controls__control-down:after { |
|||
font-family: 'fontello'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: none; |
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
line-height: 1em; |
|||
margin-left: .2em; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; } |
|||
Loading…
Reference in new issue