Skip to content

Commit

Permalink
NXP-27981: rename some css classes and identifiers
Browse files Browse the repository at this point in the history
  • Loading branch information
Nuno Cunha committed Nov 15, 2019
1 parent 76dc44d commit 96079e6
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 119 deletions.
68 changes: 16 additions & 52 deletions elements/nuxeo-document-comments/nuxeo-document-comment-thread.js
View file
Expand Up @@ -28,6 +28,7 @@ import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-tooltip.js';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-user-avatar.js';
// eslint-disable-next-line import/no-cycle
import './nuxeo-document-comment.js';
import './nuxeo-document-comments-styles.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';

Expand All @@ -38,67 +39,24 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
*/
Polymer({
_template: html`
<style include="nuxeo-styles">
:host {
display: block;
}
.main-option {
height: 1.5em;
width: 1.5em;
cursor: pointer;
opacity: 0.5;
}
.more-content {
color: var(--nuxeo-secondary-color, #1f28bf);
cursor: pointer;
font-size: 0.86em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.reply-area {
margin: 5px 0;
@apply --layout-horizontal;
@apply --layout-end;
}
paper-textarea {
width: 100%;
--paper-input-container-input: {
font-size: 1em;
line-height: var(--nuxeo-comment-line-height, 20px);
}
--paper-input-container-color: var(--secondary-text-color, #939caa);
--iron-autogrow-textarea-placeholder: {
color: var(--secondary-text-color, #939caa);
font-size: 0.86em;
}
}
</style>
<style include="nuxeo-document-comments-styles"></style>
<nuxeo-connection id="nxcon" user="{{currentUser}}"></nuxeo-connection>
<nuxeo-resource id="commentRequest" path="/id/[[uid]]/@comment/"></nuxeo-resource>
<template is="dom-if" if="[[_moreAvailable(comments.length, total, allCommentsLoaded)]]">
<span class="more-content" on-tap="_loadMore">[[_computeTextLabel(level, 'loadAll', total, i18n)]]</span>
<span class="more-content no-selection pointer smaller" on-tap="_loadMore"
>[[_computeTextLabel(level, 'loadAll', total, i18n)]]</span
>
</template>
<template id="commentList" is="dom-repeat" items="[[comments]]" as="comment">
<nuxeo-document-comment comment="{{comment}}" level="[[level]]"></nuxeo-document-comment>
</template>
<template is="dom-if" if="[[_allowReplies(level)]]">
<div class="reply-area">
<div class="input-area">
<paper-textarea
id="replyContainer"
id="inputContainer"
placeholder="[[_computeTextLabel(level, 'writePlaceholder', null, i18n)]]"
value="{{reply}}"
max-rows="[[_computeMaxRows()]]"
Expand All @@ -107,9 +65,15 @@ Polymer({
>
</paper-textarea>
<template is="dom-if" if="[[!_isBlank(reply)]]">
<iron-icon id="submit" name="submit" class="main-option" icon="check" on-tap="_submitReply"></iron-icon>
<iron-icon
id="submit"
name="submit"
class="main-option opaque"
icon="check"
on-tap="_submitReply"
></iron-icon>
<nuxeo-tooltip for="submit">[[i18n('comments.submit.tooltip')]]</nuxeo-tooltip>
<iron-icon name="clear" class="main-option" icon="clear" on-tap="_clearReply"></iron-icon>
<iron-icon name="clear" class="main-option opaque" icon="clear" on-tap="_clearReply"></iron-icon>
</template>
</div>
</template>
Expand Down Expand Up @@ -173,7 +137,7 @@ Polymer({
},

focusInput() {
this.$$('#replyContainer').focus();
this.$$('#inputContainer').focus();
},

_checkForEnter(e) {
Expand Down
72 changes: 8 additions & 64 deletions elements/nuxeo-document-comments/nuxeo-document-comment.js
View file
Expand Up @@ -31,6 +31,7 @@ import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-dialog.js';
import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-tooltip.js';
// eslint-disable-next-line import/no-cycle
import './nuxeo-document-comment-thread.js';
import './nuxeo-document-comments-styles.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
Expand All @@ -42,9 +43,8 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
*/
Polymer({
_template: html`
<style include="nuxeo-styles">
<style include="nuxeo-document-comments-styles">
:host {
display: block;
margin-top: 5px;
}
Expand All @@ -58,57 +58,16 @@ Polymer({
margin-right: 5px;
}
.horizontal {
@apply --layout-horizontal;
}
.info {
margin-left: 10px;
@apply --layout-vertical;
@apply --layout-flex;
}
.link {
cursor: pointer;
}
.main-option {
height: 1.5em;
width: 1.5em;
cursor: pointer;
}
.more-content {
color: var(--nuxeo-secondary-color, #1f28bf);
}
.no-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.opaque {
opacity: 0.5;
}
.reply-area {
margin: 5px 0;
@apply --layout-horizontal;
@apply --layout-end;
}
.separator {
margin: 0 5px;
}
.smaller {
font-size: 0.86em;
}
.text {
display: inline;
}
Expand Down Expand Up @@ -156,21 +115,6 @@ Polymer({
background-color: transparent;
}
}
paper-textarea {
width: 100%;
--paper-input-container-input: {
font-size: 1em;
line-height: var(--nuxeo-comment-line-height, 20px);
}
--paper-input-container-color: var(--secondary-text-color, #939caa);
--iron-autogrow-textarea-placeholder: {
color: var(--secondary-text-color, #939caa);
font-size: 0.86em;
}
}
</style>
<nuxeo-connection id="nxcon" user="{{currentUser}}"></nuxeo-connection>
Expand Down Expand Up @@ -224,7 +168,7 @@ Polymer({
<div class="text">
<span inner-h-t-m-l="[[_computeTextToDisplay(comment.text, maxChars, truncated)]]"></span>
<template is="dom-if" if="[[truncated]]">
<span class="smaller opaque link" on-tap="_showFullComment">[[i18n('comments.showAll')]]</span>
<span class="smaller opaque pointer" on-tap="_showFullComment">[[i18n('comments.showAll')]]</span>
</template>
<template is="dom-if" if="[[!truncated]]">
<iron-icon
Expand All @@ -238,9 +182,9 @@ Polymer({
</div>
</template>
<template is="dom-if" if="[[editing]]">
<div class="reply-area">
<div class="input-area">
<paper-textarea
id="replyContainer"
id="inputContainer"
placeholder="[[_computeTextLabel(level, 'writePlaceholder', null, i18n)]]"
value="{{text}}"
max-rows="[[_computeMaxRows()]]"
Expand All @@ -263,7 +207,7 @@ Polymer({
</template>
<template is="dom-if" if="[[_isSummaryVisible(comment.expanded, comment.numberOfReplies)]]">
<div id="summary" class="horizontal smaller">
<span class="more-content link no-selection" on-tap="_expand"
<span class="more-content pointer no-selection" on-tap="_expand"
>[[i18n('comments.numberOfReplies', comment.numberOfReplies)]]</span
>
<span class="separator opaque">•</span>
Expand Down Expand Up @@ -353,7 +297,7 @@ Polymer({
_editComment() {
this._setEditing(true);
afterNextRender(this, function() {
this.$$('#replyContainer').focus();
this.$$('#inputContainer').focus();
});
},

Expand Down Expand Up @@ -390,7 +334,7 @@ Polymer({
this.$.commentRequest.data = {
'entity-type': 'comment',
parentId: this.comment.parentId,
text: this.$$('#replyContainer').value.trim(),
text: this.$$('#inputContainer').value.trim(),
};

this.$.commentRequest
Expand Down
95 changes: 95 additions & 0 deletions elements/nuxeo-document-comments/nuxeo-document-comments-styles.js
View file
@@ -0,0 +1,95 @@
/**
@license
(C) Copyright Nuxeo Corp. (http://nuxeo.com/)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { html } from '@polymer/polymer/lib/utils/html-tag.js';

/*
Styles module to be used by elements related to document's comment feature, providing styles to common needs.
Custom property | Description | Default
----------------|-------------|----------
`--nuxeo-comment-line-height` | Text color for the label | 20
`--nuxeo-comment-max-height` | Background color of added values | 80
*/
const template = html`
<dom-module id="nuxeo-document-comments-styles">
<template>
<style include="nuxeo-styles">
:host {
display: block;
}
.horizontal {
@apply --layout-horizontal;
}
.main-option {
height: 1.5em;
width: 1.5em;
cursor: pointer;
}
.more-content {
color: var(--nuxeo-secondary-color, #1f28bf);
}
.no-selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.opaque {
opacity: 0.5;
}
.pointer {
cursor: pointer;
}
.input-area {
margin: 5px 0;
@apply --layout-horizontal;
@apply --layout-end;
}
.smaller {
font-size: 0.86em;
}
paper-textarea {
width: 100%;
--paper-input-container-input: {
font-size: 1em;
line-height: var(--nuxeo-comment-line-height, 20px);
}
--paper-input-container-color: var(--secondary-text-color, #939caa);
--iron-autogrow-textarea-placeholder: {
color: var(--secondary-text-color, #939caa);
font-size: 0.86em;
}
}
</style>
</template>
</dom-module>
`;

document.head.appendChild(template.content);
6 changes: 3 additions & 3 deletions packages/nuxeo-web-ui-ftest/pages/ui/browser/document_comment_thread.js
View file
Expand Up @@ -18,7 +18,7 @@ export default class DocumentCommentThread extends BasePage {
}

get writingArea() {
return this.el.element('#replyContainer');
return this.el.element('#inputContainer');
}

getComment(text, user) {
Expand All @@ -37,7 +37,7 @@ export default class DocumentCommentThread extends BasePage {
this.writingArea.scrollIntoView();
this.writingArea.click();
fixtures.layouts.setValue(this.writingArea, text);
this.el.element('.reply-area iron-icon[name="submit"]').waitForVisible();
this.el.element('.reply-area iron-icon[name="submit"]').click();
this.el.element('.input-area iron-icon[name="submit"]').waitForVisible();
this.el.element('.input-area iron-icon[name="submit"]').click();
}
}

0 comments on commit 96079e6

Please sign in to comment.