commento.{js,scss}: add login button in textarea

Closes https://gitlab.com/commento/commento-ce/issues/64
This commit is contained in:
Adhityaa Chandrasekar 2018-08-08 13:48:08 +05:30
parent 88b88a1198
commit b6dc79edd7
2 changed files with 36 additions and 9 deletions

View File

@ -391,19 +391,31 @@
if (!isAuthenticated && !chosenAnonymous) { if (!isAuthenticated && !chosenAnonymous) {
var buttonsContainer = create("div"); var buttonsContainer = create("div");
var question = create("div");
var buttons = create("div");
var createButton = create("div"); var createButton = create("div");
var loginButton = create("div");
classAdd(buttonsContainer, "create-container"); classAdd(buttonsContainer, "account-buttons-container");
classAdd(question, "account-buttons-question");
classAdd(buttons, "account-buttons");
classAdd(createButton, "button"); classAdd(createButton, "button");
classAdd(createButton, "create-button"); classAdd(createButton, "create-button");
classAdd(loginButton, "button");
classAdd(loginButton, "login-button");
attrSet(createButton, "onclick", "loginBoxShow()"); attrSet(createButton, "onclick", "loginBoxShow()");
attrSet(loginButton, "onclick", "loginBoxShow(); loginSwitch(true);");
attrSet(textarea, "disabled", true); attrSet(textarea, "disabled", true);
createButton.innerText = "Create an Account"; createButton.innerText = "Create an Account";
loginButton.innerText = "Login";
question.innerText = "Want to add to the discussion?";
append(buttonsContainer, createButton); append(buttons, createButton);
append(buttons, loginButton);
append(buttonsContainer, buttons);
append(textareaContainer, question);
append(textareaContainer, buttonsContainer); append(textareaContainer, buttonsContainer);
} }
else { else {
@ -1077,7 +1089,7 @@
} }
global.loginSwitch = function() { global.loginSwitch = function(leaveOauth) {
var header = $(ID_LOGIN_BOX_HEADER); var header = $(ID_LOGIN_BOX_HEADER);
var subtitle = $(ID_LOGIN_BOX_SUBTITLE); var subtitle = $(ID_LOGIN_BOX_SUBTITLE);
var loginLink = $(ID_LOGIN_BOX_LOGIN_LINK); var loginLink = $(ID_LOGIN_BOX_LOGIN_LINK);
@ -1093,7 +1105,7 @@
loginBoxType = "login"; loginBoxType = "login";
if (configuredOauths.length > 0) { if (leaveOauth !== true && configuredOauths.length > 0) {
remove(hr); remove(hr);
remove(oauthPretext); remove(oauthPretext);
remove(oauthButtonsContainer); remove(oauthButtonsContainer);

View File

@ -52,7 +52,8 @@ textarea {
} }
.commento-oauth-buttons, .commento-oauth-buttons,
.commento-create-container { .commento-account-buttons,
.commento-account-buttons-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -60,12 +61,21 @@ textarea {
z-index: 1; z-index: 1;
} }
.commento-account-buttons {
flex-direction: row;
}
.commento-account-buttons-container {
padding-bottom: 10px;
}
.commento-oauth-buttons { .commento-oauth-buttons {
display: contents; display: contents;
} }
.commento-create-container::before { .commento-account-buttons-question {
content: "Want to add to the discussion?"; position: absolute;
top: 25px;
display: block; display: block;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
@ -139,10 +149,15 @@ textarea {
} }
.commento-create-button { .commento-create-button {
width: 150px; width: 120px;
background: $pink-9; background: $pink-9;
} }
.commento-login-button {
width: 50px;
background: $cyan-9;
}
.commento-submit-button { .commento-submit-button {
float: right; float: right;
background: $indigo-7; background: $indigo-7;