From 52a191bcf75259180d7a0904ade1a7b0b745e515 Mon Sep 17 00:00:00 2001 From: Mohsen322 Date: Sun, 5 Feb 2017 11:49:32 +0330 Subject: [PATCH 1/5] Add files via upload i just changed css files for better performance for rtl languages like persian and arabic --- css/rtl-jquery.tagit.css | 69 +++++++++++++++++++++++++ css/rtl-tagit.ui-zendesk.css | 99 ++++++++++++++++++++++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 css/rtl-jquery.tagit.css create mode 100644 css/rtl-tagit.ui-zendesk.css diff --git a/css/rtl-jquery.tagit.css b/css/rtl-jquery.tagit.css new file mode 100644 index 00000000..38201b40 --- /dev/null +++ b/css/rtl-jquery.tagit.css @@ -0,0 +1,69 @@ +ul.tagit { + padding: 1px 5px; + overflow: auto; + margin-left: inherit; /* usually we don't want the regular ul margins. */ + margin-right: inherit; +} +ul.tagit li { + display: block; + float: right; + margin: 2px 5px 2px 0; +} +ul.tagit li.tagit-choice { + position: relative; + line-height: inherit; +} +input.tagit-hidden-field { + display: none; +} +ul.tagit li.tagit-choice-read-only { + padding: .2em .5em .2em .5em; +} + +ul.tagit li.tagit-choice-editable { + padding: .2em .5em .2em 18px; +} + +ul.tagit li.tagit-new { + padding: .25em 4px .25em 0; +} + +ul.tagit li.tagit-choice a.tagit-label { + cursor: pointer; + text-decoration: none; +} +ul.tagit li.tagit-choice .tagit-close { + cursor: pointer; + position: absolute; + right: .1em; + top: 50%; + margin-top: -8px; + line-height: 17px; +} + +/* used for some custom themes that don't need image icons */ +ul.tagit li.tagit-choice .tagit-close .text-icon { + display: none; +} + +ul.tagit li.tagit-choice input { + display: block; + float: right; + margin: 2px 5px 2px 0; +} +ul.tagit input[type="text"] { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + + border: none; + margin: 0; + padding: 0; + width: inherit; + background-color: inherit; + outline: none; +} diff --git a/css/rtl-tagit.ui-zendesk.css b/css/rtl-tagit.ui-zendesk.css new file mode 100644 index 00000000..8b2c9e0c --- /dev/null +++ b/css/rtl-tagit.ui-zendesk.css @@ -0,0 +1,99 @@ + +/* Optional scoped theme for tag-it which mimics the zendesk widget. */ + + +ul.tagit { + border-style: solid; + border-width: 1px; + border-color: #C6C6C6; + background: inherit; +} +ul.tagit li.tagit-choice { + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-border-radius: 6px; + border: 1px solid #CAD8F3; + + background: none; + background-color: #DEE7F8; + + font-weight: normal; +} +ul.tagit li.tagit-choice .tagit-label:not(a) { + color: #555; +} +ul.tagit li.tagit-choice a.tagit-close { + text-decoration: none; +} +ul.tagit li.tagit-choice .tagit-close { + left: .3em; +} +ul.tagit li.tagit-choice .ui-icon { + display: none; +} +ul.tagit li.tagit-choice .tagit-close .text-icon { + display: inline; + font-family: arial, sans-serif; + font-size: 16px; + line-height: 16px; + color: #777; +} +ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove { + background-color: #bbcef1; + border-color: #6d95e0; +} +ul.tagit li.tagit-choice a.tagLabel:hover, +ul.tagit li.tagit-choice a.tagit-close .text-icon:hover { + color: #222; +} +ul.tagit input[type="text"] { + color: #333333; + background: none; + text-align:right +} +.ui-widget { + font-size: 1.1em; +} + +/* Forked from a jQuery UI theme, so that we don't require the jQuery UI CSS as a dependency. */ +.tagit-autocomplete.ui-autocomplete { position: absolute; cursor: default; } +* html .tagit-autocomplete.ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ +.tagit-autocomplete.ui-menu { + list-style:none; + padding: 2px; + margin: 0; + display:block; + float: right; +} +.tagit-autocomplete.ui-menu .ui-menu { + margin-top: -3px; +} +.tagit-autocomplete.ui-menu .ui-menu-item { + margin:0; + padding: 0; + zoom: 1; + float: right; + clear: right; + width: 100%; +} +.tagit-autocomplete.ui-menu .ui-menu-item a { + text-decoration:none; + display:block; + padding:.2em .4em; + line-height:1.5; + zoom:1; +} +.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover, +.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} +.tagit-autocomplete.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff 50% 50% repeat-x; color: #222222; } +.tagit-autocomplete.ui-corner-all, .tagit-autocomplete .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } +.tagit-autocomplete .ui-state-hover, .tagit-autocomplete .ui-state-focus { border: 1px solid #999999; background: #dadada; font-weight: normal; color: #212121; } +.tagit-autocomplete .ui-state-active { border: 1px solid #aaaaaa; } + +.tagit-autocomplete .ui-widget-content { border: 1px solid #aaaaaa; } +.tagit .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px,1px,1px,1px); } + + From dede3ea336a6a5bb08a77f298ec0d72051eef0c9 Mon Sep 17 00:00:00 2001 From: Mohsen322 Date: Sun, 5 Feb 2017 11:53:26 +0330 Subject: [PATCH 2/5] Update README.markdown added persian demo pic --- README.markdown | 1 + 1 file changed, 1 insertion(+) diff --git a/README.markdown b/README.markdown index c2a16ba5..e3fd24b2 100644 --- a/README.markdown +++ b/README.markdown @@ -7,6 +7,7 @@ Tag-it is a simple and configurable tag editing widget with autocomplete support ## Demo ![Screenshot](http://aehlke.github.com/tag-it/_static/screenshot.png) +![Screenshot](http://s4.picofile.com/file/8285150568/tag_manager.JPG) Check the [examples.html](http://aehlke.github.com/tag-it/examples.html) for several demos and the [prototype.js](http://aehlke.github.com/tag-it/prototype.js) file for a JavaScript prototype with all options and events. From 345f3706fcea9889cba3e5749f6dc2aa398ced59 Mon Sep 17 00:00:00 2001 From: Mohsen322 Date: Sun, 5 Feb 2017 11:54:32 +0330 Subject: [PATCH 3/5] Update README.markdown --- README.markdown | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.markdown b/README.markdown index e3fd24b2..10a682f5 100644 --- a/README.markdown +++ b/README.markdown @@ -4,9 +4,11 @@ Tag-it is a simple and configurable tag editing widget with autocomplete support [Homepage](http://aehlke.github.com/tag-it/) -## Demo +## LTR Demo ![Screenshot](http://aehlke.github.com/tag-it/_static/screenshot.png) + +## Right To Left Demo ![Screenshot](http://s4.picofile.com/file/8285150568/tag_manager.JPG) Check the [examples.html](http://aehlke.github.com/tag-it/examples.html) for several demos and the [prototype.js](http://aehlke.github.com/tag-it/prototype.js) file for a JavaScript prototype with all options and events. From d3feb29527593951365c6b9fed9ef0132c78c670 Mon Sep 17 00:00:00 2001 From: Mohsen322 Date: Sun, 5 Feb 2017 12:14:23 +0330 Subject: [PATCH 4/5] Update README.markdown --- README.markdown | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.markdown b/README.markdown index 10a682f5..b2cf1023 100644 --- a/README.markdown +++ b/README.markdown @@ -27,6 +27,9 @@ The plugin requires either a jQuery UI theme or a Tag-it theme to be present, as + +## RTL USER +just load and replace these files to project (rtl-jquery.tagit.css AND rtl-tagit.ui-zendesk.css) Now, let's attach it to an existing `
    ` box: From ac359be9cd803d7e2d69ea2c1a91a5b1965138cb Mon Sep 17 00:00:00 2001 From: Mohsen322 Date: Sun, 12 Feb 2017 11:00:47 +0330 Subject: [PATCH 5/5] Update README.markdown --- README.markdown | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.markdown b/README.markdown index b2cf1023..2bead112 100644 --- a/README.markdown +++ b/README.markdown @@ -4,13 +4,13 @@ Tag-it is a simple and configurable tag editing widget with autocomplete support [Homepage](http://aehlke.github.com/tag-it/) +## Right To Left Demo +![Screenshot](http://s4.picofile.com/file/8285150568/tag_manager.JPG) + ## LTR Demo ![Screenshot](http://aehlke.github.com/tag-it/_static/screenshot.png) -## Right To Left Demo -![Screenshot](http://s4.picofile.com/file/8285150568/tag_manager.JPG) - Check the [examples.html](http://aehlke.github.com/tag-it/examples.html) for several demos and the [prototype.js](http://aehlke.github.com/tag-it/prototype.js) file for a JavaScript prototype with all options and events. ## Usage