Commits

Sachirou Inoue committed e6a2369

Add logout process and logout UI.

Comments (0)

Files changed (14)

UserControl/UserControl.csproj

       <DependentUpon>insert.aspx</DependentUpon>
     </Compile>
     <Compile Include="Login.cs" />
+    <Compile Include="logout.aspx.cs">
+      <DependentUpon>logout.aspx</DependentUpon>
+      <SubType>ASPXCodeBehind</SubType>
+    </Compile>
+    <Compile Include="logout.aspx.designer.cs">
+      <DependentUpon>logout.aspx</DependentUpon>
+    </Compile>
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="update.aspx.cs">
       <DependentUpon>update.aspx</DependentUpon>
     <Content Include="confirm.aspx" />
     <Content Include="delete.aspx" />
     <Content Include="insert.aspx" />
+    <Content Include="logout.aspx" />
     <Content Include="script\script.js" />
     <Content Include="script\script.min.js" />
     <Content Include="style\style.css" />

UserControl/confirm.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">確認 | UserControl</div>
+    <div id="header">
+        <h1>確認 | UserControl</h1>
+        <div id="headerMenu">
+            Menu
+            <ul id="headerMenuSlidedown">
+                <li class="headerMenuItem"><a href="view.aspx">メイン</a></li>
+                <li class="headerMenuItem"><a href="logout.aspx">Logout</a></li>
+            </ul>
+        </div>
+    </div>
     <asp:Label ID="LabelNotification" runat="server" Text=""></asp:Label>
     <div id="main">
         <div id="userForm">

UserControl/delete.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">削除 | UserControl</div>
+    <div id="header">
+        <h1>削除 | UserControl</h1>
+        <div id="headerMenu">
+            Menu
+            <ul id="headerMenuSlidedown">
+                <li class="headerMenuItem"><a href="view.aspx">メイン</a></li>
+                <li class="headerMenuItem"><a href="logout.aspx">Logout</a></li>
+            </ul>
+        </div>
+    </div>
     <asp:Label ID="LabelNotification" runat="server" Text=""></asp:Label>
     <div id="main">
         <div id="userForm">

UserControl/index.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">UserControl</div>
+    <div id="header"><h1>UserControl</h1></div>
     <asp:Label ID="LabelNotification" runat="server" Text=""></asp:Label>
     <div id="main">
         <div id="loginForm">

UserControl/insert.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">追加 | UserControl</div>
+    <div id="header">
+        <h1>追加 | UserControl</h1>
+        <div id="headerMenu">
+            Menu
+            <ul id="headerMenuSlidedown">
+                <li class="headerMenuItem"><a href="view.aspx">メイン</a></li>
+                <li class="headerMenuItem"><a href="logout.aspx">Logout</a></li>
+            </ul>
+        </div>
+    </div>
     <div id="main">
         <div id="userForm">
             <div class="userFormItem">
         <div id="footer">footer</div>
     </div>
     </form>
+    <script src="script/script.min.js" type="text/javascript"></script>
 </body>
 </html>

UserControl/logout.aspx

+<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="logout.aspx.cs" Inherits="UserControl.logout" %>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" >
+<head runat="server">
+    <title>logout | UserControl</title>
+</head>
+<body>
+    <form id="form1" runat="server">
+    <div>
+    
+    </div>
+    </form>
+</body>
+</html>

UserControl/logout.aspx.cs

+using System;
+
+namespace UserControl
+{
+    public partial class logout : System.Web.UI.Page
+    {
+        protected void Page_Load(object sender, EventArgs e)
+        {
+            new Login(Session).Logout();
+            Response.Redirect("index.aspx");
+        }
+    }
+}

UserControl/logout.aspx.designer.cs

+//------------------------------------------------------------------------------
+// <auto-generated>
+//     このコードはツールによって生成されました。
+//     ランタイム バージョン:2.0.50727.5456
+//
+//     このファイルへの変更は、以下の状況下で不正な動作の原因になったり、
+//     コードが再生成されるときに損失したりします。
+// </auto-generated>
+//------------------------------------------------------------------------------
+
+namespace UserControl {
+    
+    
+    public partial class logout {
+        
+        /// <summary>
+        /// form1 コントロール。
+        /// </summary>
+        /// <remarks>
+        /// 自動生成されたフィールド。
+        /// 変更するには、フィールドの宣言をデザイナ ファイルから分離コード ファイルに移動します。
+        /// </remarks>
+        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
+    }
+}

UserControl/script/script.js

  * Fadeout the node.
  * @param {Element} node
  */
-function fadeout (node) {
+function hideFadeout (node) {
   var stop,
-      opacity = node.style.opacity || 1;
+      opacity = parseFloat(node.style.opacity) || 1;
 
   stop = animate(function () {
-    opacity -= 0.007;
+    opacity -= 0.01;
     node.style.opacity = opacity;
     if (opacity <= 0) {
       stop();
   });
 }
 
+function showSlidedown (node) {
+  var stop,
+      height = 0;
+
+  node.style.display = 'block';
+  node.style.overflow = 'hidden';
+  node.style.height = '0%';
+  stop = animate(function () {
+    height += 10;
+    node.style.height = height + '%';
+    if (height >= 100) {
+      stop();
+    }
+  });
+}
+
+function hideSlideup (node) {
+  var stop,
+      height = parseInt(_window.getComputedStyle(node).height),
+      step = ~~(height / 10);
+
+  node.style.overflow = 'hidden';
+  stop = animate(function () {
+    height -= step;
+    node.style.height = height + 'px';
+    if (height <= 0) {
+      stop();
+      node.style.display = 'none';
+    }
+  });
+}
+
+
+var nodeHeaderMenu = _document.getElementById('headerMenu'),
+    nodeHeaderMenuSlidedown = _document.getElementById('headerMenuSlidedown');
+
 function notify () {
   var notifyNode = _document.getElementById('LabelNotification');
 
   _window.setTimeout(function () { fadeout(notifyNode); }, 2000);
 }
 
+function toggleHeaderMenu () {
+  if (nodeHeaderMenuSlidedown.style.display === 'block') {
+    hideSlideup(nodeHeaderMenuSlidedown);
+  } else {
+    showSlidedown(nodeHeaderMenuSlidedown);
+  }
+}
+
 notify();
+nodeHeaderMenu.addEventListener('click', toggleHeaderMenu);
+// _document.body.addEventListener('click', function (evt) {
+//   var headerMenuStyle = _window.getComputedStyle(nodeHeaderMenu);
+//
+//   console.log(_window.innerWidth - headerMenuStyle.width > evt.clientX);
+//   console.log(headerMenuStyle.height < evt.clientY);
+//   if (_window.innerWidth - headerMenuStyle.width > evt.clientX &&
+//       headerMenuStyle.height < evt.clientY) {
+//     hideHeaderMenu();
+//   }
+// });
 
 }(window, document));

UserControl/script/script.min.js

-(function(a,h){function i(b){var d,e,g;if(c){g=function(){b();c(g)};d=c(g);e=function(){f(d)}}else{g=function(){b()};d=setInterval(g,16);e=function(){clearInterval(d)}}return e}function j(b){var d,e=b.style.opacity||1;d=i(function(){e-=0.0070;b.style.opacity=e;if(e<=0){d();b.style.display="none"}})}var c,f;if(a.requestAnimationFrame&&a.cancelAnimationFrame){c=a.requestAnimationFrame;f=a.cancelAnimationFrame}else if(a.mozRequestAnimationFrame&&a.mozCancelAnimationFrame){c=a.mozRequestAnimationFrame;
-f=a.mozCancelAnimationFrame}else if(a.msRequestAnimationFrame&&a.msCancelAnimationFrame){c=a.msRequestAnimationFrame;f=a.msCancelAnimationFrame}else if(a.webkitRequestAnimationFrame&&a.webkitCancelAnimationFrame){c=a.webkitRequestAnimationFrame;f=a.webkitCancelAnimationFrame}else if(a.oRequestAnimationFrame&&a.oCancelAnimationFrame){c=a.oRequestAnimationFrame;f=a.oCancelAnimationFrame}if(!String.prototype.trim)String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")};(function(){var b=
-h.getElementById("LabelNotification");if(!(!b||b.innerHTML.trim()==="")){b.style.display="block";b.style.opacity=0.9;a.setTimeout(function(){j(b)},2E3)}})()})(window,document);
+(function(a,h){function j(b){var d,c,f;if(e){f=function(){b();e(f)};d=e(f);c=function(){g(d)}}else{f=function(){b()};d=setInterval(f,16);c=function(){clearInterval(d)}}return c}function k(b){var d,c=0;b.style.display="block";b.style.overflow="hidden";b.style.height="0%";d=j(function(){c+=10;b.style.height=c+"%";c>=100&&d()})}function l(b){var d,c=parseInt(a.getComputedStyle(b).height),f=~~(c/10);b.style.overflow="hidden";d=j(function(){c-=f;b.style.height=c+"px";if(c<=0){d();b.style.display="none"}})}
+var e,g;if(a.requestAnimationFrame&&a.cancelAnimationFrame){e=a.requestAnimationFrame;g=a.cancelAnimationFrame}else if(a.mozRequestAnimationFrame&&a.mozCancelAnimationFrame){e=a.mozRequestAnimationFrame;g=a.mozCancelAnimationFrame}else if(a.msRequestAnimationFrame&&a.msCancelAnimationFrame){e=a.msRequestAnimationFrame;g=a.msCancelAnimationFrame}else if(a.webkitRequestAnimationFrame&&a.webkitCancelAnimationFrame){e=a.webkitRequestAnimationFrame;g=a.webkitCancelAnimationFrame}else if(a.oRequestAnimationFrame&&
+a.oCancelAnimationFrame){e=a.oRequestAnimationFrame;g=a.oCancelAnimationFrame}if(!String.prototype.trim)String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")};var m=h.getElementById("headerMenu"),i=h.getElementById("headerMenuSlidedown");(function(){var b=h.getElementById("LabelNotification");if(!(!b||b.innerHTML.trim()==="")){b.style.display="block";b.style.opacity=0.9;a.setTimeout(function(){fadeout(b)},2E3)}})();m.addEventListener("click",function(){i.style.display===
+"block"?l(i):k(i)})})(window,document);

UserControl/style/style.min.css

-body{font-family:sans;font-size:10pt}form .error{box-shadow:1px 1px 2px black, 2px 2px 3px black !important;color:red;display:block !important;line-height:1.2em}#header{background:black;background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#666));background:-moz-linear-gradient(top, #000, #666);background:-o-linear-gradient(top, #000, #666);background:linear-gradient(top, #000, #666);color:white;font-size:20px;line-height:50px;left:0;height:50px;position:fixed;text-align:center;top:0;width:100%;z-index:1000}#LabelNotification{background:-webkit-gradient(linear, left top, left bottom, from(#6cf), to(#28a));background:-moz-linear-gradient(top, #6cf, #28a);background:-o-linear-gradient(top, #6cf, #28a);background:linear-gradient(top, #6cf, #28a);background:#6cf;border-radius:6px;box-shadow:0 -1px 2px #fff;display:none;height:18px;left:50%;line-height:18px;margin-left:-400px;position:fixed;text-align:center;width:800px;z-index:1001}#main{position:relative;top:50px}#footer{clear:both;font-size:smaller;bottom:0;border-top:solid 1px gray;margin:10px;padding:10px;position:relative;text-align:right}#loginForm{box-shadow:0 0 1px black, 1px 1px 2px black;height:300px;margin:10px auto 0 auto;padding:10px;position:relative;width:400px}#loginForm .loginFormItem{clear:both;height:2em;width:100%}#loginForm .loginFormItem .loginFormItemName{float:left;width:4em}#loginForm .loginFormItem .loginFormItemInput{float:left}#loginForm #ButtonLogin{bottom:10px;clear:both;position:absolute;right:10px}#usersView{border-collapse:collapse;margin:0 auto;position:relative;width:800px}#usersView tr{height:18px}#usersView th,#usersView td{height:100%;line-height:18px;padding:0}#usersView td{border-top:1px solid #ccc}#usersView th:nth-child(2n-1),#usersView td:nth-child(2n-1){background:#cff}#usersView .usersViewOrder{color:black;text-decoration:none}#usersView .usersViewOrder:hover,#usersView .usersViewOrder:focus{color:#33f}#usersView .usersViewOrder:active{color:#f33}#usersViewSearch,#usersViewAdd{margin:10px auto;width:800px}#LabelPageNumbers{display:block;margin:10px auto 0 auto;position:relative;width:800px}#LabelPageNumbers .pageNumber{box-shadow:0 0 1px black;display:block;float:left;height:18px;line-height:18px;margin:3px;position:relative;text-align:center;width:18px}#LabelPageNumbers a.pageNumber{color:black;text-decoration:none}#LabelPageNumbers a.pageNumber:hover,#LabelPageNumbers a.pageNumber:focus{background:#ccc}#LabelPageNumbers a.pageNumber:active{background:#fcc}#LabelPageNumbers .currentPageNumber{background:#6cf}#userForm{box-shadow:0 0 1px black, 1px 1px 2px black;height:400px;margin:10px auto 0 auto;padding:10px;position:relative;width:600px}#userForm .userFormItem{clear:both;height:2em;margin:10px 0;width:100%}#userForm .userFormItem .userFormItemName{float:left;width:4em}#userForm .userFormItem .userFormItemInput{float:left}#userForm .userFormItem .userFormItemInput input{margin-bottom:5px;width:20em}#userForm #ButtonUserForm{bottom:10px;clear:both;position:absolute;right:10px}
+body{font-family:sans;font-size:10pt}form .error{box-shadow:1px 1px 2px black, 2px 2px 3px black !important;color:red;display:block !important;line-height:1.2em}#header{background:black;background:-webkit-gradient(linear, left top, left bottom, from(#000), to(#666));background:-moz-linear-gradient(top, #000, #666);background:-o-linear-gradient(top, #000, #666);background:linear-gradient(top, #000, #666);color:white;line-height:50px;left:0;height:50px;position:fixed;top:0;width:100%;z-index:1000}#header h1{font-size:20px;font-weight:normal;line-height:50px;margin:0;height:100%;padding:0;text-align:center}#header #headerMenu{border-left:1px solid #ccc;cursor:pointer;display:block;line-height:50px;height:50px;position:absolute;right:0;text-align:center;top:0;width:6em}#header #headerMenuSlidedown{display:none;height:3em;margin:0;padding:0;position:absolute;right:0;top:50px;width:6em}#header #headerMenuSlidedown .headerMenuItem{border-top:1px solid #ccc;display:block;height:1.5em;margin:0;padding:0;width:100%}#header #headerMenuSlidedown .headerMenuItem a{background:black;background:rgba(0,0,0,0.8);color:inherit;display:block;height:100%;line-height:1.5em;text-align:center;text-decoration:none;width:100%}#header #headerMenuSlidedown .headerMenuItem a:hover,#header #headerMenuSlidedown .headerMenuItem a:focus{background:#333;background:rgba(64,64,64,0.8)}#LabelNotification{background:-webkit-gradient(linear, left top, left bottom, from(#6cf), to(#28a));background:-moz-linear-gradient(top, #6cf, #28a);background:-o-linear-gradient(top, #6cf, #28a);background:linear-gradient(top, #6cf, #28a);background:#6cf;border-radius:6px;box-shadow:0 -1px 2px #fff;display:none;height:18px;left:50%;line-height:18px;margin-left:-400px;position:fixed;text-align:center;width:800px;z-index:1001}#main{position:relative;top:50px}#footer{clear:both;font-size:smaller;bottom:0;border-top:solid 1px gray;margin:10px;padding:10px;position:relative;text-align:right}#loginForm{box-shadow:0 0 1px black, 1px 1px 2px black;height:300px;margin:10px auto 0 auto;padding:10px;position:relative;width:400px}#loginForm .loginFormItem{clear:both;height:2em;width:100%}#loginForm .loginFormItem .loginFormItemName{float:left;width:4em}#loginForm .loginFormItem .loginFormItemInput{float:left}#loginForm #ButtonLogin{bottom:10px;clear:both;position:absolute;right:10px}#usersView{border-collapse:collapse;margin:0 auto;position:relative;width:800px}#usersView tr{height:18px}#usersView th,#usersView td{height:100%;line-height:18px;padding:0}#usersView td{border-top:1px solid #ccc}#usersView th:nth-child(2n-1),#usersView td:nth-child(2n-1){background:#cff}#usersView .usersViewOrder{color:black;text-decoration:none}#usersView .usersViewOrder:hover,#usersView .usersViewOrder:focus{color:#33f}#usersView .usersViewOrder:active{color:#f33}#usersViewSearch,#usersViewAdd{margin:10px auto;width:800px}#LabelPageNumbers{display:block;margin:10px auto 0 auto;position:relative;width:800px}#LabelPageNumbers .pageNumber{box-shadow:0 0 1px black;display:block;float:left;height:18px;line-height:18px;margin:3px;position:relative;text-align:center;width:18px}#LabelPageNumbers a.pageNumber{color:black;text-decoration:none}#LabelPageNumbers a.pageNumber:hover,#LabelPageNumbers a.pageNumber:focus{background:#ccc}#LabelPageNumbers a.pageNumber:active{background:#fcc}#LabelPageNumbers .currentPageNumber{background:#6cf}#userForm{box-shadow:0 0 1px black, 1px 1px 2px black;height:400px;margin:10px auto 0 auto;padding:10px;position:relative;width:600px}#userForm .userFormItem{clear:both;height:2em;margin:10px 0;width:100%}#userForm .userFormItem .userFormItemName{float:left;width:4em}#userForm .userFormItem .userFormItemInput{float:left}#userForm .userFormItem .userFormItemInput input{margin-bottom:5px;width:20em}#userForm #ButtonUserForm{bottom:10px;clear:both;position:absolute;right:10px}

UserControl/style/style.scss

 }
 
 #header {
+  $headerHeight: 50px;
+  $headerMenuWidth: 6em;
   background: black;
   @include background-linear-gradient(top, left top, left bottom, black, #666);
   color: white;
-  font-size: 20px;
-  line-height: 50px;
+  line-height: $headerHeight;
   left: 0;
-  height: 50px;
+  height: $headerHeight;
   position: fixed;
-  text-align: center;
   top: 0;
   width: 100%;
   z-index: 1000;
+
+  h1 {
+    font-size: 20px;
+    font-weight: normal;
+    line-height: $headerHeight;
+    margin: 0;
+    height: 100%;
+    padding: 0;
+    text-align: center;
+  }
+
+  #headerMenu {
+    border-left: 1px solid #ccc;
+    cursor: pointer;
+    display: block;
+    line-height: $headerHeight;
+    height: $headerHeight;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: $headerMenuWidth;
+  }
+
+  #headerMenuSlidedown {
+    display: none;
+    height: 3em;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    top: $headerHeight;
+    width: $headerMenuWidth;
+
+    .headerMenuItem {
+      border-top: 1px solid #ccc;
+      display: block;
+      height: 1.5em;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+
+      a {
+        background: black;
+        background: rgba(0, 0, 0, 0.8);
+        color: inherit;
+        display: block;
+        height: 100%;
+        line-height: 1.5em;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+
+        &:hover, &:focus {
+          background: #333;
+          background: rgba(64, 64, 64, 0.8);
+        }
+      }
+    }
+  }
 }
 
 #LabelNotification {

UserControl/update.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">修正 | UserControl</div>
+    <div id="header">
+        <h1>修正 | UserControl</h1>
+        <div id="headerMenu">
+            Menu
+            <ul id="headerMenuSlidedown">
+                <li class="headerMenuItem"><a href="view.aspx">メイン</a></li>
+                <li class="headerMenuItem"><a href="logout.aspx">Logout</a></li>
+            </ul>
+        </div>
+    </div>
     <asp:Label ID="LabelNotification" runat="server" Text=""></asp:Label>
     <div id="main">
         <div id="userForm">

UserControl/view.aspx

 </head>
 <body>
     <form id="form1" runat="server">
-    <div id="header">一覧 | UserControl</div>
+    <div id="header">
+        <h1>一覧 | UserControl</h1>
+        <div id="headerMenu">
+            Menu
+            <ul id="headerMenuSlidedown">
+                <li class="headerMenuItem"><a href="view.aspx">メイン</a></li>
+                <li class="headerMenuItem"><a href="logout.aspx">Logout</a></li>
+            </ul>
+        </div>
+    </div>
     <asp:Label ID="LabelNotification" runat="server" Text=""></asp:Label>
     <div id="main">
         <div>こんにちは<asp:Literal ID="LiteralCurrentUserName" runat="server"></asp:Literal>さん</div>