richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds back in modal

pull/1129/head
jlukic 10 years ago
parent
ebf3441994
commit
c2c3ec5c55
4 changed files with 5 additions and 424 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 143
      server/draft/carousel.html
  2. 276
      server/draft/chat.html
  3. 4
      server/files/javascript/semantic.js
  4. 6
      server/layouts/default.html.eco

143
server/draft/carousel.html
View File

@ -1,143 +0,0 @@
---
layout : 'default'
css : 'carousel'
title : 'Carousel'
description : 'A carousel alternates display between several pieces of content in sequence.'
type : 'UI Module'
---
<script src="/javascript/carousel.js"></script>
<%- @partial('header') %>
<div class="main container">
<h2 class="ui dividing header">Standard</h2>
<div class="example">
<h4 class="ui header">Carousel</h4>
<p>A standard carousel</p>
<div class="ui carousel">
<i class="left arrow icon"></i>
<i class="right arrow icon"></i>
<div class="slides">
<div class="slide">
<img src="/images/demo/item1.jpg">
</div>
<div class="slide">
<img src="/images/demo/item2.jpg">
</div>
<div class="slide">
<img src="/images/demo/item3.jpg">
</div>
<div class="slide">
<img src="/images/demo/item4.jpg">
</div>
<div class="slide">
<img src="/images/demo/item5.jpg">
</div>
</div>
<div class="menu">
<i class="active circle icon item"></i>
<i class="circle icon item"></i>
<i class="circle icon item"></i>
<i class="circle icon item"></i>
</div>
</div>
</div>
<h2 class="ui dividing header">Usage</h2>
<h3>Initializing</h3>
<h3 class="ui header">Initializing a carousel</h3>
<div class="code">
$('.ui.carousel')
.carousel()
;
</div>
<h3 class="ui header">Settings</h3>
<table class="ui red table segment">
<thead>
<th colspan="3">Carousel Settings</th>
</thead>
<tbody>
<tr>
<td>required</td>
<td>auto</td>
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
</tr>
<tr>
<td>context</td>
<td>false</td>
<td>A selector or jQuery object to use as a delegated event context</td>
</tr>
</tbody>
</table>
<table class="ui teal table segment">
<thead>
<th colspan="3">Callbacks</th>
</thead>
<tbody>
<tr>
<td>onChange</td>
<td>None</td>
<td>Callback after a carousel is either disabled or enabled.</td>
</tr>
<tr>
<td>onEnable</td>
<td>None</td>
<td>Callback after a carousel is enabled.</td>
</tr>
<tr>
<td>onDisable</td>
<td>None</td>
<td>Callback after a carousel is disabled.</td>
</tr>
</tbody>
</table>
<table class="ui blue table segment">
<thead>
<th colspan="3">UI Module Settings</th>
</thead>
<tbody>
<tr>
<td>Name</td>
<td>Carousel</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>False</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>carousel</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
errors : {
method : 'The method you called is not defined.'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>

276
server/draft/chat.html
View File

@ -1,276 +0,0 @@
---
layout : 'default'
css : 'chatroom'
ignored : true
title : 'Chatroom'
description : 'A chatroom allows users to communicate with each other in real time.'
type : 'UI Module'
---
<link rel="stylesheet" type="text/css" href="/build/uncompressed/definitions/modules/chatroom.css">
<script src="http://js.pusher.com/2.1/pusher.min.js" type="text/javascript"></script>
<script src="/build/uncompressed/definitions/modules/chatroom.js"></script>
<%- @partial('header') %>
<div class="main container">
<h2 class="ui dividing header">Usage</h2>
<h3 class="ui header">Initializing a chat room</h3>
<p>Using chatroom requires an account with <a href="http://www.pusher.com" target="_blank">pusher</a>, a company that provides turn-key web socket access.</p>
<div class="code" data-type="javascript" data-demo="true">
// modify these for your api settings received from pusher
$('.ui.chatroom')
.chatroom({
key : 'f812089c851866cc2f3e',
endpoint: {
authentication : '/chat/authentication',
message : '/chat/send'
}
})
;
</div>
<div class="ui chatroom">
<div class="actions">
<div class="message">
<span class="ui mini inline loader"></span>
Joining chat
</div>
<div class="ui secondary mini right floated icon buttons">
<div class="ui button">
<i class="users icon"></i>
</div>
<div class="ui button">
<i class="full resize icon"></i>
</div>
</div>
</div>
<div class="room">
<div class="container">
<div class="user-list">
<div class="ui small text loader">Loading</div>
</div>
</div>
</div>
<div class="talk">
<div class="avatar">
<img src="/images/demo/avatar.jpg">
</div>
<input type="text" maxlength="200">
<div class="ui send button">
<i class="ui icon comment"></i>
Send
</div>
</div>
</div>
<h2 class="ui dividing header">Settings</h2>
<div class="no example">
<h4 class="ui header">Chatroom Settings</h4>
<p>Chatroom settings modify the chatroom's behavior</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>key</td>
<td>false</td>
<td>Pusher API key</td>
</tr>
<tr>
<td>key</td>
<td>presence-chat</td>
<td>Channel to use. Pusher requires chatrooms to use channels beginning with presence-</td>
</tr>
<tr>
<td>scrollArea</td>
<td>9999</td>
<td>If a user is this many pixels away from bottom of the page it will automatically scroll when a message is receieved</td>
</tr>
<tr>
<td>customEvents</td>
<td>{}</td>
<td>An object containing custom events and functions to use with pusher</td>
</tr>
<tr>
<td>endpoint</td>
<td>
<div class="code">
{
message: false,
authentication: false
}
</div>
</td>
<td>Endpoints used to communicate authentication and chat messages</td>
</tr>
<tr>
<td>partingMessages</td>
<td>false</td>
<td>Whether to display messages when a user has joined chat</td>
</tr>
<tr>
<td>userCount</td>
<td>true</td>
<td>Whether to display the current logged in user count</td>
</tr>
</tbody>
</table>
<div class="ui horizontal section icon divider"><i class="icon setting"></i></div>
<h4 class="ui header">Callbacks</h4>
<p>Callbacks specify a function to occur after a specific behavior.</p>
<table class="ui celled sortable definition table segment">
<thead>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onJoin(user)</td>
<td>Chatroom</td>
<td>Called after each user joins a chat room</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">DOM Settings</h4>
<p>DOM settings specify how this module should interface with the DOM</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>chatroom</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
selector : {
icon : '.icon'
}
</div>
</td>
</tr>
<tr>
<td>className</td>
<td colspan="2">
<div class="code">
className : {
active : 'active',
hover : 'hover',
loading : 'loading'
},
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="no example">
<h4 class="ui header">Debug Settings</h4>
<p>Debug settings controls debug output to the console</p>
<table class="ui celled sortable definition table segment">
<thead>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>name</td>
<td>Chatroom</td>
<td>Name used in debug logs</td>
</tr>
<tr>
<td>debug</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>performance</td>
<td>True</td>
<td>Provides performance output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>selector</td>
<td colspan="2">
<div class="code">
selector : {
userCount : '.actions .message',
userListButton : '.actions .list.button',
expandButton : '.actions .expand.button',
room : '.room',
userList : '.room .list',
log : '.room .log',
message : '.room .log .message',
author : '.room log .message .author',
messageInput : '.talk input',
messageButton : '.talk .send.button'
}
</div>
</td>
</tr>
<tr>
<td>className</td>
<td colspan="2">
<div class="code">
className : {
expand : 'expand',
active : 'active',
hover : 'hover',
down : 'down',
loading : 'loading'
}
</div>
</td>
</tr>
<tr>
<td>error</td>
<td colspan="2">
<div class="code">
error: {
method : 'The method you called is not defined',
endpoint : 'Please define a message and authentication endpoint.',
key : 'You must specify a pusher key and channel.',
pusher : 'You must include the Pusher library.'
}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

4
server/files/javascript/semantic.js
View File

@ -924,7 +924,7 @@ semantic.ready = function() {
percent = $choice.data('percent') || 0
;
window.Transifex.live.translateTo(value, true);
/*if(percent < 100) {
if(percent < 100) {
$('.language.modal')
.find('.header .name')
.html(text)
@ -936,7 +936,7 @@ semantic.ready = function() {
$('.language.modal .progress .bar').css('width', percent + '%');
})
;
}*/
}
}
})

6
server/layouts/default.html.eco
View File

@ -313,7 +313,7 @@
</div>
</div>
</div>
<!-- <div class="ui basic language modal">
<div class="ui basic language modal">
<i class="close icon"></i>
<div class="header">The <span class="name"></span> Translation Needs Your Help</div>
<div class="content">
@ -326,7 +326,7 @@
<div class="bar"></div>
</div>
<p>We need your help to make Semantic available to people who speak your language.</p>
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team, please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
<p>Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please <a href="mailto:jack@semantic-ui.com?subject=Localization%20Help">e-mail me</a> for access to our translation hub.
</p>
</div>
</div>
@ -337,7 +337,7 @@
Help Translate
</a>
</div>
</div> -->
</div>
<script src="/javascript/library/less.js"></script>
</body>
Write Preview
Loading…
Cancel
Save