playground
/
gogs
mirror of https://github.com/gogits/gogs.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add modal to change username 

Signed-off-by: Unknwon <joe2010xtmf@163.com>
pull/511/head
Unknwon 10 years ago
parent
b8368f98ff
commit
ad2ab6d214
10 changed files with 442 additions and 12 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      conf/locale/locale_en-US.ini
  2. 4
      conf/locale/locale_zh-CN.ini
  3. 368
      public/ng/css/magnific-popup.css
  4. 11
      public/ng/css/ui.css
  5. 26
      public/ng/js/gogs.js
  6. 4
      public/ng/js/lib/jquery.magnific-popup.min.js
  7. 10
      public/ng/js/min/gogs-min.js
  8. 14
      public/ng/less/ui/alert.less
  9. 2
      templates/ng/base/head.tmpl
  10. 9
      templates/user/settings/profile.tmpl

4
conf/locale/locale_en-US.ini
Unescape View File

@ -191,6 +191,10 @@ website = Website
location = Location
update_profile = Update Profile
update_profile_success = Your profile has been successfully updated.
change_username = Username Changed
change_username_desc = Username has been changed, do you want to continue? This will affect all links relate to your account.
continue = Continue
cancel = Cancel
change_password = Change Password
old_password = Current Password

4
conf/locale/locale_zh-CN.ini
Unescape View File

@ -191,6 +191,10 @@ website = 个人网站
location = 所在地区
update_profile = 更新信息
update_profile_success = 您的个人信息更新成功！
change_username = 用户名将被修改
change_username_desc = 用户名被修改，您确定要继续操作吗？这将会影响到所有与您帐户有关的链接。
continue = 继续操作
cancel = 取消操作
change_password = 修改密码
old_password = 当前密码

368
public/ng/css/magnific-popup.css
Unescape View File

@ -0,0 +1,368 @@
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
filter: alpha(opacity=65);
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
filter: alpha(opacity=65);
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1;
filter: alpha(opacity=100); }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid white;
margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px;
border-right: 27px solid #3f3f3f; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid white;
margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444444; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-figure figure {
margin: 0; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }

11
public/ng/css/ui.css
Unescape View File

@ -796,6 +796,17 @@ ul.menu-radius > li:last-child > a {
border: 1px solid #b05c10;
background-color: #fcecdd;
}
.white-popup-block {
background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
}
.white-popup-block p {
font-size: 14px;
}
table th,
table td {
padding: .3em .6em;

26
public/ng/js/gogs.js
Unescape View File

@ -297,9 +297,31 @@ function initCore() {
function initUserSetting() {
// Confirmation of change username in user profile page.
$('#user-profile-form').submit(function (e) {
var $username = $('#username');
if (($username.data('uname') != $username.val()) && !confirm('Username has been changed, do you want to continue?')) {
var $form = $('#user-profile-form');
var confimed = false;
$('.popup-modal').magnificPopup({
modal: true,
callbacks: {
open: function () {
if (($username.data('uname') == $username.val())) {
$.magnificPopup.close();
$form.submit();
}
}
}
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
$('#modal-submit').click(function(){
$.magnificPopup.close();
confimed = true;
$form.submit();
});
$form.submit(function (e) {
if (($username.data('uname') != $username.val()) && !confimed) {
e.preventDefault();
return true;
}

4
public/ng/js/lib/jquery.magnific-popup.min.js vendored
View File

File diff suppressed because one or more lines are too long

10
public/ng/js/min/gogs-min.js vendored
View File

File diff suppressed because one or more lines are too long

14
public/ng/less/ui/alert.less
Unescape View File

@ -41,7 +41,15 @@
border: 1px solid darken(@alertOrangeColor,10%);
background-color: lighten(@alertOrangeColor,45%);
}
.white-popup-block {
background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
p {
font-size: 14px;
}
}

2
templates/ng/base/head.tmpl
Unescape View File

@ -24,12 +24,14 @@
<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/ui.css">
<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/gogs.css">
<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/tipsy.css">
<link rel="stylesheet" href="{{AppSubUrl}}/ng/css/magnific-popup.css">
<link rel="stylesheet" href="{{AppSubUrl}}/ng/fonts/octicons.css">
<link rel="stylesheet" href="{{AppSubUrl}}/css/github.min.css">
<!-- JavaScript -->
<script src="{{AppSubUrl}}/ng/js/lib/lib.js"></script>
<script src="{{AppSubUrl}}/ng/js/lib/jquery.tipsy.js"></script>
<script src="{{AppSubUrl}}/ng/js/lib/jquery.magnific-popup.min.js"></script>
<script src="{{AppSubUrl}}/ng/js/utils/tabs.js"></script>
<script src="{{AppSubUrl}}/ng/js/utils/preview.js"></script>
<script src="{{AppSubUrl}}/ng/js/gogs.js"></script>

9
templates/user/settings/profile.tmpl
Unescape View File

@ -22,6 +22,13 @@
<label class="req" for="username">{{.i18n.Tr "username"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_UserName}}ipt-error{{end}}" id="username" name="uname" type="text" value="{{.SignedUser.Name}}" data-uname="{{.SignedUser.Name}}" required />
</div>
<div class="white-popup-block mfp-hide" id="change-username-modal">
<h1 class="text-red">{{.i18n.Tr "settings.change_username"}}</h1>
<p>{{.i18n.Tr "settings.change_username_desc"}}</p>
<br>
<button class="btn btn-red btn-large btn-radius" id="modal-submit">{{.i18n.Tr "settings.continue"}}</button>
<button class="btn btn-large btn-radius popup-modal-dismiss">{{.i18n.Tr "settings.cancel"}}</button>
</div>
<div class="field">
<label for="full-name">{{.i18n.Tr "settings.full_name"}}</label>
<input class="ipt ipt-large ipt-radius {{if .Err_FullName}}ipt-error{{end}}" id="full-name" name="fullname" type="text" value="{{.SignedUser.FullName}}" />
@ -44,7 +51,7 @@
</div>
<div class="field">
<label></label>
<button class="btn btn-green btn-large btn-radius">{{.i18n.Tr "settings.update_profile"}}</button>
<button class="btn btn-green btn-large btn-radius popup-modal" href="#change-username-modal">{{.i18n.Tr "settings.update_profile"}}</button>
</div>
</form>
</div>

Write Preview
Loading…
Cancel
Save