diff options
| -rw-r--r-- | apps/comments/appinfo/app.php | 2 | ||||
| -rw-r--r-- | apps/comments/css/autocomplete.scss | 77 | ||||
| -rw-r--r-- | apps/comments/css/vendor/At.js/jquery.atwho.min.css | 1 | ||||
| -rw-r--r-- | apps/comments/js/commentstabview.js | 20 |
4 files changed, 95 insertions, 5 deletions
diff --git a/apps/comments/appinfo/app.php b/apps/comments/appinfo/app.php index cfd695c5163..f6e022e8179 100644 --- a/apps/comments/appinfo/app.php +++ b/apps/comments/appinfo/app.php @@ -27,7 +27,7 @@ $eventDispatcher->addListener( function() { \OCP\Util::addScript('oc-backbone-webdav'); \OCP\Util::addScript('comments', 'merged'); - \OCP\Util::addStyle('comments', 'vendor/At.js/jquery.atwho.min'); + \OCP\Util::addStyle('comments', 'autocomplete'); \OCP\Util::addStyle('comments', 'comments'); } ); diff --git a/apps/comments/css/autocomplete.scss b/apps/comments/css/autocomplete.scss new file mode 100644 index 00000000000..10e56f15420 --- /dev/null +++ b/apps/comments/css/autocomplete.scss @@ -0,0 +1,77 @@ +/** + * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css, + * only changed colors and font-weight + */ + +.atwho-view { + position:absolute; + top: 0; + left: 0; + display: none; + margin-top: 18px; + background: $color-main-background; + color: $color-main-text; + border: 1px solid $color-border; + border-radius: 3px; + box-shadow: 0 0 5px $color-box-shadow; + min-width: 120px; + z-index: 11110 !important; +} + +.atwho-view .atwho-header { + padding: 5px; + margin: 5px; + cursor: pointer; + border-bottom: solid 1px $color-border; + color: $color-main-text; + font-size: 11px; + font-weight: bold; +} + +.atwho-view .atwho-header .small { + color: $color-main-text; + float: right; + padding-top: 2px; + margin-right: -5px; + font-size: 12px; + font-weight: normal; +} + +.atwho-view .atwho-header:hover { + cursor: default; +} + +.atwho-view .cur { + background: $color-primary; + color: $color-primary-text; +} +.atwho-view .cur small { + color: $color-primary-text; +} +.atwho-view strong { + color: $color-main-text; + font-weight: normal; +} +.atwho-view .cur strong { + color: $color-primary-text; + font-weight: normal; +} +.atwho-view ul { + /* width: 100px; */ + list-style:none; + padding:0; + margin:auto; + max-height: 200px; + overflow-y: auto; +} +.atwho-view ul li { + display: block; + padding: 5px 10px; + border-bottom: 1px solid $color-border; + cursor: pointer; +} +.atwho-view small { + font-size: smaller; + color: $color-main-text; + font-weight: normal; +} diff --git a/apps/comments/css/vendor/At.js/jquery.atwho.min.css b/apps/comments/css/vendor/At.js/jquery.atwho.min.css deleted file mode 100644 index f770dc73b3f..00000000000 --- a/apps/comments/css/vendor/At.js/jquery.atwho.min.css +++ /dev/null @@ -1 +0,0 @@ -.atwho-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;color:#000;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:11110!important}.atwho-view .atwho-header{padding:5px;margin:5px;cursor:pointer;border-bottom:solid 1px #eaeff1;color:#6f8092;font-size:11px;font-weight:700}.atwho-view .atwho-header .small{color:#6f8092;float:right;padding-top:2px;margin-right:-5px;font-size:12px;font-weight:400}.atwho-view .atwho-header:hover{cursor:default}.atwho-view .cur{background:#36F;color:#fff}.atwho-view .cur small{color:#fff}.atwho-view strong{color:#36F}.atwho-view .cur strong{color:#fff;font:700}.atwho-view ul{list-style:none;padding:0;margin:auto;max-height:200px;overflow-y:auto}.atwho-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}.atwho-view small{font-size:smaller;color:#777;font-weight:400}
\ No newline at end of file diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js index 125420d7b26..9082706e715 100644 --- a/apps/comments/js/commentstabview.js +++ b/apps/comments/js/commentstabview.js @@ -180,9 +180,23 @@ $target.atwho({ at: '@', callbacks: { - remoteFilter: s._onAutoComplete + remoteFilter: s._onAutoComplete, + highlighter: function (li) { + // misuse the highlighter callback to instead of + // highlighting loads the avatars. + var $li = $(li); + $li.find('.avatar').avatar(undefined, 32); + return $li; + } }, - displayTpl: "<li>${label}</li>", + displayTpl: '<li>' + + '<span class="avatar-name-wrapper">' + + '<div class="avatar" ' + + 'data-username="${id}"' // for avatars + + ' data-user="${id}"' // for contactsmenu + + ' data-user-display-name="${label}"></div>' + + ' <strong>${label}</strong>' + + '</span></li>', insertTpl: '' + '<span class="avatar-name-wrapper">' + '<div class="avatar" ' @@ -229,7 +243,7 @@ callback(data); } ); - }, 200); + }, 400); }, _formatItem: function(commentModel) { |