forked from mystiq/hydrogen-web
adjust message status styling to css grid changes
This commit is contained in:
parent
bbf9832d6a
commit
f82e873da8
6 changed files with 15 additions and 12 deletions
|
@ -15,11 +15,6 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
ul.Timeline > li.messageStatus .Timeline_messageBody > p {
|
||||
font-style: italic;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.Timeline_message {
|
||||
display: grid;
|
||||
grid-template:
|
||||
|
@ -106,6 +101,11 @@ ul.Timeline > li.messageStatus .Timeline_messageBody > p {
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
.Timeline_messageBody.statusMessage {
|
||||
font-style: italic;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.Timeline_messageBody {
|
||||
grid-area: body;
|
||||
line-height: 2.2rem;
|
||||
|
|
|
@ -26,7 +26,7 @@ export class FileView extends TemplateView {
|
|||
t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Cancel`),
|
||||
]));
|
||||
} else {
|
||||
return renderMessage(t, vm, t.p({className: "Timeline_messageBody"}, [
|
||||
return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [
|
||||
t.button({className: "link", onClick: () => vm.download()}, vm => vm.label),
|
||||
t.time(vm.date + " " + vm.time)
|
||||
]));
|
||||
|
|
|
@ -20,6 +20,6 @@ import {renderMessage} from "./common.js";
|
|||
export class MissingAttachmentView extends TemplateView {
|
||||
render(t, vm) {
|
||||
const remove = t.button({className: "link", onClick: () => vm.abortSending()}, vm.i18n`Remove`);
|
||||
return renderMessage(t, vm, t.p({className: "Timeline_messageBody"}, [vm.label, " ", remove]));
|
||||
return renderMessage(t, vm, t.p({className: "Timeline_messageBody statusMessage"}, [vm.label, " ", remove]));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,7 +21,7 @@ export class RedactedView extends TemplateView {
|
|||
render(t, vm) {
|
||||
const cancelButton = t.if(vm => vm.isRedacting, t => t.button({onClick: () => vm.abortPendingRedaction()}, "Cancel"));
|
||||
return renderMessage(t, vm,
|
||||
t.p({className: "Timeline_messageBody"}, [vm => vm.description, " ", cancelButton])
|
||||
t.p({className: "Timeline_messageBody statusMessage"}, [vm => vm.description, " ", cancelButton])
|
||||
);
|
||||
}
|
||||
}
|
|
@ -22,9 +22,13 @@ import {renderMessage} from "./common.js";
|
|||
export class TextMessageView extends TemplateView {
|
||||
render(t, vm) {
|
||||
const bodyView = t.mapView(vm => vm.body, body => new BodyView(body));
|
||||
return renderMessage(t, vm,
|
||||
t.p({className: "Timeline_messageBody"}, [bodyView, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)])
|
||||
);
|
||||
return renderMessage(t, vm, t.p({
|
||||
className: "Timeline_messageBody",
|
||||
statusMessage: vm => vm.shape === "message-status"
|
||||
}, [
|
||||
bodyView,
|
||||
t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)
|
||||
]));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -24,7 +24,6 @@ export function renderMessage(t, vm, body) {
|
|||
unsent: vm.isUnsent,
|
||||
unverified: vm.isUnverified,
|
||||
continuation: vm => vm.isContinuation,
|
||||
messageStatus: vm => vm.shape === "message-status" || vm.shape === "missing-attachment" || vm.shape === "file" || vm.shape === "redacted",
|
||||
};
|
||||
return t.li({className: classes}, [
|
||||
t.if(vm => !vm.isContinuation, t => renderStaticAvatar(vm, 30, "Timeline_messageAvatar")),
|
||||
|
|
Loading…
Reference in a new issue